CODEWITHSUNDEEP
cssheightcss-position
T1T
T1T

Reputation: 373

CSS div 100% height

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.

Upvotes: 34

Views: 139293

Answers (5)

Filip Górny
Filip Górny

Reputation: 1769

This strategy works for me best:

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

It creates a full screen container.

Upvotes: 2

Reggie Pinkham
Reggie Pinkham

Reputation: 12748

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>

Upvotes: 7

MildlySerious
MildlySerious

Reputation: 9190

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

html, body {height: 100%}

Upvotes: 56

Lars Ljungvist
Lars Ljungvist

Reputation: 19

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!

Upvotes: 1

J Max
J Max

Reputation: 2381

try setting the body style to:

body { position:relative;}

it worked for me

Upvotes: 5

Related Questions