When I try to set height: 100% on a child div, the height stays 0.
This is the parent div:
#game-content {
margin-top: 50px;
overflow: auto;
height: 100%;
width: 100%;
}
#game-wrapper {
float: left;
margin-left: 90px;
position: relative;
height: 100%;
}
<div id="game-content">
<div id="game-wrapper">
<div class="game">
<img class="game-element" src="http://placehold.it/200x200" />
<div class="game-element" id="description">
<h4 id="game-header">Game1</h4>
Desc
</div>
</div>
</div>
</div>
The height of game-content is also 100% (it's not 0). Although the height of game-wrapper stays 0, while the width does work. What am I doing wrong?
the #game-content or its parent(body) must have a fixed height, if try setting a fixed height in #game-content the #game-wrapper will have its 100% height.
Try out:
#game-content
{
margin-top:50px;
overflow:auto;
height:1000px;
width:100%;
}
#game-wrapper
{
float:left;
margin-left:90px;
position:relative;
height:100%;
}
or
body, html { /* both to be sized */
height: 1000px; /* or 100% */
}
A block element gets it height according to the content it has. Since you are giving a percentage height to the parent #game-content which does not have a well defined child content height (you are giving the child too in pixels), it is creating this problem. Giving a specific height to the parent solves the problem.
#game-content
{
margin-top:50px;
overflow:auto;
height:someheight px;
width:100%;
}
#game-wrapper
{
float:left;
margin-left:90px;
position:relative;
height:100%;
}
what i am looking at is a common issue with floating elements. a element that is floated does not affect its parents as one would expect. simply floating the parent element, in this case #game-content will do the trick.
#game-content
{
float:left; /* just need this one line */
margin-top:50px;
overflow:auto;
height:100%;
width:100%;
}
Related
I am trying to force a child DIV to 100% height within a parent DIV.
The parent div contains an image at z-index:1
The child div is z-index: 9999
I can;t get the child DIV to force 100% height.
#protect_wrap { width: 100%;
float: left;
background: #FFFFFF;
margin-top:0px;
text-align: center;
height: 100%;}
#protect_wrap img { z-index:1;}
#protect_col1 { width:200px;
margin: 0 auto;
background: yellow;
z-index:999;
position:relative;
min-height: 100%;}
img.responsive-fill { width: 100%;
float: left;
height: auto;}
<div id="protect_wrap">
<img src="img/protect.jpg" class="responsive-fill">
<div id="protect_col1"></div>
</div>
You can change #protect_col1 position to absolute and set it parent #protect_wrap to relative, the child will follow the parent height & width.
min-height is different from height. You can only min-height: 100% if the parent has some value in min-height. Can you use height for the child div?
Can you have this have these changes?
#protect_wrap {
position:relative;
.......
}
#protect_col1 {
..........
position:absolute;
}
I am trying to arrange 3 divs side by using float:left, there is fixed height for two div's child1 and child3, but there is no height for child2, i need the child2 div height as the same height of the container div.
<div id="container">
<div id="child1">Child1</div>
<div id="child2">Child2</div>
<div id="child3">Child3</div>
<div>
#container
{
margin-left: 3px;
padding: 10px 0px;
position: relative;
display: block;
width: 500px;
background:yellow;
overflow:hidden;
}
#child1
{
float:left;
width:100px;
height:300px;
background:green;
}
#child2
{
float:left;
width:100px;
height:auto;
background:cyan;
}
#child3
{
float:left;
width:100px;
height:400px;
background:red;
}
here is the fiddle: http://jsfiddle.net/2ksxL/2/
You can change the #container {display: flex;}, but that does not have awesome support in IE (http://caniuse.com/flexbox). If you need more support you will have to come up with a jQuery solution that can find the height of the container and give it to #child2.
Since you haven't define any height for container, the container height is going to depend on the max height that's been defined to the #childX. In this case, #child3. So what you can do is compare the height of both #chidl1 and #child3 and set the height of #child2 to the max one via this little jQuery.
var highestCol = Math.max($('#child1').height(),$('#child3').height());
$('#child2').height(highestCol);
FIDDLE
I want to split up the view in four parts. A header at the top, using full page width and fixed height.
The remaining page is split up in two blocks of the same height, the upper of them contains two same-sized blocks next to each other.
What I tried is (without the header):
#wrap {
width: 100%;
height: 100%;
}
#block12 {
width: 100%;
max-height: 49%;
}
#block1,
#block2 {
width: 50%;
height: 100%;
float: left;
overflow-y: scroll;
}
#block3 {
width: 100%;
height: 49%;
overflow: auto;
/*background: blue;*/
}
.clear {
clear: both;
}
<div id="wrap">
<div id="block12">
<div id="block1"></div>
<div id="block2"></div>
<div class="clear"></div>
</div>
<div id="block3"></div>
</div>
Apparently, using a percentage value for the height won't work that way. Why is that so?
add this to you CSS:
html, body
{
height: 100%;
}
working Fiddle
when you say to wrap to be 100%, 100% of what? of its parent (body), so his parent has to have some height.
and the same goes for body, his parent his html. html parent his the viewport..
so, by setting them both to 100%, wrap can also have a percentage height.
also:
the elements have some default padding/margin, that causes them to span a little more then the height you applied to them. (causing a scroll bar)
you can use
*
{
padding: 0;
margin: 0;
}
to disable that.
Look at That Fiddle
When you set a percentage height on an element who's parent elements don't have heights set, the parent elements have a default
height: auto;
You are asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing with the height of child elements.
Besides using a JavaScript solution you could use this deadly easy table method:
#parent3 {
display: table;
width: 100%;
}
#parent3 .between {
display: table-row;
}
#parent3 .child {
display: table-cell;
}
Preview on http://jsbin.com/IkEqAfi/1
Example 1: Not working
Example 2: Fix height
Example 3: Table method
But: Bare in mind, that the table method only works properly in all modern Browsers and the Internet Explorer 8 and higher. As Fallback you could use JavaScript.
add this to your css:
html, body{height: 100%}
and change the max-height of #block12 to height
Explanation:
Basically #wrap was 100% height (relative measure) but when you use relative measures it looks for its parent element's measure, and it's normally undefined because it's also relative. The only element(s) being able to use a relative heights are body and or html themselves depending on the browser, the rest of the elements need a parent element with absolute height.
But be careful, it's tricky playing around with relative heights, you have to calculate properly your header's height so you can substract it from the other element's percentages.
Percentage in width works but percentage in height will not work unless you specify a specific height for any parent in the dependent loop...
See this :
percentage in height doesn’t work?
The div take the height of its parent, but since it has no content (expecpt for your divs) it will only be as height as its content.
You need to set the height of the body and html:
HTML:
<div class="block12">
<div class="block1">1</div>
<div class="block2">2</div>
</div>
<div class="block3">3</div>
CSS:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.block12 {
width: 100%;
height: 50%;
background: yellow;
overflow: auto;
}
.block1, .block2 {
width: 50%;
height: 100%;
display: inline-block;
margin-right: -4px;
background: lightgreen;
}
.block2 { background: lightgray }
.block3 {
width: 100%;
height: 50%;
background: lightblue;
}
And a JSFiddle
Basically, the problem lies in block12. for the block1/2 to take up the total height of the block12, it must have a defined height. This stack overflow post explains that in really good detail.
So setting a defined height for block12 will allow you to set a proper height. I have created an example on JSfiddle that will show you the the blocks can be floated next to one another if the block12 div is set to a standard height through out the page.
Here is an example including a header and block3 div with some content in for examples.
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:20%;
}
#block12{
position:absolute;
top:20%;
width:100%;
left:0;
height:40%;
}
#block1,#block2{
float:left;
overflow-y: scroll;
text-align:center;
color:red;
width:50%;
height:100%;
}
#clear{clear:both;}
#block3{
position:absolute;
bottom:0;
color:blue;
height:40%;
}
I am trying to create a webpage layout with a header/footer (100% width, 145px height), a 'main area' between the header/footer (100% width, dynamic height), and a container around the content that is a unique background color (860px width, dynamic height but is always 'flush' against the footer).
(See Example for a visual)
The problem I am having is I can't seem to have the 'content container' always be flush with the footer when there is minimal content. Using a setup like the (original example) results in the footer floating over the content if there is a respectable/'normal' amount of content or if the window is resized.
And the Following CSS results in a gap between the content and the footer.
html,body{
margin:0;
padding:0;
height:100%;
background:yellow;
}
.wrap{
min-height:100%;
position:relative;
}
header{
background:blue;
padding:10px;
}
#content{
height:100%;
width: 400px;
margin:0 auto;
background:orange;
padding:30px;
}
footer{
background:blue;
position:absolute;
bottom:0;
width:100%;
height:60px;
}
How can I make the content container be the full height of the screen when content is minimal and have the footer 'stick' to the bottom of the page, while also being dynamic to resize appropriately if there is a normal amount of content (footer is always at the bottom of the content)?
Thank you!
FIDDLE: http://jsfiddle.net/3R6TZ/2/
Fiddle Output: http://fiddle.jshell.net/3R6TZ/2/show/
CSS
html, body {
height: 100%;
margin:0;
}
body {
background:yellow;
}
#wrapper {
position: relative;
min-height: 100%;
vertical-align:bottom;
margin:0 auto;
height:100%;
}
#header {
width: 100%;
height: 150px;
background:blue;
position:absolute;
left:0;
top:0;
}
#content {
background:pink;
width:400px;
margin:0 auto -30px;
min-height:100%;
height:auto !important;
height:100%;
}
#content-spacer-top {
height:150px;
}
#content-spacer-bottom {
height:30px;
}
#divFooter {
width:100%;
height: 30px;
background:blue;
}
HTML
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div id="content-spacer-top"></div>
<div id="content-inner">
**Content Goes Here**
</div>
<div id="content-spacer-bottom"></div>
</div>
<div id="divFooter">Footer</div>
</div>
UPDATE
The #content-spacer-top and #content-spacer-bottom are used to pad the #content div without using padding or margin that would increase the box size past the 100% height causing problems.
In CSS3, there is the box-sizing property (more info here) that can fix this issue, but i'm assuming you don't want to depend on CSS3 features.
EDIT
Added a fix and tested down to IE7
UPDATE 2
Alternate method using :before and :after pseudo-elements instead of the spacer divs:
http://jsfiddle.net/gBr58/1/
Doesn't work in IE7 or 6 though, and to work in IE8, a <!DOCTYPE> must be declared (according to w3schools.com), but the HTML is nice and clean
UPDATE 3 (Sorry for so many updates)
Updated it to work down to IE6. I don't normally bother as my company doesn't support IE6, but it was an easy fix...
I think you need position: fixed on the footer:
footer {
width: 100%;
height: 30px;
position:fixed;
bottom:0;
}
Could anybody write the CSS fragment to do this?
<div class="container">
<span class="left">Left</span><span class="right">Right</span>
</div>
Here's the CSS for .container:
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
}
Notice the position is absolute because it is "absolute positionated" on its containing element.
I've alredy tried float:left/float:right on the two nested elements but nothing happens.
Set the elements to block, set a width and float them.
.left{
display: block;
float:left;
width: 100px;
}
.right{
display: block;
float:right;
width: 100px;
}
Example: http://jsfiddle.net/LML2e/
float: left and float: right will work perfectly when you set a (relative or absolute) width for your .container div
Demo
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
width: 200px; //either absolute width
width: 100%; // or relative width
}
Side note: If you set the .container to width: 100% you will get ugly scroll bars due to the margin. Just use the margin in the .left and .right classes. See here.
You need to set a width in order to use float. If you want a width of 100% you can set .container { width: 100%; } or improve your code into something like:
.container {
position:absolute;
bottom:5px;
left:5px;
right:5px;
}