css - CSS：扩展 div 以适应整个页面

Question

我正在尝试找到一种方法来扩展 adiv以适应页面的其余部分，而不使用JavaScript.

我写的一些代码开始：

HTML：

​<div class="bodyContainer">
    <div class="sidebar"></div>
    <div class="container"></div>
</div>  

CSS：

.bodyContainer {
 border: 1px solid black;
 width: 100%;
 min-height: 50px; 
 height: 100%;    
}

.sidebar {
    height: 100%;
}

.container {
    height: 100%;
}

上面的代码没有扩展div以适应页面的其余部分。

我也开始了JSFiddle，看看会发生什么。链接：JSFiddle

Answer 1

您还需要将高度和宽度添加到 html 和 body 元素：

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

http://jsfiddle.net/Kyle_/BwVWx/4/

Answer 2

上面的答案有正确的信息，但我为那些不熟悉 CSS 的人添加了一些信息空白。

如果你只是添加一个类并尝试让你的 div 100%，你会得到这个

所以你必须增加和100%的高度bodyhtml

div 周围仍然会有“空白”。所以删除填充和边距。

CSS

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* your class for the div should have 100% height and width */
.bg-full {
  background-color: #777; /* you can add a color to visually test your code */
  width: 100%;
  height: 100%;
}

您可以在CodePen上查看演示

Answer 3

尝试height: 100%;为 HTML 和 BODY 元素添加一个：

html, body {
    height: 100%;
}

http://jsfiddle.net/BwVWx/3/

Answer 4

使用box-sizing: border-box;css 属性避免水平滚动条显示。这是您更新的示例。

关于box-sizing css 属性。