2

我已经阅读了好几页的问题，但我无法解决我的问题。我很确定这是一个非常简单的问题，如果我浪费了任何人的时间，我真的很抱歉，但我就是想不通。我不会发布我的实际代码，因为我认为一般的答案会更快。我的页面很简单，没有什么花哨的，它的设置是这样的：

CSS 示例

整个页面被包装在一个容器中。我遇到的问题是我无法使左栏到达页面底部。我试过 height:100%; 但它会创建一个滚动条，因为顶部栏的高度为 228px。我试过给左列一个高度：100%；和边距底部：-228px；但这也没有用。我以前在网站上看到过这个，我猜我会受到抨击，因为我应该知道这一点，但我能把它归咎于我的感冒吗？无论如何，感谢我得到的任何帮助！

4

2 回答 2

1 
html, body {
   display: block;
   height: 100%;
   width: 100%;
}

#left-column, #right-column { 
   height: 100%;
}

将<html>and<body>元素（作为组选择器）设置为 adisplay: block然后将其拉伸 100%，子元素可以继承所谓的 100% height，否则，浏览器不知道要引用什么。

您还可以使您的列绝对定位，然后添加top:100px; bottom:0（未经测试）

于 2013-10-27T01:52:11.727 回答
0

现场演示

来自示例的 CSS：

html,body{
  height: 100%; /* THAT IS IMPORTANT */
  width: 500px;
  margin: 0 auto;
}
#header{
  border: 1px solid blue;
  height: 100px;
}

#left{
  border: 1px solid green;
  width: 100px;
  float: left;
  height: 100%; /* THAT IS IMPORTANT */
}

#right{
  border: 1px solid red;
  width: 100px;
  float: right;
  height: 100%;  /* THAT IS IMPORTANT */
}
于 2013-10-27T02:08:27.473 回答