web - 两个 div 拉伸(stretch)到页面末尾

Question

我有一个带有两个内部 div 的 OUTER div:

• 其中一个是VERTICAL SIDEBAR，它的内容很短
• 第二个是 MAIN PAGE 的 div，其内容各不相同

它们都设置为 float: left，因此它们彼此相邻。

我已经了解到，当以百分比设置高度或最小高度时，所有的 parent 也需要指定他们的高度。

我希望它们都被拉伸(stretch)到页面的末尾。还没设法做到这一点，当 MAIN PAGE div 长于显示器高度时，问题就开始了(所以需要有滚动条)，然后我通常以 MAIN PAGE div 中那个令人讨厌的滚动条结束，或者我以 SIDEBAR div 太短结束。

Answer 1

好的，你应该像这样设置外部 div 的 css

.outer{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:auto;
} 

这会将外部 div 设置为完全填充窗口，并使用侧边栏滚动页面其余部分的长度。您将只有一个主侧滚动条。

现在，如果您希望侧边栏正好填满页面。像这样设置它的 CSS:

 .sideBar{
      position:absolute //can be relative if necesary.
      top:0;
      bottom:0;
      overflow:none;
 }

现在这会将侧边栏设置为外部 div 的确切高度。所以它将跨越整个页面并且溢出设置为无以确保没有滚动条。

现在外层 div 和侧边栏 div 的高度应该由主 div 决定，你应该只有一个干净的滚动条。