I have divs like this:
<div class="container">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
now I use this style for my container and footer:
html, body {
height:100%;
}
div.container {
min-height: 100%;
position: relative;
}
div.footer {
width:100%;
height: 40px;
positioin: absolute;
bottom: 0px;
}
So, the footer stays at the bottom relative to the page, it is good, but I found out two problems:
if the body div's content is too long, it will overlap the footer!
I want the background color of the footer to span over the whole browser view port, but currently it is just as wide as its the container div.
Any idea of how to fix this?
My best tip is to use A CSS Sticky Footer, works like a charm.
place the footer div out of the container and give marin-top:-(height:px)px;.
<div class="footer"></div>
html, body {
height:100%;
}
div.container {
min-height: 100%;
}
div.footer {
width:100%;
height: 40px;
margin-top:-40px;
}
You might want to try bottom: -40px;.
The bottom property positions your element so that the bottom of your element is offset by the bottom of the containing element by this amount. So if you had bottom: 0; as in your example, the bottom of your element is aligned with the bottom of its containing element, hence it will overlap it.
I want the background color of the footer to span over the whole browser view port, but currently it is just as wide as its the container div.
This is because the width: 100%; is defined relative to the containing block of the element, which is the div.container (which is set to position: relative). You would have to take it out of this container, or not define the container as position: relative; to fix this.
Related
I aling divs in through right
{ float: right;}
but end of the page it (when divs become more than 4) the fifth div goes under other divs while page expands to down. I dont want this. I want height of the page become fixed and web page expand left to right always how can i do this.
Use min-width and display:table-cell example in fiddler : http://jsfiddle.net/HarishBoke/c8G7V/
On the top level parent element (presumably a 'body' tag) set the overflow-x property, in CSS, to scroll.
Something along the lines of:
body{
overflow-x: scroll;
}
Note that this possible solution may not be pre-IE8 friendly. As far as keeping the page's height fixed, define the height in CSS and set the overflow-y to be hidden. This will hide any elements exceding the parent element's height, rather than stretching the content.
You need a extra div with large width which contains other div's. This will not allow your body container to add new line when running out of space.
HTML:
<div id="container" class="clearfix">
<div id="wrapper" class="clearfix">
<div id="div1">Div1</div>
<div id="div2">Div2</div>
<div id="div3">Div3</div>
<div id="div4">Div4</div>
</div>
</div>
CSS:
#container {
height: 275px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
#wrapper div {
float: right;
border:1px solid black;
width:200px;
height:100px;
display:inline-block;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
To make it more dynamic,you can first calculate the space taken by inner div and then some ettra space on the wrapper div accordingly
Javascript:
var width=0;
$('#wrapper>div').each(function() {
width =width+parseInt($(this).css('width'));
});
wrapperWidth=width+100;
$('#wrapper').css('width',wrapperWidth);
Updated Fiddle: http://jsfiddle.net/ankur1990/mgxk5/3/
I want to use three <div> areas on my web page: Header, Content and Footer.
The Footer <div> is supposed to stick to the bottom of the web page.
The Header <div> is supposed to stick to the top of the page.
The Content <div> is supposed to fill the whole area in the middle of the page.
So this is the basic layout:
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
For the Footer to stay down the page I added
#footer
{
position: fixed;
bottom: 0;
}
For the Content <div> I'm using a background image, scaling exactly to the div element's dimensions:
#content
{
background: url("Bilder/Bild.png") center contain no-repeat black;
}
Now I want the Content <div> to be exactly the remaining height of the ViewPort between Header and Footer without adding any JavaScript, no matter what content is later added to the Content <div>.
How can I do that in CSS3?
If the size of footer and header is known, you can use calc(). So assuming both take 100px together, this should work:
html, body { height: 100%; }
#content {
height: calc( 100% - 100px );
}
Be aware, though, that old browsers do not support this. Also have a look at the compatibility table for the prefixes that might be needed.
Example Fiddle
you could use something like this. it will allow you to keep your positions in a range of resolutions.
#header {
position: fixed;
height: 10%;
}
#content {
position: fixed;
height: 80%;
top: 10%;
}
#footer {
position: fixed;
bottom: 0px;
height: 10%;
}
check it out here
So I have a fluid layout with a fixed nav. I have: the fixed nav itself, and a div containing four other divs that Im looking to fill the space beneath the fixed nav completely. I cant seem to make this happen without having some kind of scrolling of either the nav or the divs.
The nav is set to position:fixed
The div containing the content div is set to position:absolute height:100% width:100%
The four content divs themselves are set to float:left height:50% width:50%
Im not even certain this can be handled with css alone, if it can that would be awesome, if not, ill entertain other possibilities. Any help, as always, is greatly appreciated.
Development area:
http://riverhousegolf.icwebdev.com
Maybe there is solution with CSS only, but here is jQuery solution. Content below menu will fill rest of space, without scroll bars.
HTML markup will be:
<div id="menu">SOMETHING IN MENU</div>
<div class="content">
<div class="part1"></div>
<div class="part2"></div>
<div class="part3"></div>
<div class="part4"></div>
</div>
CSS:
body,html{padding:0; margin:0;height:100%;width:100%;}
#menu {
position: fixed;
top: 0;
background: blue;
height: 50px;
width: 100%;
}
.part1 {
width:50%;
height: 50%;
float: left;
background: purple;
}
.part2 {
width:50%;
height: 50%;
float: left;
background: red;
}
.part3 {
width:50%;
height: 50%;
float: left;
background: green;
}
.part4 {
width:50%;
height: 50%;
float: left;
background: silver;
}
.content{
width: 100%;
position: relative;
}
jQuery:
var height = $(document).height();
var menu_height = $("#menu").height();
var content_height = height - menu_height;
$(".content").css("height", content_height);
$(".content").css("top", menu_height);
DEMO
Most important part is jQuery. First, we need to get height of document (html), then height of menu. Then, we substract menu height from document height, and result is content height. Same result we will apply to top position of content, to avoid overlaping.
Remove the "overflow-y: scroll;" attribute from your "html" selector in your style sheet.
edit:
I think if you are to use pure CSS you are going to have a scroll bar. I made a fiddle to show how to at least stop the nav from cutting off th top of the other divs. I used a
<div class="spaceTaker" >
that bumps the rest of the page down.
http://jsfiddle.net/Dtwigs/XRJ8n/
Edit2:
Try keeping all of the widths the same. But remove all of the heights where they are set to a percentage. The html element should have height: 100% but your tiles, etc. should not. Now put this jquery on your page.
$( function () {
var pHeight = $("html").height() - $("nav").height();
$(".tile").height(pHeight / 2);
});
Also make your nav position relative.
http://jsfiddle.net/Dtwigs/XRJ8n/
The following code has a DIV that needs to be positioned at the top of the container, another at the bottom and then the content needs to come through in the middle.
<div style="position:absolute; top:0; width:100%; height:40px"></div>
<div class="howto"></div>
<div style="position:absolute; bottom:0; width:100%; height:40px"></div>
So we don't know the height of the containing DIV. How without JS can the div with class howto have the height of the container DIV less the height of the absolute positioned div at the top and bottom so as to contain content between these 2 DIVs.
For what you wish to accomplish, this is one possible solution:
#tinkerbin: http://tinkerbin.com/QsaCPgR6
HTML:
<div class="container">
<div class="header"></div>
<div class="howto">
Has height set to auto. You may change that if you want to.
</div>
<div class="footer"></div>
</div>
CSS:
.container {
position: relative;
padding: 40px 0; /* top and bottom padding = .header and .footer padding*/
}
.header,
.footer {
position: absolute;
height: 40px;
width: 100%;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
.howto {
height: /*specifiy one if you wish to*/;
}
As far as I know there isn't a pure CSS way to do what you're trying to do without JS.
See this previous post on SA:
Make a div fill the height of the remaining screen space
I have div that contains 2 divs in it. One of the child divs has static height 2em, and I want the other one to vertically fill the rest of the space of the parent div. How do I do this?
Edit: I need the parent div to fill the screen.
This depends on exactly what you want to achieve. Getting a fixed top and variable bottom where the container is only as large as it needs to be for the two children.
Assuming:
<div id="parent">
<div id="top"></div>
<div id="bottom"></div>
</div>
use:
#top { height: 2em; }
and the bottom div will be as large as it needs to be. You can make the bottom fixed height and achieve the same thing.
But I suspect what you want to do is have the outer div fixed height (say 100%). That gets much harder. The problem is that there is no way in CSS of saying "height of 100% minus 2em" without using an (ill-advised) CSS expression.
One approach is to overlay the top with the bottom.
#outer { position: relative; }
#top { position: absolute; height: 2em; top: 0; left: 0; width: 100%; }
#bottm { height: 100%; padding-top: 2em; }
The top div actually overlays the bottom. This is fine so long as you don't want a border.
You can use Faux Columns if you're using an image for the background or just move the background color back to #parent to give the appearance of filling the screen with the #bottom div. It would fill the page by giving it a 100% height (as long as html and body also get height: 100%).
Example:
<head>
<title>TITLE</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#parent { height: 100%; background: #f08; }
#top { height: 2em; background: #80f; }
</style>
</head>
<body>
<div id="parent">
<div id="top">TOP DIV</div>
<div id="bottom">THE REST</div>
</div>
Since CSS is just about styling, giving the appearance of 100% height is the same as having 100% height. Right?