How to expand div to cover remaining page height

Sorry, searching has returned tons of results, but nothing that matches my problem exactly. Seems like SO is drowning in div-height problems. :-(

I have the following test layout:

<!DOCTYPE html>
<html>
<head>
    <title>Div Test</title>
    <style type="text/css" media="screen">
        body {
            margin:0;
        }
        div {
            width:100%;
        }
        .content {
            position:relative;
            float:none;
            margin-left:auto;
            margin-right:auto;
            display:block;
            width:680px;
        }
        #one {
            height:100px;
            position:relative;
            background-color:#0000FF;
        }
        #two {
            position:relative;
            background-color:#00FF00;
            height:100%;
            min-height:400px;
        }
        #three {
            height:70px;
            background-color:#FF0000;
            bottom:0;
            position:absolute;
        }
        #oneone {
            height:100%;
            background-color:#838383;
        }
        #twotwo {
            height:400px;
            background-color:#EEFF47;
        }
        #threethree {
            height:100%;
            background-color:#400080;
        }
    </style>
</head>
<body>
    <div id="one">
        <div class="content" id="oneone"></div>
    </div>
    <div id="two">
        <div class="content" id="twotwo">Expand this to the bottom.</div>
    </div>
    <div id="three">
        <div class="content" id="threethree"></div>
    </div>
</body>
</html>

I want the div one and three to stay in top and bottom, div twotwo should expand in height to accommodate my pagecontent, and expand when the content is more than the page height, therefore pushing the div three down and cause scrolling.

Is this possible without JavaScript? If so, what's the CSS solution to this? Thanks!

标签： javascript jquery html css height

3条回答

ゆ、 Hurt°

2楼-- · 2019-04-16 01:50

Javascript is needed for this. When you have a header and footer height and you want the middle to have 100% height, the result will be full page height + header height + footer height. So you'll end up with scroll bars to view the entire page. If you want everything to fit in the same window, then you we need to use javascript to detect how much middle space is left and assign height accordingly.

To detect middle height with jQuery, you can do

var one = $('#one').height(),
three = $('#three').height(),
two = parseInt($(window).height() - three - one);
alert(two);

This will give you the height that is left for the middle part which is <div id="two"> in your case.

See jQuery code in action at http://jsfiddle.net/Ppw5y/. Notice that when you expand the window and you run the code again, you will have a different content height.

0人赞添加讨论(0) 举报

萌系小妹纸

3楼-- · 2019-04-16 01:55

How about setting height:auto; for #two and #twotwo?

0人赞添加讨论(0) 举报

对你真心纯属浪费

4楼-- · 2019-04-16 02:09

I think it can be done without script. Check this code out.

<!DOCTYPE html>
<html>
<head>
<title>Div Test</title>
<style type="text/css" media="screen">
    body {
        margin:0;
    }
    div {
        width:100%;
    }
    .content {
        position:relative;
        float:none;
        margin-left:auto;
        margin-right:auto;
        display:block;
        width:680px;
    }
    #one {
        height:100px;
        position:relative;
        background-color:#0000FF;
    }
    #two {
        position:relative;
        background-color:#00FF00;
        /*changed*/
        min-height:400px;
    }
    #three {
        height:70px;
        background-color:#FF0000;
        bottom:0;
        position:relative; /*changed*/
    }
    #oneone {
        height:100%;
        background-color:#838383;
    }
    #twotwo {
        /*changed*/
        min-height:400px;/*changed*/
        background-color:#EEFF47;
    }
    #threethree {
        height:100%;
        background-color:#400080;
    }
</style>
</head>
<body>
<div id="one">
    <div class="content" id="oneone"></div>
</div>
<div id="two">
    <div class="content" id="twotwo">Expand this to the bottom.</div>
</div>
<div id="three">
    <div class="content" id="threethree"></div>
</div>    
</body>
</html>

I have added a /* changed */ wherever i have changed your code.

0人赞添加讨论(0) 举报

How to expand div to cover remaining page height

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间