I have a page with a variable-height header, content area, and footer. I want the content area to always fill the viewport, and grow vertically to fit content as necessary. I've found lots of examples of doing this with fixed-height headers, but none where the height is unknown.
Any solution needs to work in IE 6, 7 and 8, Firefox 3.x and Safari 4. Can this be done with pure CSS? Do I have to give in and resort to table-based layout?
EDIT:
An additional requirement is that I can place elements inside the content area and get them to expand to the full height of the content area (be it viewport height - header height - footer height or larger than that). Some of the content we want to display has "header" and "footer" sections of their own, so what I'm really looking for is a nestable solution.
Ok so the min-height CSS property doesn't work :)
I played around with an actual HTML file now and I believe I found a way.
.header-footer
{
height: 10%;
background-color: lightYellow;
display: table;
width: 100%;
}
.container
{
margin-left: auto;
margin-right: auto;
height: 80%;
width: 100%;
display: table;
}
.inner
{
background-color: lightPink;
height: 100%;
}
We use the display: table property to make sure each <div> sits nicely under and over the other ones.
NOTE: You have to set a height property for each of the elements on the page. It doesn't have to be as large as 10% that I chose, but at least something. Once the content is inserted into the element that is larger than the height value it should expand.
I've created two seperate HTML pages for you to examine to see if this suits you:
Content not larger than the viewport
Content larger than viewport
Hopefully this is what you're looking for.
Thanks
if you want the header to change size, use a relative height. The content will already fill the viewport vertically.
You can try using the min-height CSS property on the header, content and footer.
e.g.
.header-footer
{
min-height: 20%;
}
.content
{
min-height: 80%;
}
Make sure that you set both <html> and <body> tags to have a min-height: 100% that way you can fill up the entire viewport.
This should allow for the page to expand as needed but stay at a minimum of 100%.
Thanks
I spent a day experimenting with this option and hit so many odd dead-ends that my professional advice is now this:
You designed it wrong.
Skip the variable height header entirely. It's a dumb idea anyway. I did. Worked great for me. Now I am the proud owner of a significantly simpler DOM cobweb and no hurdles that lead me to stackoverflow.
Please see this fiddle: http://jsfiddle.net/qH6K3/
<div id="a">
<div id="b1">BOX1</div>
<div id="b2">BOX2</div>
</div>
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html,body{height:100%}
#b1 {
background-color: red;
height: 45px;
width:100%;
}
#b2 {
background: blue;
height: 100%;
width: 100%;
}
#a { height: 100%; padding-bottom: 45px; }
Please try this for CSS: http://jsfiddle.net/K64Mm/6/
Variable height, content 100% height (supports even iframe 100% height), no superfluous scrollbars, scrollable on touch devices.
<div class="wrapper">
<div class="top topBar">
</div>
<div class="content">
<iframe scrolling="yes" src="http://www.zeffirino.com"></iframe>
</div>
</div>
html, body { width: 100%; height: 100%; overflow: hidden; margin: 0px; padding: 0px; }
.wrapper { width: 100%; height: 100%; padding-bottom: 45px; -webkit-overflow-scrolling: touch !important; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.top { height: 45px; background-color: red; }
.content { height: 100%; width: 100%; overflow: auto !important; }
.content iframe { display: block; border: none; width: 100%; height: 100%; }
Related
I have a lot of space under the footer, and this is something that I would really like to get rid of. For some reason, this space only appears in Google Chrome and not in Firefox.
Heres an image showing it.
http://puu.sh/a6XQI/ec07f0ba31.jpg
What I would like to have happen is my content resize according to the screen size. I am not sure if I can do that because I dont have much content, just a few images.
Any suggestions would be appreciated.
Since you didn't provide any code, I would assume this has to do with the height of you page content being shorther than your window height. Many people who come from a print design background are often perplexed by the concept that a footer doesn't automatically appear at the bottom of a page. The position of dynamically sized elements depends on their content, which as you may come to find out, is very frustrating when a client wants a website built BEFORE providing any content. But I digress.
Assuming the root problem is caused by my former assumption, to achieve what is known as a sticky footer, implement the following to your existing page structions:
jsFiddle: http://jsfiddle.net/63mp6/
HTML
<div class="primary">
<div class="header">
Header Content
</div>
<div class="content">
Main body Content
</div>
<div class="footer">
Footer content
</div>
</div>
CSS
*{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html, body {
position: relative;
width: 100%;
height: 100%;
background: #eee;
}
.primary {
position: relative;
width: 80%;
height: 100%;
margin: 0 auto;
}
.header{
min-height: 100px;
min-width: 100%;
background: #aaa;
}
.content {
min-width: 100%;
min-height: 200px;
background: #fff;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-height: 100px;
background: #666;
}
What's happening here is you're resetting default styling to the parent containers, forcing them to 100% height of the window and then telling the footer position about of the default page flow to the bottom of it's parent container. Notice the position: relative; attributes on the primary and html, body definitions. Those set the tone for their child elements to be relative to them instead of the window. Without the position declarations, the child elements would position themselves to the highest element with a relative position, which would be the window itself.
I want to have a site that is 100% of the height of the browser at all times, with the width scaling with an aspect ratio when the height is changed.
I can achieve this using the new vh unit: http://jsbin.com/AmAZaDA/3 (resize browser height)
<body>
<div></div>
</body>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
div {
height: 100%;
width: 130vh;
margin: 0 auto;
background: #f0f;
}
However, I worry about fallback for IE8 and Safari, as it this unit is not supported there.
Are there any other CSS only methods of achieving this effect?
I have a solution that works also with IE8 (using Pure CSS 2.1), but not perfectly.
because I need the browser to recalculate things when he get resized, and apparently it doesn't do that unless he has to (and I cant find a way to make him think he has to), so you will have to refresh the page after resizing.
as far as I know, the only element that can scale reserving his ratio is an <img>, so we will use the <img> to our advantage.
SO, we are going to use an image with the ratio that we want (using the services of placehold.it), lets say we want a 13X10 ratio (like in your example), so we'll use <img src="http://placehold.it/13x10" />.
that image will have a fixed height of 100% the body, and now the width of the image scales with respect to the ratio. so the width of the image is 130% height of the body.
that image is enclosed within a div, and that div has inline-block display, so he takes exactly the size of his content. witch is the size you want.
we remove the image from the display by using visibility: hidden; (not display:none; because we need the image to take the space), and we create another absolute div, that will hold the actual content, that will be right above the image (100% width and 100% height of the common container).
That works perfectly when you first initiate the page, but when you resize the page, the browser doesn't always measure the right width and height again, so you'll need to refresh to make that happened.
Here is the complete HTML:
<div class="Scalable">
<img class="Scaler" src="http://placehold.it/13x10" />
<div class="Content"></div>
</div>
and this simple CSS:
html, body, .Content
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
text-align: center;
}
.Scalable
{
position: relative;
display: inline-block;
height: 100%;
}
.Scaler
{
width: auto;
height: 100%;
margin-bottom: -5px;
visibility: hidden;
}
.Content
{
position: absolute;
top: 0;
background-color: black;
}
Here's a Fiddle (don't forget to refresh after resizing)
I recommend you to copy this code to your local machine and try it there rather then within the fiddle.
In this similar SO question a CSS technique was found and explained on this blog entry that allows an element to adjust its height depending on its width. Here is a repost of the code:
HTML:
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
CSS:
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
Demo Here
If this is sufficient for you, I'd recommend this technique. However, I'm unaware if the technique can be adapted to handle scenarios where you must have an element adjust its width depending on its height.
You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the element.
CSS:
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
I want to make a div (my sidebar) stretch to the bottom of the page. I know that I need to add "height: 100%;" in order to do that.
But when I add height: 100%;, pages that have less content than the sidebar cuts the sidebar's height and then you can't see the sidebar content.
This is the index page . Everything looks exactly the way I want it to.
This is a sample page . Notice that the sidebar has been cut.
CSS:
#menu-container {
background-image: url('floral.png');
width: 300px;
display: inline-block;
vertical-align: top;
height: 100%;
overflow: hidden;
position: absolute;
}
#menu {
background-image: url('menubg.png');
width: 220px;
margin: 0;
padding-top: 50px;
padding-left: 30px;
padding-right: 20px;
color: #e8e8e8;
height: 100%;
}
#content {
padding: 0px 0px 30px 325px;
width: 1000px;
display: inline-block;
vertical-align: top;
}
Thanks in advance!
* #Ritabrata Gautam *
The changed CSS fixed my second problem but now I'm back to the cut off sidebar on shorter pages: See here: http://www.tarawilder.com/staging/?page_id=19
I'm leaving my house now, I'll be able to respond later tonight. Thanks again for your help!
#container {
display: inline-block;
height: 100%;
position: absolute;
width: 900px;
}
try this..it will give you the result you want..though there are many other mistakes in your html markup
some other areas where you need to be careful...
your container's width is 900px..which contains side menu and the large text...combined width of your side menu and the large text is far greater than your 900px width of your container..as you are not using overflow:hidden; you cant see the effect...why dont you apply overflow:auto; width:100% or something like that
BETTER CSS::
#container {
height: 100%;
width: 100%;
overflow: auto;
position: absolute;
}
ACCORDING TO YOUR NEW PROBLEM :: now your body height must be more than 100% now..thats why after 100% height your side menu becomes invisible
CHANGED CSS ::
#container {
height: auto;
overflow: hidden;
position: absolute;
width: 100%;
}
your third problem ::
strange...you are now using width:100% for your cantainer..and your container contains side menu and large text...and side menu has width of 300px and then your having width of 1000px for large text..so naturally the overflowed part ot the text gets invisible; and also remove position:absolute; from container
now your css
#container {
height: auto;
overflow: hidden;
width: 100%;
}
#content {
padding: 0px 0px 30px 325px;
vertical-align: top;
}
NOTE:: don't delete your edited part of your question..you have already deleted the 2nd edit you made to your question earlier...it will create difficulties for future users to relate the answer with question
Make sure that your parent containers (#container, body, html) are height:100%; as well.
Personally, I would do something like this(if the rest of the site layout allows it):
Instead of creating separate backgrounds for #menu, #menu-caontainer and body i would create background on body something like this: http://cl.ly/image/3L060f2w3Z0s
that would repeat vertically on y axis, so no matter how high the body is the background would stretch/repeat to the bottom.
Redesigning my website, in my CSS I have a div of height: 200px; then an image under it with a height: 532px; then lastly a div of height: 100%;.
The last div is not filling the rest of the page, is there something I'm doing wrong?
P.S. - All divs are in a container. All containing divs have height: 100%;
I have since changed it, so I no longer require this.
First, you need to set the height of html and body to 100%.
Then if you want to cover the rest of the page with that div you should do something like:
div{
height: -moz-calc(100% - 732px); //732 = 200 + 532
height: -webkit-calc(100% - 732px);
height: calc(100% - 732px);
}
Hope this will help....
You really need to post your html.
I suspect that the problem you are having though could be solved by setting the height of the html and body tags to be 100% too. Like :
html, body{
height:100%;
}
If the div did indeed obey the height: 100%, it would have the same height as the container, conflicting with the elements above it.
Without using Javascript to compute the height, or note widely supported modern CSS extensions, you must fall back to absolute positioning. The only down side is you must manually enter the top of it.
http://jsfiddle.net/NnD2u/
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
</div>
.
.container { height: 500px; background-color: Yellow; }
.child1 { height: 200px; background-color: Green; }
.child2 { background-color: Red; }
.container { position: relative; }
.child2 { position: absolute; bottom: 0; left: 0; top: 200px; right: 0px; }
I know there are a lot of questions about a css 100% height problem.
However I've tried to follow the instructions there and still the height isn't 100%,
so I thought I'd ask the question again.
The site where you can see the problem is:
www.exendo.be
some css styles:
html {
height: auto !important;
margin: 0;
min-height: 100%;
padding: 0;
}
body {
background: url("/wp-content/uploads/2011/06/bg.png") repeat-x scroll 0 100px #F2F7E8;
height: auto !important;
margin: 0;
min-height: 100%;
padding: 0;
width: 100%;
}
wrapper {
height: auto !important;
min-height: 100%;
position: relative;
}
footer-container {
background: url("/wp-content/uploads/2011/06/exendo-footer_bg.png") no-repeat scroll center bottom #557F40;
height:146px;
}
As you can see on the site, the footer is too high on the page.
If I inspect the page with Firebug, I can see that the html is 100% height, but the body tag isn't.
The problem both occurs on Firefox and IE.
If anybody could help that would be great!
A number of people suggested position:absolute; bottom:0;
This can cause an issue if the content is taller than the container. The height will not increase so the content will no longer fit and can get cut off or result in ugly scroll bars.
If you can give a fixed height to the container, this is ideal since the height:100% will then work on the child element. In case the content is too large, you can put a background on the child with overflow:visible on the parent, so the content still displays. This helps, but it can still break unless the child is the same width as the parent.
If that doesn't work, I recommend using min-height in em or pixels. This will make sure the height fills the parent, and expands if the content is too long. This worked best for customer comments on www.baka.ca
I think this article can help you.
According to this article:
Assign "position:relative" to your "container" div - page, page-container, or wrapper (I'm not sure to which one of the three, just try), and then "position:absolute; bottom:0;" to your "footer-container" div.
I hope that helps you.
#denappel; give html & body 100% height put footer outside of your main div wrapper & give margin-bottom in minus according to the height of footer.
css:
.wrapper {
position: relative;
width: 700px;
font-size: 0.9em;
margin: 0 auto -142px;
background:yellow;
}
.header {
height: 190px;
background:green;
}
.footer {
position: relative;
width: 700px;
margin: 0 auto;
background:red;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
.footer, .push {
height: 142px;
}
check this example
http://jsfiddle.net/sandeep/tCdPX/3/
this functionally called stickyfooter