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

如果你减少空间，内容需要去某个地方。你有2个选择： 1.隐藏内容（溢出：隐藏） 2.显示滚动条。（溢出：滚动）我认为最好使用overflow-y:auto在身体上放置一个垂直滚动条，这样当您调整页面大小时，滚动条会自动显示。

Answer 2

使用min-height来避免重叠

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

Answer 3

html, body {
   height:100%;
   padding:0;
   margin:0;
}
.container {
   height:100%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}
.top {
   flex: 6;
   background:red;
   width: 100%;
}
.bottom {
   flex: 4;
   background:yellow;
   width: 100%;
}

 <div class="container">
 <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

以下是Demo

Answer 4

将overflow: auto添加到您的CSS中。由于您的div.top太短而无法容纳所有文字，因此它会从元素溢出到div.bottom。将overflow属性应用于元素时，它会将文本保留在元素的边界内，并在内容变得太长而无法放入视图时触发滚动条。

.top,.bottom {
    overflow: auto;
}

Answer 5

Remove height then height will adjust according to text

https://jsfiddle.net/8tvn0kw6/4/

Answer 6

你的html＆amp; css很好，你有两个选择来解决你面临的问题：

使用overflow: hidden - 这样内容不会重叠，因为在父边界之外绘制的内容将被隐藏
使用min-height: 200px - 这样您就可以定义顶部元素必须始终具有的最小高度，并且您的底部元素将被移动

Here's jsFiddle

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

6 个答案: