html - Problems with element positioning in css -
i try create small website. i've problems positioning of several html attributes. i'll quite simple: header should have width of 100% , fixed on top. footer should have width of 100% , fixed on button. vertical navigation bar should fill space between footer , header. content, should fill rest, margin of 10px. here's actual try:
css: * { margin: 0px; padding: 0px; border: 0px; }
html, body { height: 100%; width; 100%; } #pagewrapper { height: 100%; } header{ height: 50px; width: 100%; background-color:yellow; } footer{ height: 50px; width: 100%; background-color:blue; } #mainwrapper{ width:100%; height: 100%; background-color:black; } #mainwrapper #navigation { width: 250px; height: 100%; background-color:orange; float: left; } #mainwrapper #content { height: 100%; width: 100%; background-color: green; }
html:
<body> <div id="pagewrapper"> <header> </header> <div id="mainwrapper"> <div id="navigation"> </div> <div id="content"> <p>test content</p> </div> </div> <footer> </footer> </div> </body>
https://jsfiddle.net/6ptmq4ce/3/
what can see is, size of page bigger 100%, there scrollbar. how can scrollbar away? , how can set content margin of 10px?
you using 100%
elements push bottom out of viewport elements have less 100%
#mainwrapper { height: calc(100% - 100px); }
-100px
means take out header , footer
Comments
Post a Comment