100 % height - relative div with header
Question
As almost everyone on the web I am having difficulties getting my sidebar to 100% page fill.
I have a header under which I want to put a sidebar and content:
---------------------------
- header -
---------------------------
- s - c -
- i - o -
- d - n -
- e - t -
- b - e -
- a - n -
- r - t -
---------------------------
I want the sidebar to be 100% height, but the only way I seemed to be able to get it to work is to make the sidebar "position:fixed". Because I want the website to be responsive, fixed is not the solution for that.
JSfiddle of current site
Short version:
<body>
<header>
<div id="headerBgRight"></div>
</header>
<aside class="left-panel">
<!-- Left panel listing here -->
</aside>
<div class="main-content">
</div>
</body>
CSS:
html, body {
height:100%;
}
header {
position:absolute;
background-image:image.png
width:100%
position:relative;
height:131px;
}
aside {
height:100%;
background-color:rgb(27,135,200);
position: relative;
float:left;
width:100px;
}
main-content {
position:relative;
}
The problem that I am experiencing is that the sidebar is 100% height, but because it is set to relative, the sidebar is added to the header of 131px height, thus the page has a height of 100% + 131 px. And that is NOT what I want.
Any way to fix this without creating fixed divs?
1 answers
solution1
1 2015-10-30 15:00:12
Try calculating the height of your aside div like so in CSS:
height: calc(100vh - 131px);
Where vh represents the full height of your screen, from which you substract the height of your header, which is 131px . I think that you will get what you want and if you must you can adjust the numbers to get a 100% accurate measurement. Keep in mind adding margin/padding in the future to your header can mess things up. I recommend using Sass/Scss to keep track of your height with a variable like so:
$header-height: 131px;
Then using it on your styling like so:
height: calc(100vh - $header-height);
I hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.