How do I get a wrapper div that is 100% height to expand its with the height of its children? That are also 100% in height.
The setup looks like this:
<div id="wrapper" style="height:100%">
<div class="child" style="height:100%">div1</div>
<div class="child" style="height:100%">div2</div>
</div>
But the wrapper dosen't expand to 200% height. I have tried making the wrapper min-height:100%; but then the children don't inherit the full height, only the height of their own content.
https://jsfiddle.net/on78pof8/
(The aqua colored box, dosen't expand)
Please tell me if I didn't understand the question correctly.
I think you have forgotten to add width:100%; to the child divs.
To remove the extra scroll bar on the html/body, you can remove the default margin/padding of html and body by using this declaration:
html,body{
margin:0;
padding:0;
}
Here is what I believe you have in mind:
html,
body {
height: 100%;
margin:0;
padding:0;
}
#wrapper {
background: aqua;
height: 100%;
overflow: auto;
}
.child {
height: 100%;
width: 100%;
}
<div id="wrapper">
<div class="child">div1</div>
<div class="child">div2</div>
</div>
Set height in viewport units on the child divs
.child {
height:100vh;
}
Demo (with viewport units)
(NB: The OP is actually interested in background image on the wrapper instead of the solid aqua color)
html,
body {
height: 100%;
}
#wrapper {
background: aqua;
}
.child {
height: 100vh;
}
<div id="wrapper">
<div class="child">div1</div>
<div class="child">div2</div>
</div>
If you don't want to use viewport units (which by the way - as #CoadToad pointed out in the comments - has very good support) - then I think you'll have to use javascript.
Demo (with javascript)
If you want a dynamic number for the height of the child divs, depending on your needs, you can set these from the view-port height (vw) but this assumes you want them each to be the full height of the entire document.
You need to set overflow-y: auto on the parent for this to work. Here:
html,body {
height:100%;
margin: 0;
}
#wrapper {
background:aqua;
height:100%;
overflow-y: auto;
}
.child {
height:100%;
}
<div id="wrapper">
<div class="child">div1</div>
<div class="child">div2</div>
</div>
Related
I have a div container in my html page and i want set its height to expand all remaining page in the screen..
How can i do that ??
That's my code :
HTML
<div class="row">
<div id="builder-container" class="col-xs-12 col-lg-9">
<div id="builder-content" > </div>
</div>
</div>
CSS
#builder-container {
background-color: #ccc;
height: 100%;
}
You have to give all of the parent elements, including the div you want to extend, a height of 100%.
Actually it would not get cover your whole page without enough content, but the best way is to give it 'position:absolute/fixed/relative' and give the same div top:whateveryouwant px; and bottom: 0px/0%; width and height :100%
JSFiddle - Edited: Check it now
CSS
body
{
margin:0;
width:100%;
height:100%;
}
#builder-container {
display:block;
position:absolute;
margin-top:5%;
left:0%;
bottom:0%;
background-color: #ccc;
height: 100%;
width:100%;
}
html
<div class="row full_height">
<h1>Test elem</h1>
</div>
css
.full_height {
height: 100vh
}
I can't set a height (in %) to a div (class="item") whose parent (class="site-section") has a min-height: 100%.
This is my HTML:
<div class="spacer"></div>
<header class="site-header"></header>
<div class="spacer"></div>
<div class="spacer"></div>
<section class="site-section">
<div class="column">
<div>I would like to be able to set an later
change the height of this green item.
<div class="item">ITEM</div>
</div>
</section>
<div class="spacer"></div>
<div class="spacer"></div>
<footer class="site-footer"></footer>
<div class="spacer"></div>
This is my CSS:
html, body {
height:100%;
margin 0;
color:blue;
}
.spacer {
height:1%;
}
.site-header {
height:8%;
background-color:yellow;
}
.site-section {
min-height:78%;
background-color:#ffcccc;
color:#aaa;
}
.site-footer {
height:8%;
background-color:yellow;
}
.column {
width: 50%;
}
.item {
height: 40%;
background-color: #33cc33;}
Here is the DEMO.
Everything was working fine until I added DOCTYPE to my HTML. There was no need to set height (in %) for html, body and .site-section, so .item was having his height: 20%. Now, because of DOCTYPE I need to set height for html, body, and .site-section. The consequence is that .item does not react to height: 20% anymore.
Any idea how to solve this?
P.S. I've based my demo on Bart's demo in this question.
#CBroe is correct in that you can't really get a height percent unless the parent itself has a height (ex. height: 35px). I would recommend setting the height of the div, then your inside divs can be set to percentages.
But I played a tiny bit with your fiddle and didn't know if adding position: absolute to the your class item CSS is sort of what you're looking for? So your CSS would look something like this:
.item {
position: absolute;
height: 40%;
background-color: #33cc33;
}
Here is the demo modified to show the example.
NOTE: Even though the height is flexible, if you set the height to 100% it will go above the rest of the divs.
.item{
position:absolute;
height:40%;
background:#33cc33;
}
.items {
position:relative;
height:100%;
background:inherit;}
HTML
<div class="item">
<div class='items'>
ITEM Try
</div>
</div>
Try :)
I want a div that is the same height as the browser window, and another div below that sits below this div.
All of my attempts fail to stack the divs and overlap them instead.
a naive implementation of what my project is attempting.
Here's my fiddle
<div class="main">
<div class="top">
<p>one</p>
</div>
<div class="bottom">
<p>two</p>
</div>
</div>
so the green is the whole page, the red sizes with the window and the yellow is placed under the red... you can scroll the page to see the yellow.
As long as the top div fills 100%, the other should fall in place below.
Here's an updated version of your fiddle.
I removed the fixed positioning and set body and html to 100% height.
html, body {height:100%;}
div {border:1px solid #CCC;}
.main { width:350px; height:100%; padding:5px; }
.top { height:100%; }
.bottom { margin-top:10px; }
Your question is worded a bit confusing, but I gave what you asked for a shot...
Did you mean something kind of like this?
http://jsfiddle.net/ryanhagz/S4STr/33/
If this isn't or it's incorrect, forgive me as I'm still learning myself...
Is this what you're looking for?
FIDDLE
<div class="top"></div>
<div class="bottom"></div>
CSS
html,body, .top
{
height: 100%;
}
.top
{
background: red;
width: 100%;
}
.bottom
{
background: yellow;
height: 100px;
width: 100%;
}
I have a HTML like this:
<div class="container">
<div class="banner"></div>
<div class="left"></div>
<div class="right">
<div class="content"></div>
</div>
</div>
These divs are auto resize base on its content with overflow: auto. Now I'm facing a problem. When div:content overflow its parent, div: right and div: container will resize to fit with div:content height. But div: left height stay unchange. How to make div: left height auto resize to fit div: container when its height change?
Here a jsfiddle: http://jsfiddle.net/trongcuong1710/cDqSj/2/
You can try this:
.left {
width: 200px;
overflow: auto;
background-color: blue;
position:absolute;
top:140px;
left:0;
bottom:0;
}
.right {
width: 300px;
min-height: 260px;
overflow: auto;
background-color: green;
margin-left:200px;
}
demonstration
Hope I understood the question corectly - now works fine, if you try changing content height.
I have a div inside another div and I wonder why the inner div's height isn't the same as its parent? I set the height of the parent div to 40px, but the child div does not seem to stretch to this height. Am I wrong about the height of divs?
Making it simple
<div id="first" style="height:40px"><div id="second"></div></div>
A div will only be as tall as the content within it (see this example). To extend a child div to the height of its parent, add height: 100% to the child.
HTML:
<div id="first">
<div id="second"></div>
</div>
CSS:
#first {
height: 40px;
}
#second {
height: 100%;;
}
JS Fiddle Example
If you want to ensure that child div element is the same height as the parent element you should use min-height.
<style type="text/css">
div.main
{
width:auto;
height:500px;
}
div.content
{
width: 100%;
min-height:90%;
border:2px solid FF0000;
}
</style>
in the body
<div class="main">
<div class="content">
<stuff here>
</div>
</div>
The attribute height alone is not always recognized in IE which is why I like to use min-height.