I'm working with an angular dialog layout in which the API to open and manage the dialog comes from a different library. When rendering, the dialog's parent container has a max-height attribute so the dialog's height is determined by the content's height (The dialog's parent container is managed by the library. I just have to supply the child component). So if I put an empty div, the dialog's height is 0 because there's nothing inside the div. How can I make the empty div expand to the max-height of the parent container?
To make this a bit more clear, I've isolated the scenario with an example-
HTML
<html>
<head>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
CSS
.parent {
background-color: purple;
max-height: 100px;
}
.a {
background-color: red;
}
Here I want the child to expand to its parent's max-height (i.e. 100px). I've tried using display: flex on parent and flex: 1 on the child but it didn't work. Note that I cannot just directly set the child's height to 100px because this 100px in my specific example is coming from a different library and I cannot assume it to remain constant.
You can set the child max height to inherit (so you don't nee to know the value that was set in the parent).
And then you can set the height to something enormous. In your example 100% would do, but that relies on knowing the various positioning of ancestor elements so this snippet puts in something that is likely to be larger than the inherited max-height just as a demo.
<html>
<head>
<style>
.parent {
background-color: purple;
max-height: 100px;
}
.child {
background-color: red;
max-height: inherit;
height: 10000px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
If you inspect computed styles in your browser dev tools you can see the computed value of the child height is 100px which is what you want.
Related
I have a container element that is automatically resizing according to its children, while maintaining its assigned padding and margin values.
If i adjust the dimensions of a child element then the parent resizes.
I wish to exclude a specific child element from this resizing process.
The following snippet illustrates the problem:
<div id="div1">
<button id="button1">Dummy</button>
<span>My parent div has increased in height</span>
</div>
With the following CSS:
#div1 {
background-color: red;
padding: 15px;
}
#button1 {
vertical-align: super;
height: 30px;
}
Here is also a plunker.
I wish the height of #div1 to be unaffected by the position of #button1.
Beginner trying to understand the height property. Let's say I start with the following basic css and html, setting the hight of the .hero div to 100%:
html,
body {
height: 100%;
margin: 0px;
text-transform: uppercase;
}
.hero {
height: 100%;
background-color: blue;
text-align: center;
color: #FFF;
}
.normal {
background-color: red;
text-align: center;
}
h1,
h2 {
margin: 0px;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div class="hero">
<h1>100% Heroic</h1>
</div>
<div class="normal">
<h2>Normal Div</h2>
</div>
</body>
</html>
So there are a couple of things that I don't understand here:
What does it mean to set <html> height to 100%? As the root element, how is its height calculated? MDN says: "A percentage height on the root element is relative to the initial containing block." However, I have no idea what the "initial containing block" would be for the <html> element.
So in the snippet above, I have set <html>, <body> and .hero to 100%. As I understand it, height is calculated with reference to the parent (except for the wrinkle specified in item 1 above). So if the .hero div is taking up 100% of <body>, how is there room left over for the .normal div? Does <body> automatically expand? If so, does this mean height: 100% with respect to .hero just means "This class will take up as much of the parent element as possible, but if there's more content in the parent, we'll have to make a little room for it as well." In other words, not quite 100%?
Any help understanding these concepts would be appreciated!!
If your using percent to measure something it is nearly always in respect to something else right?
The easiest way to think about height:100%; is to start with the window and work your way in.
Now in the above example, if the height of each of element is set to 100%. Each element will be the full height of the window.
If you you have Element-Overflow pun intended, as in elements are being pushed down due to the height of the elements above them. That does not change the height of the body, html or whatever parent element. The best way to see that is with a border and/or overflow:hidden;:
html, body{
height:100%;
padding:0;
margin:0;
/*overflow:hidden; add and remove overflow to see what I'm talking about*/
border:2px solid red;
}
.hero{
height:100%;
}
h1{
margin:0;
padding:0;
}
<div class="hero">
<h1>100% Heroic</h1>
</div>
<div class="normal">
<h2>Normal Div</h2>
</div>
So the height isn't really going over 100% you just have some overflow. Note that the body, html, and #hero are still only as tall as the window.
The body tag can be set to 100% so any styles applied to that parent tag will be applied at a height of 100% (i.e a background-color/image). If there is other content on the page, the content will take up it's own space and the body element will adjust as needed.Essentially, when an element is set to a height of 100% it will take up 100% of allotted space, in respect to other elements on the page. Hopefully this helps answer your question.
If there is no other content or no parent element, the browser window is used to determine the height/width.
Why does wrapper div not have a height? If I set the height (height:200px) the green background appears but how to set with auto height?
Here is my code (JSFiddle):
HTML:
<div class="wrapper">
<div class="effect"></div>
<div class="content">
...content
</div>
</div>
CSS:
.content {
position: absolute;
background-color:red;
}
.wrapper, .effect {
background: green;
}
.wrapper {
position: relative;
width: 630px;
}
.effect {
width:100%;
position: absolute;
}
It is not working (i.e. parent element not having any height) because all the immediate descendant of the .wrapper element is absolutely positioned — this will have the effect of taking them out of the flow of the document, therefore causing the parent's dimension to collapse to nothing.
You will also notice that the effect is the same when you float all
descendants of the parent wrapper, because float also has the
effect of taking normal elements out of the document flow.
There are only two ways to prevent this from happening, both of which involving declaring a certain height for the parent .wrapper element:
Either you explicitly state a height for the parent (see example fiddle)
Or use a relative height (say, in percentages or viewport units) that is not dependent on its own content.
You should reconsider your design strategy, and what you're trying to achieve. There is probably other ways to achieve what you intend to do, will you mind showing us?
Everyone this is my first post, so I hope I did it right.
I am facing a problem where I have child divs that need to be the same width. The #content can be bigger than the browser window (hence the 3000px, but won't always be bigger than the browser window). Currently #content is shown properly and I can use the scrollbar to see the entire #content, but #messages and #menu are cut off at the width of the browser window.
I have tried using width: inherit and several other options, but they didn't work. Does anyone else have a working solution?
I have created a JSFiddle to make life easier http://jsfiddle.net/Ks665/
I have added a screenshot of the probleem:
The red and green must become as long as the blue div.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body>
<div id="messages">test</div>
<div id="menu">test</div>
<div id="content">test</div>
</body>
<html>
CSS:
#import url('reset.css');
body {
min-width: 990px;
}
#messages {
height: 100px;
background-color: red;
}
#menu {
height: 100px;
background-color: green;
}
#content {
background-color: blue;
height: 250px;
width: 3000px;
}
You could try wrapping them inside another DIV, and specify the width on there; the child DIVs will automatically fill to the width of the parent:
<div id="container">
<div id="messages">test</div>
<div id="menu">test</div>
<div id="content">test</div>
</div>
And then apply the width to the container DIV instead of to 'content':
#container {
width: 3000px;
}
The reason it isn't working in your example is because the DIVs are children of the body tag, which has a minimum width specified, but nothing explicitly defined like I've shown above.
I'm trying to set the size of 2 divs to fill the page with a 70 - 30 % ratio.
Without setting the size of the "html ,body" how can i get the divs to display to the correct height.
Currently it displays two single lines the height of the text. Thanks
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<div style="overflow: hidden; clear: both;">
<div style="background-color: blue; height: 70%;">Top</div>
<div style="background-color: red; height: 30%;">bottom</div>
</div>
</body>
</html>
You need to make the body and html elements have height:100%, and you need to give the outer div height: 100%.
CSS:
body, html { height: 100%}
<div style="overflow: hidden; clear: both; height: 100%">
<div style="background-color: blue; height: 70%;">Top</div>
...
You cannot do this with CSS, for a good reason. If you don't set a height to the body, it's height will become as high as it needs to be to accommodate all of its children. Now, if you use percentage-based units for your children's height, the children's height will be calculated based on the height of its parent.
So, the parent's height would depend on the height of its children, and its children's height would depend on the height of the parent - infinte loop!
P.S. Fred's method works, in case your concern about setting the height revolved around setting a static height. Setting the height to 100% might solve your dilemma.
You can add a position: absolute to the parent div and subsequently stretch it to achieve full width and height. Note that the width: 100% declarations are important to enforce block-level formatting context.
<div style="position:absolute; overflow: hidden; top:0; left:0; right: 0; bottom: 0;">
<div style="background-color: blue; height: 70%; width: 100%;">Top</div>
<div style="background-color: red; height: 30%; width: 100%;">bottom</div>
</div>
Here's the fiddle
Just note that this will remove this div from 'normal flow', and that sibling elements will be obscured/obscuring. The CSS 2.1 spec provides this advice:
...the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.
Unfortunately, you need to assign a fixed height to the DIVs parent in order for the 70% - 30% ratio to work.
One thing you can do is use JavaScript to get the height of the window, and then assign this value to the parent DIV. In this way, the percents will work, since it have a reference of how it should re-size.