You would think that such a basic problem would be solved within seconds of try and error or after a small trip to our favorite search engine. Show
But I personally had to come to the conclusion that it is not that simple, at least when you want to have a “CSS only” solution. To this day I stumbled across various approaches to
solve this problem.
Solution 1 – FlexThis approach makes use of the fairly well supported flexbox layout. HTML:
CSS:
JSFiddlehttp://jsfiddle.net/36u4bxL1/ pros
cons
Solution 2 – Absolute PositioningThis approach uses absolute positioning to “stretch” the div between two given heights. HTML:
CSS:
JSFiddlehttp://jsfiddle.net/Lv6uj/ pros
cons
Solution 3 – Tables (or rather display: table)By utilizing the property of tables to distribute the given space between the rows and assigning fixed heights to some element, the other elements end up using the remaining height. HTML:
CSS:
JSFiddlehttp://jsfiddle.net/fT8gZ/ pros
cons
Solution 4 – CSS3 calcThis approach makes use of the new css function calc(link) to assign a height that is calculated from the total height minus the height of the other elements. HTML:
CSS:
JSFiddlehttp://jsfiddle.net/9d2b7/ pros
cons
There are also other ways to archive this effect e.g. by pushing down the lower element by an floating upper element or using the new css grid but nowadays I tend to use flex and the other above solutions as needed. How do I make a div fill the remaining width?The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
How do you make a div take all your remaining height?Solution 1: Using flex property. <html>. <div id="box">. <div id="fixed">. Fixed Height.. </div>. <div id="remaining">. How do I make a div auto adjust width?Using width, max-width and margin: auto;
Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.
How do I make a div fill its container?Set the text-align property to “center” for the <body> element. Set the height, border, font-size, font-weight, and color properties for the “container”. Set the float property to “left” and the height to 100% for the “left”. Also, specify the width and add the background-color property.
|