Web 两个div一直延伸到这一页的末尾

我有一个外部div和两个内部div：

• 其中之一是垂直侧边栏，其内容相当短
• 第二个是div，其主页内容各不相同

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

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

---

我希望它们都被拉伸到页面的末尾。还没有做到这一点，当主页div超过监视器高度时就会出现问题（因此需要滚动条），然后，我通常以主页div中那个讨厌的滚动条结束，或者以边栏div太短结束。

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

您可以这样做：

使用

display:table row

在外部

div

内的两个

div

上设置

display:table单元格

，将确保它们始终保持相同的高度，您必须在

body

上设置

display:table

，才能工作，或者您可以直接在外部

div

上设置它，而不是

表行

。那就行了。这一方法应该得到改进

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>

边栏
主页

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

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; }

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;
}

---

编辑：fiddle:

我不确定您的问题是什么，但这是一个替代解决方案

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

---

Fiddle:

查看您的站点后，以下是修复方法：

.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;
}

编辑：我忘记了。页面样式，我添加了它

编辑：此外，如果要将其居中，请使用以下命令：

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; }

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;
}

---

显示您的“错误”CSS和HTML代码，如果您能够更好地解释，这将是一个非常有趣的方法，但我应该如何设置我的内部div？记住，它们有不同的内容，它们都需要相同的长度。我应该将它们设置为100%，最小高度还是高度？啊，如果设置顶部和底部属性，则不需要设置高度，如果设置了右侧和左侧属性，则不需要设置宽度。使用此方法，主div的高度最终将是页面的高度。有了这个解决方案，侧边栏仍然很短，无法到达页面的末尾。我意识到我的解决方案在Chrome和Firefox中运行良好，但在IE中仍然存在一些高度问题。我已经编辑了答案，并对这些问题进行了修复。也不起作用，当页面比监视器长时，div没有到达页面的末尾。在看到您在另一个答案中的评论并查看站点后，我认为这一个应该可以解决您的问题，但是您需要从侧边栏中删除您的float:left并添加垂直对齐：top。起作用！现在有可能把外部div置于中间吗？空白0自动和设置固定宽度似乎不起作用。是的，请阅读我给出的另一个答案。我为你做了密码。只需复制粘贴即可。