How to apply 100% height to div?

2020-02-08 05:29发布

站内问答 / JavaScript
722 13 4

I want to make the last/third div to be filled the whole remaining space. I given the 100% height but there is scroll bar is coming, which i dont want to show. I there any CSS solution for same. if not possible from css then the jQuery/JS solution will be fine.

<html style="height:100%">
<head>
    <style type="css">
        html , body {
            width:100%; height:100%;
            padding:0px;
            margin:0px;
        }
    </style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
    <div style="height:100%;width:100%">
        <div style="height:100px;background-color:#ddd">&nbsp;</div>
        <div style="height:25px;background-color:#eee">&nbsp;</div>
        <div style="display:block;height:100%;background-color:#ccc">&nbsp;</div>
    </div>
</body>
</html>

13条回答
贼婆χ
2楼-- · 2020-02-08 06:09

You can use pure CSS height:100% (where 100% is the height of the visible area in the window) values in quirks mode by not using DOCTYPE at all or using IE-faulty HTML 4.0 DOCTYPE (without the .dtd url)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>

You can ditch the <!DOCTYPE.. entirely, it still would have the same effect. overflow:hidden declaration in body style is to get rid of the empty scrollbar in IE. But remember - this is quirks mode which means that you are on unpredictable territory, CSS box model differs from browser to browser!

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
3楼-- · 2020-02-08 06:11

Simply don't worry about it if your goal is to have the colour fill the bottom.

Set the colour of the outer div, and let the third one resize its height however it wants as content goes in.

<html style="height:100%">
<head>
    <style type="css">
        html , body {
                width:100%; height:100%;
                padding:0px;
                margin:0px;
        }
    </style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
    <div style="height:100%;width:100%;background-color:#ccc">
        <div style="height:100px;background-color:#ddd">&nbsp;</div>
        <div style="height:25px;background-color:#eee">&nbsp;</div>
        <div style="">&nbsp;</div>
    </div>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
beautiful°
4楼-- · 2020-02-08 06:13 
html style="height:100%">
<head>
    <style type="css">
        html , body {
                width:100%; 
                height:100%;
                padding:0px;
                margin:0px;
        }
    </style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
    <div style="height:100%;">
        <div style="height:100px;background-color:#ddd">&nbsp;</div>
        <div style="height:25px;background-color:#eee">&nbsp;</div>
        <div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc">&nbsp;</div>
    </div>
</body>
</html>

Perhaps this could work?! But I don't know whats happens if there is to mutch text...

查看更多
0人赞 添加讨论(0) 举报
干净又极端
5楼-- · 2020-02-08 06:18

In jQuery, you can try something like this:

$(function() {
    $(window).resize(function() {
        $('div:last').height($(window).height() - $('div:last').offset().top);
    });
    $(window).resize();
});

Whenever the window is resized, the last div's height is modified so that the div extends to the bottom of the page. Window's resize method is called on page load so that the div is resized immediately.

If you substract the top offset of the div from the height of the window, you are left with the maximum height available. If you have margins, borders of padding applied, you might have to adjust the value which is substracted, for example:

$('div:last').height($(window).height() - $('div:last').offset().top - 30);

Assuming you want the div 30px from the bottom of the window.

查看更多
0人赞 添加讨论(0) 举报
三岁会撩人
6楼-- · 2020-02-08 06:23

You can hide the overflow in the containing DIV:

<html>
<head>
    <style>
        *{margin:0;padding:0;}
        html,body{height:100%;}
    </style>
</head>
<body>
    <div style="overflow:hidden;height:100%">
        <div style="height:100px;background-color:#ddd"></div>
        <div style="height:25px;background-color:#eee"></div>
        <div style="height:100%;background-color:#ccc">&nbsp;</div>
    </div>
</body>
</html>

Note that content might dissapear when resizing the window using this technique.

查看更多
0人赞 添加讨论(0) 举报
Deceive 欺骗
7楼-- · 2020-02-08 06:24

On modern browsers: set position: relative on the container div, position: absolute on the third div. Then you can position it to the top and bottom of the container the same time: top: 0px, bottom: 0px;

查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)