CODEWITHSUNDEEP
css
yarek
yarek

Reputation: 12054

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>

Upvotes: 0

Views: 65

Answers (2)

Chris
Chris

Reputation: 59521

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>

Upvotes: 0

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

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.

Upvotes: 1

Related Questions