Question

很抱歉，搜索已经返回了大量的结果，但没有任何内容与我的问题完全匹配。好像SO正在淹没在div-height问题中。： - （

我有以下测试布局：

<!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>

我希望div一和三保持在顶部和底部，div twotwo应该在高度上扩展以适应我的pagecontent，并在内容超过页面高度时展开，因此将div三向下推并导致滚动。

没有JavaScript，这可能吗？如果是这样，CSS的解决方案是什么？谢谢！

Answer 1

这需要Javascript。当您具有页眉和页脚高度并且您希望中间具有100％高度时，结果将是整页高度+页眉高度+页脚高度。所以你最终会看到滚动条来查看整个页面。如果您希望所有内容都适合同一窗口，那么我们需要使用javascript来检测剩余多少中间空间并相应地指定高度。

要使用jQuery检测中间高度，您可以执行

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

这将为您提供中间部分的高度，在您的情况下为<div id="two">。

请参阅http://jsfiddle.net/Ppw5y/的jQuery代码。请注意，当您展开窗口并再次运行代码时，您将拥有不同的内容高度。

Answer 2

如何设置高度：auto; #two和#twotwo？

Answer 3

我认为没有脚本就可以完成。检查此代码。

<!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>

我添加了/ *已更改* /我在哪里更改了您的代码。

如何扩展div以覆盖剩余页面高度

3 个答案: