Menu
I've been banging my head against the wall for hours trying to figure out this issue and think it must be something small I'm missing. I've searched online, but nothing I have found seems to work. The HTML is:
<body> <div id="header"> <div id="bannerleft"> </div> <div id="bannerright"> <div id="WebLinks"> <span>Web Links:</span> <ul> <li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li> <li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li> <li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li> </ul> </div> </div> </div> <div id="Sidebar"> <div id="SidebarBottom"> </div> </div> <div id="NavigationContainer"> <ul id="Navigation"> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> </ul> </div> <div id="Main"> <!-- content --> </div> </body> My full CSS is:
* { margin: 0px; padding: 0px; } body { font-family: Calibri, Sans-Serif; height: 100%; } #header { width: 100%; z-index: 1; height: 340px; background-image: url("../../Content/images/bannercenter.gif"); background-repeat: repeat-x; } #header #bannerleft { float: left; background-image: url("../../Content/images/bannerleft.gif"); background-repeat: no-repeat; height: 340px; width: 439px; z-index: 2; } #bannerright { float: right; background-image: url("../../Content/images/bannerright.gif"); background-repeat: no-repeat; width: 382px; height: 340px; background-color: White; z-index: 2; } #Sidebar { width: 180px; background: url("../../Content/images/Sidebar.png") repeat-y; z-index: 2; height: 100%; position: absolute; } #SidebarBottom { margin-left: 33px; height: 100%; background: url("../../Content/images/SidebarImage.png") no-repeat bottom; } #NavigationContainer { position: absolute; top: 350px; width: 100%; background-color: #bbc4c3; height: 29px; z-index: 1; left: 0px; } #Navigation { margin-left: 190px; font-family: Calibri, Sans-Serif; } #Navigation li { float: left; list-style: none; padding-right: 3%; padding-top: 6px; font-size: 100%; } #Navigation a:link, a:active, a:visited { color: #012235; text-decoration: none; font-weight: 500; } #Navigation a:hover { color: White; } #WebLinks { float: right; color: #00324b; margin-top: 50px; width: 375px; } #WebLinks span { float: left; margin-right: 7px; margin-left: 21px; font-size: 10pt; margin-top: 8px; font-family: Helvetica; } #WebLinks ul li { float: left; padding-right: 7px; list-style: none; } #WebLinks ul li a { text-decoration: none; font-size: 8pt; color: #00324b; font-weight: normal; } #WebLinks ul li a img { border-style: none; } #WebLinks ul li a:hover { color: #bcc5c4; } I'd like the sidebar to stretch in height with the content of my page and leave the sidebar bottom image always at the bottom of the sidebar.
307
height:100vh The . box class has only 100vh which is 100% of the viewport height. When you set the height to 100vh, the box element will stretch its height to the full height of the viewport regardless of its parent height.
position:absolute; width:100px; height:100%; top:0; left:0; the element cant be floated, or it will not fill whole page, and cant have padding at top or bottom, the padding will cause scroll. If you need the padding top, set to the child element, like UL.
This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div. Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).
Bootstrap 4 has changed since this question was asked, but you can make the sidebar full height using min-height .. Flexbox can be used to allow the container and its child divs (row, col and sidebar) to fill height...
This worked for me
.container { overflow: hidden; .... } #sidebar { margin-bottom: -5000px; /* any large number will do */ padding-bottom: 5000px; .... } 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
