Element taking space

Geek Answers Handbook

Baby item with height: 100% push siblings

I have a very simple structure:

<div class="parent"> <h1>Element taking space</h1> <div class="stretch"> Not much content, but needs to be stretched to the end. </div> </div>

The div parent has the height of the set, and I want the div.stretch stretch all the way to this height, no matter how much content it has. Using height: 100% does the trick until you add some other element that will push the content down.

I assume specifying height: 100% means that the element should have the same absolute / calculated height as the parent element, and not the rest of the height after calculating all the other elements .

Setting overflow: hidden clearly hides overflowing content, but this is not an option for me.

Is it possible to achieve this in pure CSS?

Demonstration of my problem

+4
source share
5 answers

You can put the h1 element. It will work regardless of height, and the contents of the tensile element will be pushed under it. But I'm not quite sure that this is what you are looking for.

EDIT . I'm not sure what browser support you are looking for is exactly, but you can also set the display value of table to .parent and then .stretch inherit height. You can then insert the column columns inside .stretch and place them.

Updated : http://jsbin.com/oluyin/2/edit

HTML

 <div class="parent"> <h1>Element taking space</h1> <div class="stretch"> <div class="col">Not much content, but needs to be stretched to the end.</div> <div class="col">Not much content, but needs to be stretched to the end.</div> </div> </div>

CSS

 .parent { display: table; } .stretch { height: inherit; } .col { float: left; width: 50%; }
+3
source

If you know the height of your H1, you can do this to fill the baby:

 .parent { background-color: #eee; border: 1px solid black; width: 300px; height: 600px; position:relative; } h1 { Height: 100px; } .stretch { background-color:#dddddd; position: absolute; left: 0; width: 100%; top: 100px; bottom: 0; }

Example: http://jsbin.com/apocuh/1/edit

If you don’t know the height of H1, I’m afraid that you will probably need to use JavaScript or the thgaskell method.

Take a look at this post for more info and an example with JS: CSS: height - fill the rest of the div?

+1
source

Maybe using display: the properties of the table fit your needs?

Edit: this answer actually looks like thgaskell one, but instead of using float, I use table row and table display, and it seems to get what you are looking for.

Here is the jsfiddle: http://jsbin.com/ebojok/17/edit

 .parent { background-color: #eee; border: 1px solid black; width: 600px; height: 600px; display:table; } h1{ display:table-row; width:100%; } .stretch{ vertical-align:top; display:table-cell; height:100%; background-color: #ddd; }
+1
source

In the time elapsed since the request and the answer to this question, a better way to achieve this has appeared: flex-box .

Just set the parent screen to "flex" and flex-direction to "column" and set "stretchy" child height "inherit". The child inherits the height of how many remaining pixels are left to fill the parent element.

In the following example, the lines indicated by / * important * / are part of the actual solution; the rest of CSS is just visually easier to understand.

 .parent { display: flex; /* important */ flex-direction: column; /* important */ height: 150px; border: 6px solid green; } h1 { background: blue; margin: 0px; height: 90px } .stretch { background: red; height: inherit; /* important */ } 
 <div class="parent"> <h1>Element taking space</h1> <div class="stretch"> Not much content, but needs to be stretched to the end. </div> </div>
0
source

HTML

 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div class="parent"> <h1>Element taking space</h1> <div class="stretch">Not much content, but needs to be stretched to the end.</div> </div> </body> </html>

CSS

 .parent { background-color: #eee; border: 1px solid black; width: 300px; height: 600px; position:relative; } .stretch { background-color: #ddd; height: 100%; position: absolute; top: 0; }

http://jsbin.com/amesox/1/edit

This will cover your h1 element as you go through .stretched . You can get around this using z-index: 1; in my h1 element, but I would advise it if you want text in your .stretched element.

You need position:relative; in its parent div, to give position: absolute something that needs to be "connected". absolute positioned elements ignore other elements and are placed on top of them if their z index is not higher or they are its children.

-1
source

More articles:


All Articles