Question

enter image description here

我认为图中显示的两种状态是不言自明的。红线具有相同的高度，蓝色条具有相同的尺寸。我怎样才能实现这种布局？我到目前为止的尝试（可能用于测试）：http://jsfiddle.net/n6zYE/

doctype为<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">，但可以更改为<!DOCTYPE html>。

问题是，当内容变得更大时，我认为没有办法让红线保持相同的高度，而当内容足够小时，仍然没有无滚动条

限制只是，我不想使用少于90％的用户支持的任何内容。例如box-sizing幸运的是supported by ~93% of the users。

编辑：我在黑色区域需要box-shadow，因此叠加层无法解决问题。但除此之外，Nulen提出了一个关于它应该如何表现的实例（http://jsfiddle.net/n6zYE/2/）。

Answer 1

你可以用黑色div作为黑色边缘，内容如下：

#content {
  min-height: 100%;
  background: grey;
  color: white;
  width: 500px;
  margin: 0 auto;
  padding: 20px 0 70px 0;
  box-sizing: border-box;
}

http://jsfiddle.net/n6zYE/2/
修改#inside div的高度以测试不同的内容。

编辑：完成calc()：
http://jsfiddle.net/n6zYE/9/

编辑：完成overflow: auto;：
http://jsfiddle.net/n6zYE/10/ （注意：这不完全适用于我的IE11）// nulen

Answer 2

我不能100％确定这是否是您所需要的，但请尝试一下

#foot { position:fixed;left:100px;}
#content {height:500px;overflow:hidden;

您需要将position:relative放在包含div的周围，并相应地更改内容div的高度。

Answer 3

通常，您将实际内容包装在设置为滚动的容器中。这样您就可以控制包装器的高度，其内容将在其中滚动。

<div id="#bodyContent">
    <div id="#wrapperThatScrolls" style="overflow-y:auto" >
        <p>Content</p>
    </div>
    // Your red margin would appear here
</div>

Answer 4

解决方案，使用display: table，display: table-row和display: table-cell：

＆＃13;

html { height: 100%; }
body {
  background: green;
  padding: 0;
  margin: 0;
  height: 100%;
}
#inside {
  border: 2px solid white;
  height: 200px;    
}
#topcontentrow, #bottomcontentrow {
  display: table-row;
  height: 20px;
}
#contentrow {
  display: table-row;
  background: grey;
  box-shadow: 0px 0px 20px 0px #000;
}
#content {
  display: table-cell;
  padding-bottom: 40px;
  color: white;
}
#contenttable {
  display: table;
  height: 100%;
  width: 500px;
  margin: 0 auto;
}
#foot {
  height: 40px;
  position: relative;
  margin: -60px auto 0;
  background: blue;
  width: 500px;
}

＆＃13;

<div id="contenttable">
  <div id="topcontentrow"></div>
  <div id="contentrow">
    <div id="content">
      <div id="inside">
      </div>
    </div>
  </div>
  <div id="bottomcontentrow"></div>
</div>
<div id="foot">
</div>

＆＃13;

在FF 31.0和IE 11中测试并工作 display: table为supported widely。

div，填充视口高度至少减去一个边距

4 个答案: