I'm developing this website and I want the right sidebar to have 100% height.
body {
height: 100%;
min-height: 100%;
position: relative;
}
mydiv {
height: 100%;
min-height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 290px;
}
I've read a lot of answer, especially this (Prestaul answer): Setting 100% height on an absolutely positioned element when the content expands past the window size.
But for me this trick does not work, also the fiddle exemple doesn't work!
This question is related to
css
height
css-position
I have another suggestion. When you want myDiv to have a height of 100%, use these extra 3 attributes on your div:
myDiv {
min-height: 100%;
overflow-y: hidden;
position: relative;
}
That should do the job!
CSS Flexbox was designed to simplify creating these types of layouts.
html {
height: 100%;
}
body {
height: 100%;
display: flex;
}
.Content {
flex-grow: 1;
}
.Sidebar {
width: 290px;
flex-shrink: 0;
}
_x000D_
<div class="Content" style="background:#bed">Content</div>
<div class="Sidebar" style="background:#8cc">Sidebar</div>
_x000D_
Set the html tag, too. This way no weird position hacks are required.
html, body {height: 100%}
Source: Stackoverflow.com