1

我有一个带有固定页脚和页眉的布局，我想要的是“信息框”div 的高度可变，并让“滚动 div”填充右列中剩余的垂直高度。从这个 fiddle可以看出，如果我将 scrolling-div 的高度设置为 100%，它将变得与右列一样高，而不是剩余空间。

这是页面的 HTML：

<body>
    <div id="header">
    </div>
    <div id="main-container">
        <div id="page-content">
        <div id="left-column">
        </div>
        <div id="right-column">
            <div id="info-box">
            This is a variable height div</div>
            <div id="scrolling-div">
                Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br />

            </div>
        </div>
        </div>
    </div>
    <div id="footer">
    </div>
</body>

这是CSS：

body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

#header {
    position:fixed;
    height:45px;
    width:100%;
    background-color:#FF0000;
    top:0;
}

#footer {
    position:fixed;
    height:45px;
    width:100%;
    background-color: #FF00FF;
    bottom:0
}

#main-container {
    background:#00FF00;
    position:absolute;
    top:45px;
    bottom:45px;
    width:100%
}

#page-content {
    width:960px;
    position:relative;
    margin: 0 auto;
    background-color:#FFF000;
    height:100%;
}

#left-column {
    background-color:#444444;
    width:400px;
    height:100%;
    float:left;
}

#right-column {
    background-color:#0000FF;
    float:right;
    width:560px;
    z-index:10000;
    height:100%;
}

#info-box {
    width:100%;
    height:200px;
    background-color:#0F0F0F;
    color: #FFFFFF;
}
#scrolling-div {
   background-color:#FFFFFF;
    height:200px;
    overflow:scroll;
}

再一次，一个指向小提琴的链接可以看到它的实际效果。

谢谢你的帮助！

4

1 回答 1

1

您可能需要依靠一些 JS 技巧来做到这一点 - 我正在考虑calc()在 CSS 中使用，但意识到这#info-box将是可变高度的。您可以使用简单的 jQuery 行将高度设置为#scrolling-div其父容器的高度减去其兄弟容器的高度：

$(document).ready(function() {
   $("#scrolling-div").height($("#right-column").height()-$("#info-box").height());
});

如果您想对这个设置进行未来验证（例如，如果容器中有多个同级），您可以使用以下函数：

$(document).ready(function() {
    // Define some variables
    var $sdiv = $("#scrolling-div"),
        sibHeight = 0;

    // Get sum of siblings height
    $sdiv.siblings().each(function() {
       sibHeight += $(this).height(); 
    });

    // Set own height to parent's height - sum of siblings height
    $sdiv.height($sdiv.parent().height()-sibHeight);
});

而不是使用overflow: scroll，我建议使用overflow-y: auto;)

在此处查看已编辑的小提琴 - http://jsfiddle.net/teddyrised/2qXZG/

于 2013-02-27T21:55:05.197 回答