0

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

  • 其中之一是VERTICAL SIDEBAR，其内容相当短
  • 第二个是带有MAIN PAGE的div，其内容各不相同

它们都设置为浮动：左，因此它们彼此相邻。

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

我希望它们都被拉伸到页面的末尾。Havent 设法做到这一点，当MAIN PAGE div 长于监视器高度时问题就开始了（所以需要有滚动条），然后我通常以MAIN PAGE div 内的那个讨厌的滚动条结束，或者我以SIDEBAR div 太短结束。

4

5 回答 5

1

你可以这样做：

jsFiddle

在外部设置display: table-cell两个's 将确保它们始终具有相同的高度，你必须设置它才能工作，或者你可以直接将它设置在外部而不是. 那会很好用。这种方法应该适用于比 IE7 更好的任何东西。divdivdisplay: table-rowdisplay: tablebodydivtable-row

CSS：

html {
    position: absolute;
    bottom: 0px;
    top:0px;
    left: 0px;
    right: 0px;
    overflow: scroll-x;
}
body {
    height: 100%;
    padding: 0px;
    margin: 0px;
    display: table;
}
.outer {
    display: table-row;
    height: 100%;
    width: 100%;
}
.sidebar, .mainpage {
    display: table-cell;
    height: 100%;
}
.sidebar {
    width: 200px;
    background-color: #EFEFEF;
}

HTML

<div class="outer">
    <div class="sidebar">sidebar</div>
    <div class="mainpage">mainpage</div>
</div>
于 2013-04-29T01:00:54.637 回答
1

好的，您应该像这样设置外部 divs 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 决定，并且您应该只有一个干净的滚动条。

于 2013-04-29T00:55:19.350 回答
0

如果您在这里谈论身高问题，请使用：

html, body {
height: 100%;
min-height: 100% /* for firefox */
}
#main, #sidebar {
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    box-sizing: border-box; /* eliminates increased height due to padding & child margins */
}
#sidebar { background: blue; width: 200px; float:left; margin: 0; }
#main { background: green; width: 960px; margin: 0 0 0 200px; }

编辑：小提琴：http: //jsfiddle.net/jTwqe/

于 2013-04-29T01:03:24.500 回答
0

我不太确定您的问题是什么，但这是另一种解决方案。

.outer { display: table; }
.sidebar, .main { display: table-cell; padding: 10px; }
.sidebar { background: green; }
.main { background: blue; }

小提琴：http: //jsfiddle.net/Q5CmR/

于 2013-04-29T01:22:33.550 回答
0

看到您的网站后，这是修复：

.Page {
width: 970px;
min-height: 100%;
width: 100%;
display: table;
}
.Sidebar {
width: 257px;
background: url(img/sidebar-bg.png) repeat-y;
margin-left: 23px;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}

编辑：我忘记了 .Page 样式，我添加了它。

编辑：另外，如果你想居中，然后使用这个：

html, body {
height: 100%;
min-height: 100%;
padding: 0px;
margin: 0px;
}
body {
padding: 0px;
margin: 0px;
line-height: 21px;
background: url(img/bg-page-01.jpg) no-repeat;
background-position: 50% 0%;
}
.Page {
height: 100%;
display: table;
margin: 0 auto;
}
.Sidebar {
width: 257px;
height: 100%;
background: url(img/sidebar-bg.png) repeat-y;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
height: 100%;
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
于 2013-04-29T01:32:04.083 回答