I need a layout like header content and footer.
My requirements are...
The default position of footer Div is at bottom even no content in content Div.
When the content expand of content Div then whole body(including header,footer) need to be expand based on the content Div
I don't need position:fixed for the footer Div....
I already tried some code in my project......
CSS:
body
{
height:100%;
margin-left: 0;
margin-top: 0;
padding:0;
width:100%;
position: relative;
display:block;
}
.container
{
display:table;
width:100%;
height:100%;
}
.header
{
top:0px;
height:75px;
width:100%;
}
.content
{
width:100%;
height:auto;
position: relative;
}
.footer
{
top:5px;
bottom:0px;
height:45px;
overflow:hidden;
width:100%;
}
CODE:
<div>
<div class="header">
Header Div
</div>
<div class="content">
Content Div
</div>
<div class="footer">
Footer Div(Need it,default at bottom position)
</div>
</div>
Any Idea?
Note:I need to run this code in IE also......
add the following style to your body tag or content div element:
div {
min-height: 500px;
height:auto !important;
height: 500px;
}
This works because IE treats "height" how "min-height" is supposed to be treated.
Related
I have found a lot of solutions for sticky footer here on Stack Overflow and it works for me. However, I need to keep a 60px distance between my "content div" and my "footer div". In all the solutions I found so far, if I set margin-top: 60px for my "footer div" it didn't work.
A solution I found:
<div id="container">
<div id="body">
<div id="teste">
</div>
</div>
<div id="footer">
</div>
</div>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#teste {
background: red;
height: 500px;
}
#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;
margin-top: 60px; <---- this didn't work
}
The solution was simpler than I thought. Just increase the value of padding-bottom of my #body div.
Set margin-bottom:60px; on your "content-div". Your sticky footer has absolute positioning which removes it from the flow of the page. The margins you set on it won't interact with other elements. Setting a margin on your content div just makes that div stay 60px from the bottom of the page which is the space that your footer is occupying.
Hello guys this has been bugging me for hours.
Im using the layout to get full height containers and sticky footers.
Unfortunately i only want a border in the content but it is not extending to the footer.
I can try to give the the wrap div the borders but i dont want the header to have borders.
The only thing i can think of is giving the header the border color of the background but i dont want to do this.
Is there another way you can do this?
http://jsfiddle.net/VNc33/14/
<body>
<div class="wrap">
<header>
<img src="http://placedog.com/400/50" />
</header>
<div class="content">i dont want the header tag to have a border
</div>
<footer>This is a footer.</footer>
</div>
</body>
Image
you can use an inset unblur box shadow on .wrap, so it should not bother much your layout :http://jsfiddle.net/VNc33/5/
.wrap {
margin:0 auto;
position:relative;
width:400px;
min-height:100%;
background:lightblue;
box-shadow:inset 0 0 0 1px;/* here fake an inside border of 1 pixel with text color if none declared */
}
header { background:lightblue;/* background hides inset box-shadow from parent */} http://jsfiddle.net/VNc33/8/ and you can remove borders from .content except the top one : http://jsfiddle.net/VNc33/9/ .
With another CSS approach to build your fullHeight template , you can have header and footer of variable height, using the display properties used by tags . (<footer> inside .wrap)
this method is avalaible in IE from version 8 , lower version wwill ignore the display:table/table-row/table-cell propertie and wil use the default display.http://jsfiddle.net/VNc33/11/
body, html {
height:100%;
margin:0;
padding:0;
}
header {
height:50px;
}
.wrap {
margin:0 auto;
width:400px;
display:table;
height:100%;
background:lightblue;
}
.content {
color:white;
border:1px solid black;
}
footer {
height:50px;
background:darkred;
color:white;
}
header img {
vertical-align:top;/* or bottom or display:block */
}
header, footer {
display:table-row;
}
.content {
display:table-cell;
height:100%;
border:solid 1px solid;/* just put the border here */
}
easy way to apply the border to .content and not mind about how much content is hold
fiddle
<body>
<div class="wrap">
<header>
<img src="http://placedog.com/400/50" />
</header>
<div class="content">i dont want the header tag to have a border</div>
<footer>This is a footer.</footer>
</div>
</body>
--
body, html {
height:100%;
margin:0;
padding:0;
}
.wrap {
margin:0 auto;
position:relative;
width:400px;
height:100%;
background:lightblue;
}
header {
height:8%; /* height can be anything but header + content + footer heights must be 100% or the page will scroll */
border:0;
}
.content {
height:84%;
color:white;
border:1px solid black;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
/* keeps height at 84% instead of 84% + 2px for border */
}
footer {
height:8%;
background:darkred;
color:white;
}
Change .wrap min-height to just height and add height:100% to .content
I have a DIV menu that is set to 100% height with a overflow:scroll. Within the DIV I have a ul li. The problem I have is that it wont let me scroll all the way down to see the last li. I can barely see it.
I think it has something to do with my header because when I remove the header, I can see it. When I put back the header, it goes under the browser and cannot be scrolled all the way down to see the last li.
Both li and header are almost identical in height and it makes a lot of sense that the header is causing the problem. Not the header in particular, I think, but more of something I did in CSS.
Why cant I scroll all the way to the bottom? What is the solution?
Sample here: http://jsfiddle.net/D5KU3/2/
<div class="container">
<!--header-->
<div class="header">
</div>
<!--end header-->
<!--left-->
<div class="left">
<!--ul starts here-->
<ul>
<li class="hybrid">
<a href="#">
<p class="title">Why Cant</p>
<p class="type">I scroll all the way to the bottom</p></a>
</li>
Repeat li 20 times
</ul> <!--ul ends here-->
</div> <!--container ends here-->
CSS
body, html {
height:100%;
}
body {
background:white;
}
.container {
width:260px;
height:100%;
overflow:hidden;
background:silver;
margin:0 auto;
font-family:sintony;
}
.header {
width:100%;
height:60px;
background:#000;
}
.left {
width:260px;
height:100%;
background:#fff;
float:left;
overflow:scroll;
}
li.hybrid a {
display:block;
background:#16BF14;
height:60px;
width:260px;
text-decoration:none;
position:relative;
}
li.purple a {
display:block;
background:#3370CC;
height:60px;
width:260px;
text-decoration:none;
position:relative;
}
p.title {
position:relative;
padding-left:10px;
}
p.type {
font-size:12px;
position:relative;
padding-left:10px;
}
ul {
margin:0;
padding:0;
}
li p {
margin:0;
padding:0;
list-style-type:none;
}
As you have both the class="header" and class="left" elements in the container, and the class="left" element is 100% of the container, those are 100% plus 60 pixels together.
You can make room for the header by using box-sizing and padding-top in the container. That will make the inner size of the container 100% minus 60 pixels. Then use a negative top margin on the header to place it on top of that padding:
.container {
box-sizing: padding-box;
-moz-box-sizing: padding-box;
-webkit-box-sizing: padding-box;
padding-top: 60px;
}
.header {
margin-top: -60px;
}
Demo: http://jsfiddle.net/Guffa/D5KU3/11/
You might also want to get rid of the page margin, otherwise the 100% container and the margin is taller than the window:
body {
margin: 0;
padding: 0;
}
It's actually quite logic - you have your body and html set to 100%. This means the content of the body can't be higher then the available space in your browser - and so you don't see the bottom.
If you remove this CSS the problem is solved; although it might be better to set the body to min-height: 100%. This way the height of the page will always be the complete available space; unless it's content is more than that.
An updates jsfiddle: http://jsfiddle.net/D5KU3/3/
Remove the overflow: hidden; from .container class
.container {
width:260px;
height:100%;
background:silver;
margin:0 auto;
font-family:sintony;
}
http://jsfiddle.net/atYpX/
i would recommend following
.left {
position:absolute;
width:260px;
top:60px;
height:100%;
background:#fff;
overflow:scroll;
}
http://jsfiddle.net/D5KU3/8/
I am trying to create a webpage layout with a header/footer (100% width, 145px height), a 'main area' between the header/footer (100% width, dynamic height), and a container around the content that is a unique background color (860px width, dynamic height but is always 'flush' against the footer).
(See Example for a visual)
The problem I am having is I can't seem to have the 'content container' always be flush with the footer when there is minimal content. Using a setup like the (original example) results in the footer floating over the content if there is a respectable/'normal' amount of content or if the window is resized.
And the Following CSS results in a gap between the content and the footer.
html,body{
margin:0;
padding:0;
height:100%;
background:yellow;
}
.wrap{
min-height:100%;
position:relative;
}
header{
background:blue;
padding:10px;
}
#content{
height:100%;
width: 400px;
margin:0 auto;
background:orange;
padding:30px;
}
footer{
background:blue;
position:absolute;
bottom:0;
width:100%;
height:60px;
}
How can I make the content container be the full height of the screen when content is minimal and have the footer 'stick' to the bottom of the page, while also being dynamic to resize appropriately if there is a normal amount of content (footer is always at the bottom of the content)?
Thank you!
FIDDLE: http://jsfiddle.net/3R6TZ/2/
Fiddle Output: http://fiddle.jshell.net/3R6TZ/2/show/
CSS
html, body {
height: 100%;
margin:0;
}
body {
background:yellow;
}
#wrapper {
position: relative;
min-height: 100%;
vertical-align:bottom;
margin:0 auto;
height:100%;
}
#header {
width: 100%;
height: 150px;
background:blue;
position:absolute;
left:0;
top:0;
}
#content {
background:pink;
width:400px;
margin:0 auto -30px;
min-height:100%;
height:auto !important;
height:100%;
}
#content-spacer-top {
height:150px;
}
#content-spacer-bottom {
height:30px;
}
#divFooter {
width:100%;
height: 30px;
background:blue;
}
HTML
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div id="content-spacer-top"></div>
<div id="content-inner">
**Content Goes Here**
</div>
<div id="content-spacer-bottom"></div>
</div>
<div id="divFooter">Footer</div>
</div>
UPDATE
The #content-spacer-top and #content-spacer-bottom are used to pad the #content div without using padding or margin that would increase the box size past the 100% height causing problems.
In CSS3, there is the box-sizing property (more info here) that can fix this issue, but i'm assuming you don't want to depend on CSS3 features.
EDIT
Added a fix and tested down to IE7
UPDATE 2
Alternate method using :before and :after pseudo-elements instead of the spacer divs:
http://jsfiddle.net/gBr58/1/
Doesn't work in IE7 or 6 though, and to work in IE8, a <!DOCTYPE> must be declared (according to w3schools.com), but the HTML is nice and clean
UPDATE 3 (Sorry for so many updates)
Updated it to work down to IE6. I don't normally bother as my company doesn't support IE6, but it was an easy fix...
I think you need position: fixed on the footer:
footer {
width: 100%;
height: 30px;
position:fixed;
bottom:0;
}
I'm creating a sidebar with this CSS code:
.sidebar {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 30%;
height: 100%;
border-right: 1px solid #333;
}
But the sidebar width doesn't scale when I change the browser width. How can I make the sidebar fluid?
Thanks.
Look at the height in body in CSS part.
Here is a working example for you:
Your HTML:
<div id="content">
<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>
<div id="sidebar">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
Your CSS:
body {
margin:0;
padding:0;
width:100%; /* this is the key! */
}
#sidebar {
position:absolute;
right:0;
top:0;
padding:0;
width:30%;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#content { margin-right: 200px; }
Its kind of an odd issue, but it seems its challenging to get the background color to stretch to the bottom of both columns, when using fluid layout.
I included the workaround along with a simple 2 column fluid layout.
Try this- jsFiddle
html, body {
margin:0;
padding:0;
background:silver;
/* workaround to get the columns to look even,
change color depending on which column is longer */
}
#sidebar {
position:absolute;
left:0px;
top:0px;
padding:0;
width:30%;
background:silver;
word-wrap:break-word;
}
#content {
position:absolute;
right:0px;
width:70%;
word-wrap:break-word;
background:gray;
}