固定页眉和页脚与可变高度的双模块侧栏

我有一个固定页脚和页眉的布局，我想要的是“信息框”div是可变高度，并有“滚动div”填充右列中剩余的垂直高度。从this fiddle可以看到，如果我将滚动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看到它在行动。

感谢您的帮助！

来源

2013-02-27 Brian Mayer

你可能需要依靠一些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/

来源

2013-02-27 21:55:05 Terry

谢谢！我应该说我已经用jQuery完成了它 - 但我真的希望用CSS完成它:(。 – 2013-02-27 21:57:51

固定页眉和页脚与可变高度的双模块侧栏

回答

相关问题