CSS div 100% height

Question

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 is the jsfiddle working example.

This is the same code that doesn't work.

Dunseath

Do you mean the couple of pixels white space at the top? Set your body's margin to 0 and it should work. – R

I wish your question was something like "CSS div 100% height for absolute-position element". It's a top search result but the scenario you have is more specific than the question. I am a moth to the incorrect flame. – Ellaelladine

Answer 1

try setting the body style to:

body { position:relative;}

it worked for me

Waterage

I've already do this as you can read, aquilewp.webkolm.com/grafica/prova.html here you can see the jsfiddle example put on my website... and it doesn't work – Dunseath

On the contrary, you have set the body style to body {height:100%; min-height:100%; position:relative;} I am suggesting you should set it to body { position:relative;} – Waterage

Answer 2

Set the html tag, too. This way no weird position hacks are required.

html, body {height: 100%}

Sentence

I wonder why this is not the chosen answer? Setting body position to 'relative' is not a good practice however..!! – Backspace

I tried this and it works like a charm. I was going to set a min-height for the div but it creates a scroll bar. This solution is most elegant. – Azine

Answer 3

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;
}

<div class="Content" style="background:#bed">Content</div>
<div class="Sidebar" style="background:#8cc">Sidebar</div>

Officiant

Answer 4

This strategy works for me best:

div.full {
  width: 100wh;
  height: 100vh;
}

It creates a full screen container.

Electromechanical

Answer 5

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!

Swords