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.
Related
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
At my page i have a navigation bar to the left that is 100% height and 25% width.
It is working fine, but when there's scroll available, it destroys the background, and make it look ugly. The reason i think is that 100% height is only applied to the active window.
What is the trick to have a div 100% height always, even if the user is scrolling?
Css of the navigation:
width:25%;
height:100%;
float:left;
color:#999999;
I have tried position:absolute with no results, also tried clear both.
Need help :)
Fiddle
Using min-height: 100% instead of height: 100% should fix it. See updated fiddle here: http://jsfiddle.net/zitrusfrisch/Sa6cb/3/
if you want the element to take 100% of the screen use min-height: 100vh
and if you want it to take 100% of the parent element use min-height: 100%
I would rather use:
height: 100%;
overflow: auto;
I had a similar issue when I wanted to build an opaque overlay on top of a webpage. The overlay only covered the height of the browser window, not the total scrolling height of the page. I turned to Javascript to dynamically get the page height.
$('body').append('<div style="width:100%;height:'+document.documentElement.scrollHeight+'px;background:#000000;opacity:0.5;position: absolute;top: 0;z-index: 1000;"></div>')
This is such a simple (and a little stupid) question, but I can’t find a good answer.
How can I make a TABLE element stretch to 100% height of it’s parent container that has a min-height? Consider this:
<div>
<table><tr><td></td></tr></table>
</div>
And the CSS:
div { min-height:400px; background:yellow }
table { background:pink; height:100% }
Fiddle: http://jsfiddle.net/faynV/
I’m not really used to working with tables, so any help is appreciated...
Is this what you want ?
div{min-height:400px;height:400px;background:yellow}
table{background:pink;height:100%;width:100%;}
http://jsfiddle.net/faynV/1/
Set html and body tag's height to 100% and then the outer container height. i.e.
body,html{height:100%;}
div{min-height:400px;height:100%;background:yellow}
table{background:pink;height:100%;}
however you need to set the height of the div same as min-height, if you are specific to fixed height. check here
I have two containers (main-container and sub-container). Body, HTML and main-container have classes of 100% height whereas sub-container fixed in 1000px. Main-container should be fit with 100% height in the whole screen even sub-container is small or large. Now problem is, main-container is not increasing its height according to sub-container height. Please check the example below to understand my requirement.
http://jsfiddle.net/awaises/dLeHL/
Really appreciate your help.
Thanks
change height:100%; to min-height:100%; in .main-container: http://jsfiddle.net/dLeHL/3/
EDIT:
Percentage heights rules are explained here:
Percentage Heights If the height of an element is set to a percentage,
it needs for its parent element to have a set height. In other words,
the height of the parent element can't be set to auto. Like many
aspects of CSS, this is a bit confusing at first.
Is this what you're trying to achieve?
I change the width of the .sub-container in order to be in % like the .main-container.
CSS markup:
html, body {
height:100%
}
.main-container {
height:100%;
background:red;
}
.sub-container {
height:100%;
width:75%;
margin:0 auto;
background:blue;
}
Hope it helps!
You don't need to set the height for the .main-container (by default it will expand to the size of the child container). By setting the height to 100% you are forcing it to be the height of the screen and no more. So just change it to:
.main-container { background:red; }
If you need the main container to always be at least the height of the screen, use #Helstein's suggestion of setting the min-height to 100% while removing the height setting.
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;
}