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.
Related
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>
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 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 an outer div with a fixed with (and scroll bar horizontally). Within this outer div I have two divs under each other: one is set to be bigger than the outer div (thus activating the outer div its scroll bar), and one is set to be 100%.
The second inner div (the 100% width), is only as wide as the outer div is visible. If you scroll to the left, the div stops and is very much not 100% of the outer div.
.parent{
white-space:nowrap;
overflow:scroll;
width:200px;
}
.holder {
width: 500px;
background: url(http://www.w3schools.com/cssref/paper.gif); }
.holder1 {
width: inherit;
background: blue; }
.holder> div{
display:inline-block;
white-space:normal;
background:red;
}
<div class="parent">
<div class="holder">
<div>1</div>
</div>
<br>
<div class="holder1">
<div>1</div>
</div>
<br>
</div>
I have an JSfiddle: http://jsfiddle.net/EUtLh/16/
to make it more clear. Is there any way I can get the second div to be as wide as the first div, without giving it a fixed width? The first div is made dynamically and it's width determines the width of the outer div.
Thanks in advance!
Wrap the two holder divs in a "wrapper" div whose width is determined dynamicly (as holder was before). Change the holder widths to 100% and they will be as wide as the "containing" div's width.
<div class="parent">
*<div class="wrapper">*
<div class="holder">
<div>1</div>
</div><br>
<div class="holder1">
<div>1</div>
</div>
*</div>*
</div>
CSS:
.wrapper {
width:500px;
}
.holder {
width: 100%;
background: url(http://www.w3schools.com/cssref/paper.gif);
}
.holder1 {
width: 100%;
background: blue;
}
http://jsfiddle.net/EUtLh/29/
hope this helps
It seems that you want to use the javascript (give a try with Jquery)
$('.holder1').width($('.holder').width());
this might help I guess
Giving your divs one common class and two seperate id's is one solution:
<div class="parent">
<div class="holderClass" id="holder">
<div>1</div>
</div><br>
<div class="holderClass" id="holder1">
<div>2</div>
</div>
</div>
With CSS:
.parent{
white-space:nowrap;
overflow:scroll;
width:200px;
}
.holderClass {
width: 500px;
}
#holder{
background: url(http://www.w3schools.com/cssref/paper.gif);
}
#holder1 {
background: blue;
}
I have a parent div with a variable number of equally sized child divs floated left. I want the parent div to expand to the width of the children no matter what, even if it means overflowing its own container.
Is there a way to do this naturally with HTML/CSS?
Example (The stretchable div would wind up being 180px wide):
HTML:
<div id="stretchable-div">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
...
</div
CSS:
.child {
width: 60px;
height: 60px;
float:left;
}
In this example the stretchable-div element will bust out of its parent, and stretch to its children.
Live Demo
css
#parent{
width:200px;
height:180px;
background:red;
}
#stretchable-div{
background:blue;
position: absolute;
}
.child {
width: 60px;
height: 60px;
float:left;
}
Markup
<div id="parent">Im a parent
<div id="stretchable-div">
<div class="child">a</div>
<div class="child">b</div>
<div class="child">c</div>
<div class="child">c</div>
<div class="child">c</div>
<div class="child">c</div>
<div class="child">c</div>
</div>
</div>
Just like #Pizzicato's example, but using overflow:hidden to clear the parent div: http://jsfiddle.net/dSjv4/.
There's a great article about positioning and clearing div's on A List Apart here (near the end of the article).
you can add display: inline-block; for the parent element. To work in ie7 also you need to use display:inline;zoom:100%; instead.
So a possible css for what you need is this:
#stretchable-div {
background: none repeat scroll 0 0 red;
display: inline-block;
overflow: auto; /* clear the floats */
*display:inline; /* ie7 hack even better use conditional comment */
zoom:100%;
}
example: http://jsfiddle.net/8JJSf/