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.
Related
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.
I am leaning Angular 4 and I am creating an app with Bootstrap , I am using the grid system, but I am not ale to set any height to the columns of the grid.
I have tried all solutions available on internet setting overflow to hidden at container and then setting clear : both on column. Not able to make it work
<div class="container" >
<div class="row">
<div class="col-lg-12" style="background-color:aqua">
Column 1
</div>
</div>
<div class="row">
<div class ="col-lg-12" style="background-color:blueviolet">
Column 2
</div>
</div>
</div>
.container{
height: 90%;
overflow:hidden;
}
.row{
height:25%;
clear: both;
}
.col-lg-12{
height:100%;
clear:both;
}
JsFiddle link link
Please let me know!!!
The problem is that you are trying to set height with percentage.
The height of a block element (div is a block element) depends on the height of the content.
If you specify a percentage, that will always respect the height of the content, no matter what.
Change the height to pixels and you will control the height of the element.
See this answer for more information
.container {
display: inline-block;
width: 100%;
height: 100%;
margin: auto;
overflow:hidden;
}
.row {
overflow:hidden;
width:100%;
height:25%;
}
.col-lg-12 {
float: left;
width: 10%;
height: 350px; -> height in pixels, not in percent
clear: both;
}
Does defining the height of a parent container work? (Using vh units to define its height, as illustrated below, should make it responsive.)
It's hard to tell from this snippet but in your full code, do you define the height of an element that contains the .container div? If not, the 90% that you've set as .container's height won't work, because there won't be a defined context for exactly what you're using to create your height: 90%.
If you add the height to your parent element -- and you can see this in play in this example on Codepen: https://codepen.io/msummers40/pen/EobqOo -- things take on more definition/greater heights. On that Codepen page, I just added a new parent element and a corresponding CSS selector:
.container-of-container {
height: 100vh;
width: 100%;
}
With the .container-of-container div's height set to 100vh, .container's height becomes 90% of that. In turn, your two rows are each 25% of .container's height.
In any case, if you set the height (using px, em, vh etc) of the parent element of .container, you should see the resizing take place more as you're expecting.
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.
I have a div structure like this,
<div style="height:100%">
<div style="height:50px"></div>
<div id="auto" style="height:100%"></div>
</div>
But it seems like id="auto" is taking the height as its parent height and the parent overflows. Can just set css in a way that id=auto div take the remaining height of the parent ?
What I'm trying to do is to make the id=auto div to take the rest of the space on parent div resize.
here is the jsFiddle
That's because percentage value for height property is relative to the height of box's containing block. Therefore 100% means the entire height.
10.5 Content height: the 'height' property
Specifies a percentage height. The percentage is calculated with
respect to the height of the generated box's containing block. If the
height of the containing block is not specified explicitly (i.e., it
depends on content height), and this element is not absolutely
positioned, the value computes to 'auto'. A percentage height on the
root element is relative to the initial containing block.
One solution would be using a negative margin for the second <div> element to remove the srcollbar and then adding position: relative; to the first one to bring it back on the top of the second one.
In this case we should use padding on top of the second div to push its content down and also adding box-sizing: border-box in order to calculate the height of the box including padding borders:
Example Here
<div class="parent">
<div class="top"></div>
<div class="content"></div>
</div>
.parent { height:100%; }
.top {
height: 100px;
position: relative;
}
.content {
background-color: gold;
min-height: 100%;
margin-top: -100px; /* equals to the height of .top element */
padding-top: 100px; /* equals to the height of .top element */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
It's worth noting that this approach would work on IE8+.
Nowadays all major web browsers support box-sizing: border-box, however you use a spacer element instead of padding+box-sizing to push the content of .content down:
Example Here.
<div class="content">
<div class="spacer"></div>
<!-- content goes here -->.
</div>
.spacer, .top {
height: 100px;
}
This approach would work on IE 6/7+(*)
Alternatively, you could nest the .top element within the .content and drop the .parent in order to achieve the same result which is working on IE 6/7+(*).
Example Here.
<div class="content">
<div class="top"></div>
<div class="inner">
<!-- content goes here -->
</div>
</div>
(*) IE6+ by using height property, IE7+ by using min-height.
If you don't need to support IE8 or IE9, use CSS calc (http://caniuse.com/calc)
<div style="height:100%">
<div style="height:50px"></div>
<div id="auto" style="height:calc(100%-50px);"></div>
</div>
If you do need to support the older IE's, then I would suggest using display:table, display:table-cell, and display:table-row. There are a lot of little quirks to keep in mind when using the table displays, so stick with calc if possible.
You can achieve the desired result, if you can absolutely position the first child div (the one that is 100 pixels tall):
Demo: http://jsfiddle.net/rn2Xe/2/
<div style="height:100%; padding-top:100px; box-sizing: border-box; position: relative;">
<div style="height:100px; position: absolute; top: 0; width: 100%; box-sizing: border-box;"></div>
<div style="height:100%;"></div>
</div>
Note: Use classes for CSS. Your code could be much cleaner.
You might be able to solve this with css calc, but if you want good legacy support, use tables.
I have 2 div inside a fixed-width container.
div1 has a dynamic width, with a maximum of 50%. I want div2 to fill the remainder of the containers width.
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
Here's an example on jsfiddle.
Fully expanded as supposed to: http://jsfiddle.net/RuD74/
Containers background visible due to right not expanding: http://jsfiddle.net/hgpcp/1/
How can I achieve this?
Updated JFiddle: http://jsfiddle.net/d5U96/2/
I see what you are trying to do. Instead, set the second div to have:
#right {
overflow: hidden;
height: 100%;
background-color: blue;
}
By doing this, it takes up all available width that's left except for the space occupied by the first floated div. Hopefully this does what you need.
A other thing that you can use it that you set the minimum width of your red/left box to 50%. This depends on what you would like to do with it.
#left {
float: left;
min-width: 50%;
max-width: 50%;
height: 100%;
background-color: red;
With this your div1 gets the minumum width of the helf of your block.
The only negative thing about this is, that you can't make it smaller in time, if you'd like.