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
.
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
Html5 Number Input - Always Show 2 Decimal Places
How to Download a Locally Stored File in Vuejs
Angular (Typescript): How to Set Option of Selected to 'Selected' If Two-Way Binded
Nested Ngfor Looping Over an Array of Objects
How to Disable a Text Area or Mat-Form-Field
Whatsapp Use Only HTML to Share Url Link by a Descriptive Text
How to Switch Two Divs in HTML
Css Technique For a Horizontal Line With Words in the Middle
Reverse Order of Columns in CSS Grid Layout
How to Open Excel File in Browser, Not in Excel Application
How to Disable an Input Dynamically With Angular 7
Loading Images from External Folder to Component Angular 2