javascript - CSS - 将页面水平分成两半而不重叠

Question

我试图将我的 html 页面分成两半(60% 的上半部分和 40% 的下半部分)但是，令我惊讶的是，当浏览器窗口调整大小时，我很难做到这一点而不会让我的内容重叠.我尝试了 flex、绝对定位、百分比...

我有的是这个

HTML

   <div class="top">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   </div>

   <div class="bottom">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   </div>

</div>

CSS

html, body {
   height:100%;
   padding:0;
   margin:0;
}
.container {
   height:100%;
}
.top {
   height:60%;
   background:red;
}
.bottom {
   height:40%;
   background:yellow;
}

这很好用。

但是，当调整页面大小时，顶部与底部重叠。

我怎样才能让两半知道内容高度而不重叠？我不想以像素为单位设置高度。仅当绝对没有仅使用 CSS 的解决方案时，我才对 JavaScript 持开放态度

FIDDLE

Answer 1

使用min-height避免重叠

.top {
  min-height:60%;
  background:red;
}
.bottom {
  min-height:40%;
  background:yellow;
}