All geek questions in one place

Divide the page into two halves (top and bottom)

I want to split the page into two halves (not as a column), but as a row (top and bottom) and give 2 colors, one for the top and one for the bottom.

+6
source share
2 answers

demo on dabblet.com

HTML:

<div id="top">top</div> <div id="bottom">bottom</div>

CSS

 #top, #bottom { position: fixed; left: 0; right: 0; height: 50%; } #top { top: 0; background-color: orange; } #bottom { bottom: 0; background-color: green; }
+8
source

Demo: Jsfiddle

HTML

 <body> <div style="height:100%"> <div class="topdiv">top div</div> <div class="bottomdiv">bottom div</div> </div>

CSS

 body {margin:0;padding:0;height:100%;} div.topdiv {clear:both;position:fixed;top:0;height:50%;width:100%;background-color:#990000;color:#FFFFFF;font-size:16px;text-align:center;} div.bottomdiv {clear:both;position:fixed;bottom:0;height:50%;width:100%;background-color:#009900;color:#FFFFFF;font-size:16px;text-align:center;}​
+2
source

Source: https://habr.com/ru/post/917391/

More articles:


All Articles