How to force child div to be 100% of parent div's height without specifying parent's height?

how to make child divs always fit inside parent div
child div fill parent height
div height: 100% of parent bootstrap
expand div to height of parent
fit div to parent
make all child divs same height
css height: 100
make inner div same height as parent

I have a site with the following structure:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

The navigation is on the left and the content div is on the right. The information for the content div is pulled in through PHP, so it's different every time.

How can I scale the navigation vertically so that its height is the same as the content div's height, no matter which page is loaded?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721


I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

How to make child divs always fit inside parent div?, (the full width of the page) to hidden . This will hide the content that overflows to the left and right beyond the full page width and remove our unwanted horizontal scroll. Many web designers and front end developers have been stumped by this dilemma before. When you have a parent div with only floated child elements inside, how do you give the parent element the height of the floated child elements? Before we look at the answer, let's look at why this is a problem in the first place. Understanding Floats When we float elements with CSS, what we're doing is

For the parent:

display: flex;

You should add some prefixes, http://css-tricks.com/using-flexbox/.

Edit: As @Adam Garner noted, align-items: stretch; is not needed. Its usage is also for parent, not children. If you want to define children stretching, you use align-self.

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}
<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

CSS Tricks: Expanding Beyond a Parent div, For the parent: display: flex;. You should add some other prefixes as well. For more information refer to this doc:  How to force child div to be 100% of parent div's height without specifying parent's height? 0 votes . 1 view. asked Aug 28, 2019 in Web Technology by Tech4ever (22

This is a frustrating issue that's dealt with designers all the time. The trick is that you need to set the height to 100% on BODY and HTML in your CSS.

html,body {
    height:100%;
}

This seemingly pointless code is to define to the browser what 100% means. Frustrating, yes, but is the simplest way.

How to set the height in a CSS to be depending on the content, Example 2: The second way to achieve this by using align-items property in the parent div to 'strech'. It makes every .child-div 100% height of it's parent height. I want to expand div parent with child div but I don't know if that's possible and how to do it. I prepare a fiddle and included some code. CSS body { background: gray; } div.page { color:

I find that setting the two columns to display: table-cell; instead of float: left; works well.

How to force child div to be 100% of parent div's height , What you can do is make your parent div's position relative, the child div's positions absolute and give them values of top:0 and bottom:0  2. Child div positioned top right of parent and parent bottom left. Let’s add another child box in this example. We’ll call these elements grandparent (large box), parent and child (small box). As the parent is positioned relative to the grandparent with bottom:0px; then it is given a position:absolute.

If you don't mind the navigation div being clipped in the event of an unexpectedly-short content div, there's at least one easy way:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

Elsewise there's the faux-columns technique.

How to make flexbox children 100% height of their parent using CSS , How to force child div to be 100% of parent div's height without specifying parent's height? I have a site with the following structure: The  If you want the child divs to fit the parent size, you should put a margin at least of the size of the child borders on the child divs (child.margin >= child.bordersize). For this example, just remove the width:100%; and the height:100% in #one and remove the width:100% in #two .

Force DIV to have 100% height of parent - Frontend, CSS Tricks: Expanding Beyond a Parent div. of the containing center column div (i.e. 500%) and left margin to -50% of that width minus 100% (i.e. -200%). If you will try the set the height of a div container to 100% of the browser window using the style rule height: 100%; it doesn't work, because the percentage (%) is a relative unit so the resulting height depends on the height of parent element's height.

How to force child div to be 100% of parent div's height , Answer: Set the 100% height for parents too. If you will try the set the height of a div container to 100% of the browser window using the style rule height: 100%; it​  Your question solution is Below :--- Just Remove your table-cell div-- Make your anchor "A" as table-cell, and it working fine. The whole area is clickable now.

CSS Tricks: Expanding Beyond a Parent div, Inside of it I have a div which is set to be 15% width, 100% height (not working) and float:left. I have also tried to say the the div child have an  However if you do have given explicit height to the parent element, then you could just use height:100% on the child. If you haven’t given explicit height, you could try this is using flex-box

Comments
  • Use display table on parent and display table-cell on child. This will make child as long as the parent is. See stackoverflow.com/q/22712489/3429430
  • You can just set display: flex; align-items: stretch; for the div#main. And don't use height: 100% for div#content
  • This looks like a nice solution until you draw a border border:1px solid blue e.g. on container2 : the blue border is on the first two columns, not on the second column only as you would have expected.
  • @bfritz, a better solution would be to use display:table
  • IE11 does not play nicely with flexbox and heights. click on "known issues" here: caniuse.com/#feat=flexbox
  • @SuperUberDuper Well you can use it in bootstrap as this: jsfiddle.net/prdwaynk But if i were you, i would use foundation which is production ready with flexbox: foundation.zurb.com/sites/docs/xy-grid.html BS4 will also have Flexbox, but it is still in alpha, and i think foundation is better anyway.
  • If you're using align-items: center then the item you need to stretch needs align-self: normal
  • This is not a right answer, cuz this needs to set parent height. Question said 'without specifying parent's height?'.
  • @Aiphee downvoting because it appears you didn't see the part about not having to set the parents height right there in the original question text, yet your "solution" does exactly that.
  • Except it does not always work, for example if you have a relative positioned element inside an absolute positioned one, it no longer forces hasLayout.
  • Also, if you want to get rid of the scrollbar on the right-hand side of the window (appears in Firefox v28), give the window some breathing room: html { height: 100%; } body { height: 98%; }.