yarek February 2016

css3 : how to put height 100% on a static/relative (no absolute positionned) div?

I have a container and 2 divs inside: 1 header (whose height should be free if I add some lines) and an userList. I want the userList to have the height of the container : any idea how ? (no JS solution, better if no position: asbolute used)

#container {
	width: 300px;
	height:400px;
	background-color: #FF0000;
}
#header{
	background-color: #FFF500;
}
#userList {
	background-color: #00FF00;
	width:290px;
	height: 100%;
	overflow-y:auto;
}
<div id="container">
	<div id="header">line1<br>line2<br>line3</div>
    <div id="userList">
    	line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
        line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
            </div>
</div>

Answers


Marcos Pérez Gude February 2016

Right now, your .userList have the same height as his container, but with the yellow box it goes down. The best solution with your requirements is as this:

Your requirements:

no JS solution, better if no position: asbolute used)

#container {
	width: 300px;
	height:400px;
	background-color: #FF0000;
}
#header{
    width: 300px;
	background-color: #FFF500;
}
#userList {
	background-color: #00FF00;
	width:290px;
	height: 100%;
	overflow-y:auto;
}
<div id="header">line1<br>line2<br>line3</div>
<div id="container">
  <div id="userList">
    line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
    line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
  </div>
</div>

The only I need is take out the #header division and give it the same with as #container. By this mode, #container and #userList have got the same height.


Chris February 2016

One good way of doing this is with display: flex and flex-direction properties.

This way, you can have a header with flexible height, and a userlist that is always contained within the container. This way, you also don't have to change your markup and move the header outside your container.

Demo

Full code:

#container {
  width: 300px;
  height:400px;
  background-color: #FF0000;
  display: flex;
  flex-direction: column;
}
#header{
  background-color: #FFF500;
}
#userList {
  background-color: #00FF00;
  width:290px;
  height: 100%;
  overflow-y:auto;
}
<div id="container">
  <div id="header">line1<br>line2<br>line3</div>
  <div id="userList">
    	line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
        line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
  </div>
</div>

Post Status

Asked in February 2016
Viewed 2,097 times
Voted 4
Answered 2 times

Search




Leave an answer