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;
}
Related
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/
live (work in progress) site
Basically, I have all of my site's content centered within a div that is a specified width and an intended height of 100% regardless of the actual length of the content. I've specified height:100%; for html, body, and #main however the div still comes up short as seen on this page- I don't want their to be any gap between the #main's grey box and the bottom of the screen. Is this possible? How?
see this jsfiddle
html, body {height: 100%;}
.container {min-height: 100%;}
discussing this over here too.....
proper css to ensure that the body element fills the entire screen
You can set position:absolute, and that should stretch it to the bottom. Seems as if that will work fine in Opera and Chrome at least.
That will, however, be in conflict with the video player below, and also push your copyright notice down below the page. Maybe you can move the notice up into the gray box though?
You can achieve by 2 ways:
1) Give Height to 100% if you don't know how long page could be.
html, body {
height: 100%;
}
.yourContainerClass {
min-height: 100%;
}
2) If you know how much you need to stretch vertically then you can use height in "vh(vertical height)".
.yourContainerClass{
height:80vh;
}
I hope it will help you. Thank you!
I'm trying to have a background image repeat x and y to the bottom of the page.
The background image pattern div is
#pattern {
height: 3000px;
width: 1000px;
background:url(../images/patterns/pattern1.jpg) repeat;
}
In the html, it resides inside
#wrapper {
position: relative;
width: 1000px;
margin: 0 auto;
text-align: left;
}
The height on #pattern is set to 3000px just so it will show up, otherwise the image will not appear.
I have tried various things such as:
height: 100%;
min-height: 100%;
overflow: hidden;
overflow: auto;
I would like the background image to repeat to the bottom of #wrapper, to the bottom of the page.
Webpage is here:
Thanks so much.
You've set a fixed height on the wrapper, so it'll stop at 3000px, regardless of how much content is in there. Try a min-height instead. That'll keep it at a minimum size so it's visible,but allows it to grow to fit the content in it.
Try giving the #pattern a position:fixed; so it doesn't matter how much content you have to scroll, it won't scroll itself.
Side note: repeat is the default property for background image so no need to declare.
Your HTML is wrong. The #pattern div should contain the rest of the page. You want it to grow with the contents.
Your interior divs are all absolutely positioned, making it impossible for them to influence the height of the container #wrapper, which is where you'd want to put your background image code.
Also, I'm not sure if this is intentional, but #pattern doesn't wrap any of your content, so it's height has to be manually set, since it has no children.
There are two approaches you can take. Use Javascript to determine the combined height of your absolutely positioned divs and set the height of the pattern to that number.
Or, you can use float to arrange your columns, and put a at the end to force the parent container to be that tall.
The div tag containing the #pattern style should start on the first line after the body tag and close at the end of the page just before the close of the body tag.
BTW, remove the height and width attributes or set it to 100% so that it repeats throughout the page.
On a customer website, I have to add a background image for only a contained region of the page (its real content part).
The problem is, if the content is short enough, then the image will be clipped. How would be possible to have the image completely visible? I have tried to add the "overflow" CSS attribute but unfortunately it did not help me.
Here is an example of the website I have to work on: http://www.sfp-pensioen.nl/werknemer/welkom The background image is on the div element with id="content".
On the specific link that I am sending it is not an issue because the content is long enough, but if you remove elements using firebug then the problem will become obvious.
ps: IE6 must be supported.
Following on from Graham's answer:
"height" in ie6 acts like "min-height" across other browsers.
min-height: 50px;
_height: 50px;
The example above will provide a cross browser minimum height of 50px. ie6 will read "_height" where other browsers will not. If you don't hacks, use a conditional statement.
Rich
you could either give a height to the id #content
or
apply the background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent; to #mainContent instead of #content
overflow for background-images is impossible, but you could set a min-height for content (or set the image in another div with lower z-index and position it abolutely to appear at the place you want - but thats a very bad solution)
The overflow attribute controls what happens to the div when the content is too big to fit - if you have a fixed-size div with some content that might overflow, you generally want the auto option. overflow has no effect on a background image.
For your case, it sounds like you want to specify a min-height on the content div. Note that this isn't supported by older browsers like IE6, which you may or may not care about. There are plenty of ways to work around this, though.
What you want is the 100% height you can achieve this with the following.
html {
height: 100%;
}
body {
height: 100%;
}
#content {
height: 100%;
}
You need the min-height and the body needs a height so every child element of the body will follow the rule.
Also by adding min-height: 100%; to all css rules will solve all your problems for any grade A browser.
If you know the #sidebar or #main will always have a visual height the same or larger than the background image then you can simply add the background image to:
.sub #wrapper #mainContent {
background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll 0 150px transparent;
}
instead of where it is an the moment on #content
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.