I have a three-parts layout: header, content and footer. I am very well familiar with the absolute positioning technique; I use it a lot when I want the content div to extend to 100% of available height.
In this case, my problem is that I don't know in advance the height of the footer, it is dynamic based on its own content, which has an unknown number of lines (typically between 1 to 3 lines).
I want the main content div to grab 100% of available height, after accounting for the height of the header (which is fixed, so it's a no-brainer) and for the height of the footer therefore I can't use absolute positioning technique here.
I have a solution with involves javascript, but I am trying to find a css-only solution. Ideally, it should be a cross-browser solution (IE8, IE9, chrome, firefox and Safari).
Try this
<!doctype html>
<html>
<body>
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
background:#6cf;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Related
This works for Chrome: http://jsfiddle.net/EtNgv/ I want to make it work in IE and Firefox.
Answers to other similar questions said that it is not possible - but did not mention that it was possible in Chrome - so I am hoping that someone could tweak what I have here to make it work in FireFox and IE10.
Desired outcome:
A container div that takes up 100% height - but no more.
Which wraps header and footer divs whose heights are determined by their content.
The footer div is always flush with the bottom of the page.
A middle div which stretches between the header and footer. If its content overflows it should scroll.
Image: http://i.stack.imgur.com/e7ddc.png
Current implementation:
CSS:
html,
body {
height:100%;
margin:0;
}
#container {
display:table;
height:100%;
width:100%;
}
#header,
#footer {
display:table-row;
background-color:#FC0;
height:2px;
}
#middle {
display:table-row;
overflow:hidden;
position:relative;
}
#content {
height:100%;
overflow-y:scroll;
}
HTML:
<div id="container">
<div id="header">header<br/>header line 2<br/></div>
<div id="middle">
<div id="content">Burrow under covers...</div>
</div>
<div id="footer">footer</div>
</div>
This works in Chrome, but in IE and Firefox if the content is larger than the middle div the container becomes larger than 100% high and the page obtains a scroll bar.
Well, I got close, but it still feels kinda sloppy. I can't imagine creating a page like this without using jQuery to determine the height of the screen, #footer, #header, etc...
Forked Fiddle:
http://jsfiddle.net/mRDux/
I need to bump my footer down to the bottom of the page, regardless how much content is on the page above it. So I did some search on the internet and found one solution according to this site:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
However, everything works OK until I applied "float:left" to the content div. The footer is no longer on the bottom and got bumped up half way. My question is, How to keep the footer down when there is floating in the div above?
Please see this jsfiddle here for my example:
http://jsfiddle.net/mEuke/5/
or code here:
<style type="text/css">
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
<div id="container">
<div id="header"></div>
<div id="body">
<div id="test" style="float:left">
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
</div>
</div>
<div id="footer"></div>
</div>
You need to use a clearfix on the the container of the floated children
Here is a modern clearfix that works in modern browsers.
#body:after { /* #body is your container */
content: "";
display: table;
clear: both;
}
This will solve your problem
Demo: http://jsfiddle.net/mEuke/7/
For a cross browser clearfix read this Article: http://css-tricks.com/snippets/css/clear-fix/
What is a clearfix?
A clearfix is a way for an element to automatically clear after itself, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally.
The clearfix is a way to combat the zero-height container problem for floated elements.
Source: What is a clearfix?
I want to add 100% width to my website. The problem is that If I do so, the design and the size of the contents changes with the change of the browser size. I want to make the contents inside the webpage constants although I give the size of the boxes in %
Try to fix min-width with % width of body, this will resize but will not let elements to get crushed if browser is thinned.
<html>
<head>
<style type="text/css">
body,html{ margin:0; padding:0; width:100%; min-width:800px;}
#container{
margin:0 auto;
}
#header, #content, #footer{
min-width:700px;
margin:0 auto;
}
div{
min-height:40px;
margin:10px;
background-color:red;
}
?
</style>
</head>
<body>
<div id="container">
container
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Create a wrapper div with a fixed width, and then any element's width within it will be relative to that width.
eg
#wrapper {
width: 800px;
}
div {
width 80%; /*div will be 80% of 800px ie 640px*/
}
As I understand your question you can put contents in fixed width divs and put those inside of variable width div(%) and position them with margin or padding
You can also specify maximum-width/height for the components which you feel as should not be re-sized.
I'm looking for CSS rules to set a simple page layout.
I want a header div that has a fixed height, and extends fully across the top of the viewport from left to right,
I want a main content div that completely fills the remainder of the viewport.
There should be no area within the viewport that is not within one of these two divs, and neither div should extend beyond the viewport.
And these should remain true as I resize the browser. Regardless of what I put in either div. (Assuming, of course, that I'm not using overflow:visible.)
Seems simple enough, but I've not been able to make it work.
What about something like this: http://jsfiddle.net/WqCYh/
For the sake of people not wanting to click the link, here's the HTML and CSS:
<style type="text/css">
#header
{
height:100px;
background-color:red;
position:absolute;
top:0px;
left:0px;
right:0px;
}
#body
{
background-color:blue;
position:absolute;
top:100px;
left:0px;
bottom:0px;
right:0px;
}
</style>
<div id="header">
Header
</div>
<div id="body">
Body
</div>
Are you sure you need your content div to be the height of the browser? You can apply a background color to the body to simulate full viewport coverage.
Anyway here is the 100% height code...
CSS
html,body { height: 100%; }
#header { height: 100px; background: red; }
#content { min-height: 100%; background: blue; }
#inner { padding: 20px; }
XHTML
<div id="content">
<div id="header">
<h1>Header</h1>
</div>
<div id="inner">
<p>Content</p>
</div>
</div>
Im not too great at CSS but hopefully someone on here can help. I have the following mockup. (i have stripped out my content to make it easy to view)
<body>
<div id="container">
<div id="header"></div>
<div id="body">
<div id="navBar"></div>
<div id="mainContent"></div>
</div>
<div id="footer"></div>
</div>
</body>
my CSS is as follows:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
now im unsure as to how to get the "navBar" to be the page height. I've tried adding height: 100% but that doesnt work.
Thanks,
Matt
Giving an element height: 100% will give it a height equal to that of its containing element, which in your case is #body. Since body in your example is only as big as it needs to be to hold its content, #navBar will be 100% of that height.
To fix this, you can make #container and #body height:100% to make them as tall as tho body tag, which takes up the whole page:
#container {
height:100%
}
#body{
height:100%;
}
In the interest of completeness, you could also set the top and bottom of #navBar:
position: absolute;
top: 20px;
bottom: 60px; /* height of footer */
To understand the difference, play around with This JS Fiddle. Mess around with the height and top, bottom, position properties to see how your changes affect the layout; just don't use both positioning methods at once!
Your issue appears to be that each parent DIV all the way up to the BODY tag must explicitely have a height of 100% for #navBar to have 100% height. This means you would also have to set the height of #body to 100% as well, since it is the parent container of #navBar.
Have a look at this site - I assume you want a two column layout - this site will show you how to do what you want. Hope it helps.