使用可变高度的两个模块侧边栏固定页眉和页脚答案

【问题标题】：Fixed header and footer with variable height two-module sidebar使用可变高度的两个模块侧边栏固定页眉和页脚
【发布时间】：2013-02-27 21:23:15
【问题描述】：

我有一个带有固定页脚和页眉的布局，我想要的是“信息框”div 的高度可变，并让“滚动 div”填充右列中剩余的垂直高度。从this 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;
}

再一次，link to the fiddle 可以看到它的实际效果。

感谢您的帮助！

【问题讨论】：

标签： css position html css-position

【解决方案1】：

您可能需要依靠一些 JS 技巧来做到这一点 - 我正在考虑在 CSS 中使用 calc()，但意识到 #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/

【讨论】：

谢谢！我应该说我已经用 jQuery 完成了——但我真的希望用 CSS 完成它:(.