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

User · Answer

CSS Flexbox was designed to simplify creating these types of layouts.

_x000D_

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_

User · Answer

try setting the body style to   body   position relative     it worked for me

User · Answer

Set the html tag  too  This way no weird position hacks are required   html  body  height  100

User · Answer

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] CSS div 100% height

Examples related to css

Examples related to height

Examples related to css-position