Menu
I can't figure this one out. I've got a simple set of divs with a header, sidebar and content area. The header is full width, the side and content are floated left.
I need the sidebar (for the background) to fill 100% of the page height, but when I inspect element in chrome, the <body> is actually ending long before the bottom of the page, which seems to be limiting the height of my sidebar.
What is keeping the <body> from filling the full page here?
<body> <div id="head"> </div> <div id="sidebar"> <div> <div id="menu"> <ul> <li><a href="/dashboard.php"><img src="/img/blank.png" alt="home" id="home_ico">Home</a> </li> <li class="admin"><a><img src="/img/blank.png" alt="home" id="users_ico">Users</a> <ul class="submenu" style="display: none;"> <li><a href="/users">Manage users</a></li> <li><a href="/users/add.php">Add a user</a></li> </ul> </li> <li class=""><a><img src="/img/blank.png" alt="home" id="clients_ico">Clients</a> <ul class="submenu" style="display: none;"> <li><a href="/client_orgs">Manage clients</a></li> <li><a href="/client_orgs/add.php" class="admin">Add a client</a></li> </ul> </li> <li class=""><a><img src="/img/blank.png" alt="home" id="projects_ico">Projects</a> <ul class="submenu" style="display: none;"> <li><a href="/projects">Manage projects</a></li> <li><a href="/projects/add.php" class="admin">Create a project</a></li> <li></li> <li><a href="/projects/submitted.php" class="admin client">Submitted projects</a></li> <li><a href="/projects/closed.php" class="admin">Closed projects</a></li> </ul> </li> <li class=""><a href="/my_account"><img src="/img/blank.png" alt="home" id="account_ico">Account</a> </li> <li class="active"><a href="/help.php"><img src="/img/blank.png" alt="help" id="help_ico">Help</a> </li> </ul> </div> </div> </div> <div id="body" class="full"> <div id="content"> <!--start block--> <div class="block"> <h1><img src="/img/blank.png" alt="home" id="help_ico"> Help</h1> <p> Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. </p> </div> </div> </body> CSS:
* { margin:0; padding:0; } html, body { height:100%; font-family:Arial, Helvetica, sans-serif; font-size: 12px; line-height: 160%; position: relative; background: #000; } #sidebar{ width: 200px; background: #000; height: 100%; padding-top: 30px; -webkit-box-shadow: inset -4px 0px 8px 0px rgba(0, 0, 0, 0.5); box-shadow: inset -4px 0px 8px 0px rgba(0, 0, 0, 0.5); float: left; } #body{ float: left; padding: 30px 0 30px 40px; width: 75%; } 
614
Try setting the height of the html element to 100% as well. Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well. However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.
container div has two parent elements: the <body> and the <html> element. And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.
– What is Min Height 100vh in CSS? Min height 100vh means the element should occupy the web browser viewport height. This is always 100 percent of the web browser's viewport height. If there is more content, the element will stretch more than the viewport's height, which is a code example that will clear things up.
Looks like you have float:left applied on your children. Use this code :
html, body { overflow: auto; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
