I have set the height of the div's parent element, body, to 100% and the div is still not 100% high. I have checked the code it looks right and I am not high.
Please help
http://codepen.io/anon/pen/FhpIf
But you forgot about the <html> element: http://codepen.io/anon/pen/KFmJv
ALL of the parents need to be set to 100% height in order to get 100% height working on an element, even the HTML element
Related
I know it's possible to setup the block width 100% and it will extend the screen horizontally, as in the snippet code below. But, why doesn't it work for the height?
.block1{
width:100%;
float:left;
background-color:yellow;
}
The above block goes into the container, which was used overflow:hidden; but it didn't help. Is there a way to setup the block height to 100%?
From the spec of height:
<percentage> 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'.
If not, the height of an element with height: 100% would depend on its parent's height, and if its parent's height depends on content's height (height: auto), it would be a circular definition.
First of all, it is not 100% of the screen width, it's 100% of the parent element's width (which, in your case, is probably the same width as the screen).
You cannot do height: 100% because the browser doesn't know how high the parent element is. It's impossible to calculate, so it ends up being ignored by the browser.
You need to use javascript to find out how tall the screen is.
I know that min-height: 100% will only work to take up a minimum of 100% of its parent element's height if the parent element has some numeric value for height, but what if I have a few nested divs and I want them all to have a min-height of 100%? I tried min-height:inherit but that didn't work either? I know I can probably solve this problem with JavaScript by simply checking the browser height value on document load and then assigning that to the min-height property of my nested divs, but I'd like to know if it would be possible to solve this with just css?
Edit: I should also mention that I need my outer most div and my nested divs all to have a min-height of 100% such that they take up at least the height of the browser, but expand if needed.
min-height: inherit; should work: http://jsfiddle.net/ugxbs/
EDIT
As for percentage values and the expected behavior, there is no logic behind nested min-height. What you should do is to use the height property for all parents, then add min-height to the inner most DIV.
F.ex:
<html>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
CSS:
html, body, .outer { height: 100% }
.inner { min-height: 100%; }
http://jsfiddle.net/4PsdT/
This way, you are telling the browser to set all outer elements from the top (HTML) to a height of 100%. This will make these elements stretch across the browser height. Then just add a min-height to the inner most element that contains the content.
Setting a height doesn’t mean that it’s children’s excessive content will fall out, unless you add overflow:hidden;.
I can make it work with the property height but not min-height.
http://jsfiddle.net/zDVqm/
This is my first attempt at anything with the <header>,<footer> elements in HTML5. Usually in XHTML I would have the div that was the footer inside of the container <div> and the center would expand all the way down with clear:both.
I am trying a 100% width template here and I am not getting the center area at 100% height. Can you guys see anything wrong with this?
The code is at: http://www.designinipad.com/html5test.html
or at:
https://gist.github.com/1524774
Thanks!
Whatever you did using the div element in the past will work identically using the header and footer elements. Like the div, these are just container elements and behave the same way.
If you set the height of container, body and html to be 100%, it should work:
body, html {
height: 100%;
}
This question should be helpful: Make div 100% height of browser window
My only concern is that assigning a height to < html > and < body > does not seem to be standards compliant.
Could you work around it? Perhaps assign a min-height to the < div > with id container around 700px to push it down?
#container {
min-height: 700px;
}
i know what is absolute & relative position but some points are still not cleared to me.
for reference
css:
.rel{
position:relative;
background:red;
}
.abs{
position:absolute;
background:blue;
}
html:
<div class="rel">rel</div>
<div class="abs">abs</div>
now points are :
relative div takes 100% width automatically but absolute div only takes content width. why?
when i give height 100% there is no effect in the relative div but absolute div takes 100% height. why?
when i give margin-top:30px it's shift absolute div also but when i give top:30px then only relative div shift. why?
when i don't give top:0 , left:0 to the absolute div it's takes above div height. why?
Setting position:absolute removes the element in question from the normal flow of the document structure. So unless you explicitly set a width it won't know how wide to be. you can explicitly set width:100% if that is the effect you're after.
An element with position:relative on the whole behaves in the same way a normal position:static element does. Therefore, setting height:100% will have no effect unless the parent element has a defined height. In contrast absolute positioned elements are removed from the document flow so are free to adjust to whatever height their containing element currently has.
This is probably something to do with the parent elements in your HTML but I can't help further unless you provide the full HTML and CSS of your page.
The default value of the top and left properties is auto. This means the browser will calculate these settings for you and set them to where the element would be rendered if it didn't have position:absolute.
I want to make a div 100% height, so basically the full screen.
This, so that the background streches over the whole page.
I don't want to add the background to the body, since i want it so that if i comment out the wrapper, the page is full width. (which works by the way)
So basically my question is: how can i make the wrapper-bg div 100% high.
Hope you guys can help me.
Make the body height 100% because div width or height will apply only if the parent been set to a certain value
for example if the body 100% the div height 100% will work cause the parent been determined
Try this, should work as you have to make all parent elements 100%.
html, body {height: 100%}
.yourdiv {height: 100%}
Try with .wrapper-bg {position:fixed; top: 0px; bottom:0px}
html,body{height: 100%}
Make sure that your parent element has height 100% and it should be positioned as relative.
Try making it absolute. Your child div strech to parent height.