CSS sidebar always full height
I'm busy with this page ( http://s.nogax.ga/editor-css.html ) and I'm trying to create a full height sidebar. Basically, the Div sidebar should always extend to the bottom of the screen. (and with it a black line to its right)
Html
<div class='main-nav'>
Site Name Editor
</div>
<div class='content'>
<div class='sidebar'>
Page Names
</div>
<div class='editor'>
Optie 1 <br>
Optie 2 <br>
</div>
</div>
CSS
html, body {
background-color: grey;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
heigth: 100%;
}
.main-nav {
background-color: black;
color: white;
font-family: 'Noto Sans', sans-serif;
font-size: 150%;
heigth: 20px;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
}
.content {
position: absolute;
width: 100%;
heigth: 100%;
}
.sidebar {
width: 15%;
position: absolute;
background-color: grey;
border-right: 2px solid;
}
.editor {
position: absolute;
width: 84.5%;
right: 0;
background-color: grey;
}
+3
source to share
3 answers
You can just make a sidebar position:fixed
if you want it to always appear on the side:
.sidebar {
height: 100%;
position: fixed;
}
Here's an example
+4
source to share
Apply the following css will make the output as you expected:
.sidebar {
width: 15%;
position: fixed;
background-color: grey;
border-right: 2px solid;
bottom:0;
}
Check out https://jsfiddle.net/r8u7pkd6/2/ .
+2
source to share
For informational and modern browsers, you can also use display:flex;
.
By the way: you mistakenly specified ht ! = Heig th
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: local('Noto Sans'), local('NotoSans'), url(http://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
html, body {
background-color: grey;
margin: 0;
width :100%;
height:100%;
flex-direction:column
}
body,.content {
display:flex;
}
.main-nav {
background-color: black;
color: white;
font-family: 'Noto Sans', sans-serif;
font-size: 150%;
margin: 0;
}
.content {
flex:1;
}
.sidebar {
width: 15%;
background-color: grey;
border-right: 2px solid;
}
.editor {
flex:1; /* will use remaining space*/
/*width: 84.5%;
right: 0; useless here*/
background-color: lightgrey;
}
<div class='main-nav'>
Site Name Editor
</div>
<div class='content'>
<div class='sidebar'>
Page Names
</div>
<div class='editor'>
Optie 1 <br>
Optie 2 <br>
</div>
</div>
+2
source to share