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

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -