hyperexpert hyperexpert - 4 months ago 13
CSS Question

CSS - Horizontally split page in two halves without overlapping

I am trying to split my html page in two halves (60% top half, and 40% bottom half) However, to my surprise, I am having a hard time doing so without having my content overlap when the browser window resize. I tried flex, absolute positioning, percentages...

What I have is this

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;
}


This works well.

enter image description here

However, when the page is resized, the top part overlaps the bottom part.

enter image description here

How can I make it so the two halves are aware of content height and not overlap? I don't want to set height in pixels. I am open to JavaScript only if there is absolutely no solution with CSS only

FIDDLE

Answer

use min-heightto avoid overlap

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