Question

考虑以下页面布局：

<div id="container">
  <div id="a">A</div>
  <div id="b">B</div>
</div>

的样式如下：

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

#container {
  height: 100%;
}

#container * {
  box-sizing: border-box;
  border: 1px solid red;
}

#a { height: 50%; }
#b { height: 50%; }

假设#a和#b没有获得额外的padding或margin样式属性，那么这些div中的任何其他内容是否有可能导致50/50分裂？或者使容器超过100％百分比规则并使页面具有滚动条。

我将此作为顶级页面布局使用，我想确保始终遵守50/50分割，无论#a和#b div中是否还有其他任何内容。

https://jsfiddle.net/4v9ag66n/

Answer 1

确保您可以将overflow-y: hidden;添加到＃a，＃b divs。

Answer 2

你也可以添加overflow-y：scroll或overflow-y：hidden到#a和#b，这样两个div都有单独的滚动条/ noscroll bar如果内容更多但页面没有滚动条

Answer 3

我认为这个css（我修改过你的css）应该实现你所追求的目标：

html, body { 
  margin: 0px ; 
  height: 100%; 
  overflow: hidden;
}

#container {
  height: 100%;
}

#container * {
  box-sizing: border-box;
  border: 1px solid red;
}

#a { height: 50%; overflow: auto;}
#b { height: 50%; overflow: auto;}

另外，您可能希望查看自动换行。

拆分页面50/50％，无论其他内容如何

3 个答案: