html - Why is my height: 100% property not working? -
i need explained me. thought understood css; haven't bloody clue.
body { margin:0; padding:0; } #contain{ position: relative; width: 100% height: 100%; } #wizard{ position: absolute; left: 5%; width:10%; height: 100%; background-color: black; } #main{ position: absolute; height: 100%; left: 15%; border-style: dashed; border-color: red; }<!doctype html> <html> <head> <title>demo</title> <script> //css here, removed purpose of question </script> </head> <body> <div id="contain"> <div id="wizard"> </div> <div id="main"> </div> </div> </body> </html>this 1 of basic examples of css positioning, , i've used many times before. understand "incorrect", why? why see single red dot (the condensed, dashed border of #main) 15% left, , nothing else?
set height 100% body , html, , provide reference other elements.
you don't need set height 100% positioned elements, set top , bottom offsets 0. if want use height: 100%, may height due border, , can fix specifying property box-sizing: border-box.
body { margin: 0; padding: 0; } body, html { height: 100%; } #contain { position: relative; width: 100%; height: 100%; } #wizard { position: absolute; top: 0; bottom: 0; left: 5%; width: 10%; background-color: black; } #main { position: absolute; top: 0; bottom: 0; left: 15%; right: 0; border-style: dashed; border-color: red; }<div id="contain"> <div id="wizard"></div> <div id="main"></div> </div>