Body is currently set to layout="column" I have a header row and a content row inside it. The header row works just fine, but the content row is getting set to no height, or I set it to flex but either way it is overlapping the header row and I want to be able to set the inner divs to be 100% of the remaining height.
<body layout="column" ng-style="bodyStyle" ng-controller="AppCtrl">
<div class="header" layout="row">
<div class="menuButton">
<ng-md-icon icon="menu"></ng-md-icon>
<md-tooltip>Menu</md-tooltip>
</div>
</div>
<div class="content" layout="row" style="background-color: black">
<p>Random text asdf
<div class="sidenav" layout="column">
<div>
<ng-md-icon icon="people"></ng-md-icon>
<md-tooltip>Contacts</md-tooltip>
</div>
<div class="active">
<ng-md-icon icon="message"></ng-md-icon>
<md-tooltip>Conversations</md-tooltip>
</div>
<div>
<ng-md-icon icon="phone"></ng-md-icon>
<md-tooltip>Phone Calls</md-tooltip>
</div>
<div>
<ng-md-icon icon="more_horiz"></ng-md-icon>
<md-tooltip>More</md-tooltip>
</div>
</div>
<div class="likeThis!">I want to be 100% of the remaining height</div>
</div>
</body>
u can use height:calc
e.g.
.full-height {
height: calc(100%)
}
you can also use it like
.full-height {
height: calc(100% - 20px)
}
assuming 20px is height of your remaining stuff which is at the top.
Related
This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 2 years ago.
I have the following structure in my project:
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A"><div>
</div>
<div class="uneditable">
<div class="B"></div>
</div>
</div>
...
</div>
I have the following restrictions with this structure:
container class must be display flex and be on column mode
super-child class must be display flex and be on row mode
uneditable class does cannot receive any styling at all, only that they have height and width 100%
What i'm trying to do is style this structure so that class A has a dominating height of over B, that is, if A height grows, B will have more height to match A's, if A is smaller, B will have the same height as A's
I've tried to set grow and shrink values in the class A and B. I can also change the displays to grid, but in my case is not preferred to.
Is there a way to make this dependence of height without using javascript to style the elements?
[UPDATE]
Found the answer to my question here. The solution was to use the following style for all children of super-child, except the first.
height: 0;
min-height: 100%;
This works due the fact that this conjunction of height definition can be understood as "have no height, just expand enough not pushing the boundaries"
... I would use grid for this, not flex and pay attention to the closing tag too :) , flex will require a bit of js to update heights :
example in a column since in a row should not be an issue
.super-child {
display: grid;
grid-auto-rows: 1fr;
}
.super-child > .uneditable {
border: solid;
}
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A <br> AA</div>
</div>
<div class="uneditable">
<div class="B"> B</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A </div>
</div>
<div class="uneditable">
<div class="B"> B<br> BB</div>
</div>
</div>
</div>
... side by side :
.super-child {
display: flex;
}
.super-child > .uneditable {
border: solid;
flex:1;
/* demo purpose to resize heights */
overflow-y:scroll;
resize:vertical
}
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A <br> AA</div>
</div>
<div class="uneditable">
<div class="B"> B</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A </div>
</div>
<div class="uneditable">
<div class="B"> B<br> BB</div>
</div>
</div>
</div>
Using Foundation XY-grid, and specifically a nested grid-y inside a cell, I want to use the class .auto on the parent cell to distribute the cell heights evenly, in the case of a grid-y with 2 cells that would be 50%/50%.
This works fine as long as the grid-y cell content is low enough to fit inside the cell without pushing the border. However, if the content is higher, the content is cropped.
A workaround for this is to set flex-basis for class .auto to "auto" instead of "0px" which is the predefined value in Foundation css.
This works fine as long as the content is high enough to push the cell border, but if it's smaller then the parent cell heights are not distributed evenly.
Side note: The use of ".grid-y" on each cell is to be able to position the content of the cell center vertically. Please see:
Vertically align content inside XY-Grid Cell
<div class="grid-container">
<div class="grid-x">
<div class="cell medium-6 grid-y align-middle align-center" style="background:green;">
<div style="background: blue; height: 300px">
Element A
</div>
<div style="background: violet; height: 300px">
Element B
</div>
</div>
<div class="cell medium-6 grid-y align-middle align-center" style="background:red;">
<!-- Nested Grid -->
<div class="grid-y" style="min-height: 100%; width: 100%;">
<div class="cell auto grid-y align-middle align-center" style="background:yellowgreen;">
<div style="background: yellow; height: 50px">
Element C
</div>
<div style="background: gray; height: 50px">
Element D
</div>
</div>
<div class="cell auto grid-y align-middle align-center" style="background:darkcyan;">
<div style="background: yellow; height: 70px">
Element E
</div>
<div style="background: gray; height: 70px">
Element F
</div>
</div>
</div>
</div>
</div>
</div>
Modified CSS:
.grid-y > .cell.auto {
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
instead of Foundation original code:
flex: 1 1 0px
Because the grid is already using Flexbox, you can set up a horizontal grid and equal height cells by making the cells also display flex.
Example: https://codepen.io/rafibomb/pen/wLWKXL
<div class="grid-x">
<div class="cell flex-container auto">
<img src="http://placehold.it/20" alt="">
</div>
<div class="cell flex-container auto">
<img src="http://placehold.it/50" alt="">
</div>
<div class="cell flex-container auto">
<img src="http://placehold.it/700" alt="">
</div>
</div>
This question already has answers here:
Very long words not wrapping in HTML/CSS
(3 answers)
Closed 4 years ago.
I have some arbitrarily nested div elements using display: inline-block like this:
<div class="div-0">
<div class="div-1">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-2">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-3">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-4">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-5">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
</div>
Somebody has hidden a specific CSS rule somewhere that's something like this:
.div-0 .div-4 .div-01 {
min-width: 400px;
width: 100%;
}
This prevents all my div elements from being sized smaller than 400px. How do I hunt down which rule is forcing the minimum width?
I've tried manually inspecting each div with Chrome's inspector, but my actual code is nested 20+ div elements deep and it's difficult to determine by inspection.
* {
box-sizing: border-box;
}
div {
border: 1px solid red;
padding: 25px;
display: inline-block;
min-width: 100%;
}
.div-0 .div-4 .div-01 {
min-width: 400px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="div-0">
<div class="div-1">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-2">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-3">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-4">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-5">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
</div>
</body>
</html>
Go to the 'Computed' tab of the CSS styles. There, look for the 'min-width' property. Hover over the '400px' value and you will see an arrow. Click that arrow and it will jump you to the CSS rule that is enforcing it.
It turns out that I was asking the wrong question! My suspicion was wrong – there was no developer hiding CSS rules. Instead, it was some unbreakable text inside of the div elements.
There was a line of text in the div like Loremipsum....loremipsum that was unable to break properly. The div element cound not resize smaller than the width of this long "word".
Changing the word breaking strategy fixed my problem:
div {
word-break: break-word;
}
<div style="border-style:solid; margin:auto;">
<div style="position:absolute;">
<div style="background:yellow; border-style:dotted; height:300px; width:300px">
<h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
</div>
</div>
<img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
I'm trying to put a div over the image, how let the floating div to occupy the space, so the footer div will be pushed accordingly.
I'm not sure what you're asking. Do you wish to have the yellow div take up only the amount of space of the div behind it (with the Google Doodle)? Or do you want the reverse, that is, you want the footer height to automatically adjust to the yellow div height?
I am not sure I completely understand. Do you mean to make the div containing the image to have a minimum height? You can use the min-height property then as follows:
<div style="border-style:solid; margin:auto;min-height:80%">
<div style="position:absolute;">
<div style="background:yellow; border-style:dotted; height:300px; width:300px">
<h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
</div>
</div>
<img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
-- Edit: If you are looking for some kind of a background-image in a div container you can control you can do something like this:
<html>
<head>
</head>
<body>
<div style="border-style:solid; margin:auto">
<div div style="background-image:url('https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg'); background-repeat: no-repeat;" >
<div style="border-style:dotted; height:400px; width:600px">
</div>
</div>
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
</body>
</html>
HTML
<div id="outer_div" style="overflow:auto; width:1238px; height:310px;">
<div id="inner_div" style="height:300px;">
<div id="child1" style="width:400px;">
</div>
<div id="child2" style="width:400px;">
</div>
<div id="child3" style="width:300px;">
</div>
<div id="child4" style="width:500px;">
</div>
<div id="child5" style="width:300px;">
</div>
<div id="child6" style="width:600px;">
</div>
</div>
</div>
What I want is the inner_div's width should go beyond the outer_div and child divs will remain on same line. I am adding child divs into inner_div by using jquery prepend and append method. Currently the maximum width inner_div is taking the width of outer_div and after that the line breaks.
I tried with display:inline-block, overflow:auto; and width:auto on inner_div but its not working.
Currently I am getting it to work using jquery by adding width dynamically to inner_div as I am dynamically adding child divs into inner_div. I would like to achieve it using css if possible.
Use table and table-cell properties to achieve this.
#inner_div{display:table;}
#inner_div div{display:table-cell;}
DEMO
you should use min-width on outer_div and float(or display:inline-block) on children of inner_div .
or use position absoulote on inner_div:
<div id="outer_div" style="min-width:1238px; height:310px">
<div id="inner_div" style="height:300px;">
<div id="child1" style="width:400px;display:inline-block">
</div>
<div id="child2" style="width:400px;display:inline-block">
</div>
<div id="child3" style="width:300px;display:inline-block">
</div>
<div id="child4" style="width:500px;display:inline-block">
</div>
<div id="child5" style="width:300px;display:inline-block">
</div>
<div id="child6" style="width:600px;display:inline-block">
</div>
</div>
</div>
or if you want fixed width of outer_div you can use position:
<div id="outer_div" style="width:1238px; height:310px;position:relative;white-space: nowrap;">
<div id="inner_div" style="height:300px;position:absolute; top:0 ">
<div id="child1" style="width:400px;display:inline-block">
</div>
<div id="child2" style="width:400px;display:inline-block">
</div>
<div id="child3" style="width:300px;display:inline-block">
</div>
<div id="child4" style="width:500px;display:inline-block">
</div>
<div id="child5" style="width:300px;display:inline-block">
</div>
<div id="child6" style="width:600px;display:inline-block">
</div>
</div>
</div>
by display table , inner_div can't get width larger than 1238!
also, I think , you can't add new element by css!