Question

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

CSS example

整个页面都包装在一个容器中。我遇到的问题是，我不能让左栏到达页面底部。我试过身高：100％;但它会创建一个滚动条，因为顶部栏的高度为228px。我试过给左栏增加一个高度：100％;和保证金底部：-228px;但那也不起作用。我之前在网站上看过这个，我猜我会得到抨击，因为我应该知道这一点，但是我可以把它归咎于我的冷吗？无论如何，感谢我的帮助！

Answer 1

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

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

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

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

Answer 2

LIVE DEMO

示例中的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 */
}

CSS如何使从顶部开始100px的DIV到达页面底部

2 个答案: