Question

我正在尝试找到一种方法来扩展div以适应页面的其余部分，而不使用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

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

html, body {
    height: 100%;
}

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

Answer 3

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

关于box-sizing css属性。

Answer 4

上面的答案有正确的信息，但我在CSS的新手中添加了一些信息空白。

如果您只是添加一个课程并尝试将您的div设为100％，那么您将获得此

因此，您必须将100%添加到body和html的高度

你仍然会有白色空间＆＃34;围绕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

上观看演示

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

4 个答案:

CSS