Question

SO成员问了一个关于将屏幕分成2个分隔线的问题，底部分隔线采用固定高度，顶部分隔线采用其余高度。

这是他的代码＆＃34;

 html,
    body,
    object {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px;
    }
    div {
      margin: 0px;
      padding: 0px;
    }
    #mainContainer {
      position: relative;
      height: 100%;
      width: 100%;
    }
    #topContainer {
      border: 1px solid red;
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;
      width: 100%;
    }
    #bottomContainer {
      border: 1px solid blue;
      position: absolute;
      bottom: 0px;
      left: 0px;
      height: 100px;
      width: 100%;
    }
    <body>
      <div id="mainContainer">
        <div id="topContainer">
          This is the top div
        </div>
        <div id="bottomContainer">
          This is the bottom div
        </div>
      </div>
    </body>

我的解决方案是给顶部容器，高度为86.1％

我的解决方案是错误的吗？为什么？

Answer 1

正如我所看到的，您的解决方案会将topContainer的高度设置为其父级高度的86.1％。如果你调整屏幕大小，topContainer的高度也会缩小/增长。因此它不会总是匹配bottomContainer的边缘。

在原帖中看看Shrinivas的答案，bottomContainer已经有一个100px的固定高度你可以使用，CSS函数calc()可以计算一个高度 - 最好的是，你可以添加和从百分比中减去像素，反之亦然。因此，将topContainer的高度设置为calc(100% - 100);将使其达到全高度减去bottomContainer的固定高度。此解决方案适用于每个屏幕和窗口分辨率。

Answer 2

我没有太多回复评论这就是为什么我在这里发表评论

我在JSFIDDLE中运行它，我确信你的解决方案是正确的。

#topContainer {
  border: 1px solid red;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
#bottomContainer {
  border: 1px solid blue;
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 100px;
  width: 100%;
}

在这里自己尝试

JSFIDDLE Demo Click here

用2个分隔器分割屏幕

2 个答案: