How to Make Div Have 100% Height of Parent, Independent of Children'S Size? Complex Layout

How to make div have 100% height of parent, independent of children's size? Complex layout

Use d-flex, flex-column, and h-100 for its parent. And flex-grow-1 for the row that you want that it occupies all of the available space.

html,body {  height: 100%;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" /><div class="container d-flex flex-column h-100 bg-light">  <div class="row">    <div class="col p-5 bg-danger"></div>  </div>  <div class="row bg-info flex-grow-1">    <div class="col"></div>  </div></div>

How can I expand floated child div's height to parent's height?

For the parent element, add the following properties:

.parent {
overflow: hidden;
position: relative;
width: 100%;
}

then for .child-right these:

.child-right {
background:green;
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
}

Find more detailed results with CSS examples here and more information about equal height columns here.

Make div (height) occupy parent remaining height

Expanding the #down child to fill the remaining space of #container can be accomplished in various ways depending on the browser support you wish to achieve and whether or not #up has a defined height.

Samples

.container {  width: 100px;  height: 300px;  border: 1px solid red;  float: left;}.up {  background: green;}.down {  background: pink;}.grid.container {  display: grid;  grid-template-rows: 100px;}.flexbox.container {  display: flex;  flex-direction: column;}.flexbox.container .down {  flex-grow: 1;}.calc .up {  height: 100px;}.calc .down {  height: calc(100% - 100px);}.overflow.container {  overflow: hidden;}.overflow .down {  height: 100%;}
<div class="grid container">  <div class="up">grid    <br />grid    <br />grid    <br />  </div>  <div class="down">grid    <br />grid    <br />grid    <br />  </div></div><div class="flexbox container">  <div class="up">flexbox    <br />flexbox    <br />flexbox    <br />  </div>  <div class="down">flexbox    <br />flexbox    <br />flexbox    <br />  </div></div><div class="calc container">  <div class="up">calc    <br />calc    <br />calc    <br />  </div>  <div class="down">calc    <br />calc    <br />calc    <br />  </div></div><div class="overflow container">  <div class="up">overflow    <br />overflow    <br />overflow    <br />  </div>  <div class="down">overflow    <br />overflow    <br />overflow    <br />  </div></div>

Change parent div size as child gets longer while having position:absolute in Angular2

You could use the ViewChildren Decorator:

@ViewChildren('.itsABook', {read: ElementRef}) 
public books: QueryList<ElementRef>;
@ViewChild('main', {read: ElementRef})
public mainContainerRef: ElementRef;

and then iterate over the QueryList:

let height = this.books.reduce((height, bookRef) => {
let rect = bookRef.nativeElement.getBoundingClientRect();
return rect.height > height ? rect.height: height;
}, 0);

and set the height of the main container using the Renderer:

this.renderer.setElementStyle(this.mainContainerRef.nativeElement, 'height', height + 'px');

HTML:

<div id="main" #main>
<div class="itsABook"></div>
<div class="itsABook"></div>
<div class="itsABook"></div>
</div>

Also keep in mind that the references for books and mainContainerRef are only available after ngAfterViewInit hook

Edit: Added reference for mainContainer

How do I prevent a parent element's width from affecting the child's width?

the important piece of info here is that any block level elements will automatically take the full-width of their parent (until they hit the max-width if a value is provided).

this means, if your parent (div) is 600px, and the child (p) has 650px max-width, it will still take up the full 600px because that's less than the max-width it has defined, and because it's block level, it wants to take up the full width

another useful thing to keep in mind is, if your layout starts to get complex with lots of css rules, take a second and do a simplified version first (like the examples I have below) then build on top of that

you can do it like this:

div {
border: 1px dashed #ddd;
text-align: center;
}

p {
max-width: 650px;
display: inline-block;
border: 1px dashed #ddd;
}
<div>
<p>
text
</p>
</div>


<div>
<p>
lots of text lots of text lots of text
lots of text lots of text lots of text
lots of text lots of text lots of text
</p>
</div>

Parent's padding influences vertical relative padding of child in Chrome

Apparently it's a bug in Webkit and Blink – or it's just not specified, as Sergiy pointed out.

I consider it a bug since width: 100% is taking paddings into account, and any other % units should behave the same.

I filed a bugreport which got accepted, it's fixed in v52 of Chrome.

Safari 10.1 still has the issue.

How to make div boxes with floats have the same height with dynamic content

If you need the formatting of a table, but you have to support older browsers that don't have support for display:table, then use a table. It's pretty much that simple.

Sometimes a table is the appropriate option, and sometimes it's the only option that will work without adding some moderately-risky JS or jQuery to simulate the formatting of a table.

For instance, a table (or display:table, which amounts to the same thing) is the only natural way to have true vertical centering of dynamic content. It's also the only natural way to enforce equal-height columns for dynamic content. And in general, a table is appropriate anytime you need to display a data grid of some sort.

Padding on parent versus margin on child

I prefer to set margin on the div that resides inside the container.

Suppose the black div below is the outer container with display: flex, width: 300px and height: 200px. When you assign padding: 30px padding to the outer div, this will result in 360px in width and 260px in height. Given that you won't expect the container to stretch, this will affect the elements around the container div. Hence, it is better to use margin on the inner div.

enter image description here

When you assign margin between the inner div and the container, the actual outer div won't move, and the margin will only affect the inner div, thus not affecting the elements around it.

If you are using box-sizing: border-box; then things will change accordingly, so it totally depends on what actual size the elements has to be. Using margin/padding on the inner elements will be the right way.

CSS – why doesn’t percentage height work?

The height of a block element defaults to the height of the block's content. So, given something like this:

<div id="outer">
<div id="inner">
<p>Where is pancakes house?</p>
</div>
</div>

#inner will grow to be tall enough to contain the paragraph and #outer will grow to be tall enough to contain #inner.

When you specify the height or width as a percentage, that's a percentage with respect to the element's parent. In the case of width, all block elements are, unless specified otherwise, as wide as their parent all the way back up to <html>; so, the width of a block element is independent of its content and saying width: 50% yields a well defined number of pixels.

However, the height of a block element depends on its content unless you specify a specific height. So there is feedback between the parent and child where height is concerned and saying height: 50% doesn't yield a well defined value unless you break the feedback loop by giving the parent element a specific height.



Related Topics



Leave a reply



Submit