用2个分隔器分割屏幕

一个SO成员问了一个关于用两个分隔符划分屏幕的问题，让底部的分隔符取固定的高度，顶部的分隔符取剩下的高度。

这是他的代码"

 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%的高度

我的解决方案被认为是错误的吗?,为什么?

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

看看Shrinivas在原始帖子中的回答，底部容器已经有一个固定的高度100px，你可以使用CSS函数calc()来计算高度-最好的事情是，你可以从百分比中添加和减去像素，反之亦然。因此，将topContainer的高度设置为calc(100% - 100);将使其完全高度减去底部容器的固定高度。

我没有太多的评论，这就是为什么我把评论放在这里

我在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%;
}

在这里自己试试

点击这里

相关内容

最新更新

热门标签：