I have an issue with a page I'm doing.
A Snippet of the code:
<div id="header"> // header..
</div>
<div id="content"> // content where ajax is loaded (should be atleast 100% of the site height)
<!-- ajax -->
</div>
<div id="footer"> //empty atm.
</div>
now for the css:
#content{
margin-left:auto;
margin-right:auto;
background-color:#767670;
width:800px;
border-left:1px solid #9F9793;
border-right:1px solid #9F9793;
position:relative;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#footer{
width:100%;
height:40px;
border-top:1px solid #9F9793;
border-bottom:1px solid #9F9793;
background-color:#767670;
}
I want the container to be from the header to the footer, I tried to apply the code and tips that I found, yet without success. Appreciating any answers!
#content{
height:100%;
}
This implies that content div takes 100% of the parent container, which in this case is html.
So write
html{
height:100%;
}
Related
I'am trying to have header,content and footer as dynamic fields. Tried a lot of different solutions, and it must work in multiply instances. I need a the scroller only in content area, so I haven't used absolute zero on the footer. But uses table layout.
If you look at the code snippet, you can see that the content #wrapper(yellow) have the same size as content. But I can't get the scoller when content (#overflow, black) get heigher than the wrapper.
I know a little script can solve this, but is it possible just With CSS??
The link below is something simular but there is no good answer. Maybe this can be, If it is possible to get a working scroller in content area.
CSS 100% height layout. Fluid header, footer and content. In IE10 and firefox
<style>
body {
margin:0;
padding:0;
height:100%;
width:100%;
overflow:hidden;
}
#wrap {
height: 150px;
width: 400px;
display:table;
position:absolute;
text-align:center;
table-layout:fixed;
border:1px solid black;
}
#header{
display:table-row;
border:1px solid red;
background:green;
}
#content{
height: 100%;
background:blue;
display:table-cell;
}
#wrapper{
width:100%;
min-height:100%;
box-sizing:border-box;
border:10px solid yellow;
position:relative;
overflow:scroll;
display:block;
}
#footer{
width: 100%;
display:table-row;
background:green;
}
</style>
<body>
<div id="wrap">
<div id="header">
HEADER
</div>
<div id="content">
<div id="wrapper">
<div id="overflow" style="height:50px;width:1px;border:10px solid black;"></div>
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
You should specificy a height for the wrapper element
#wrapper{
width:100%;
/*min-height:100%;*/
height:100px;
box-sizing:border-box;
border:10px solid yellow;
position:relative;
overflow:scroll;
display:block;
}
Here the working Fiddle with your example.
I am trying to keep header of the page at top and footer at the bottom. If the container grows, the footer should be pushed down.
I have following working code using calc(), but all browsers don't support it. So, I need alternative for this. Please note, I want CSS only solution.
Code:
header{
height:50px;
background:#CCC;
}
footer{
height:30px;
background:#333;
}
main{
height:auto;
min-height:calc(100% - 80px);
}
JsFiddle
Any help would be appreciated.
Thanks
Just set your main content to a min-height of 100%, with a negative margin the same height as your footer, for example (cribbed from http://ryanfait.com/sticky-footer/)
* {
margin: 0;
}
html, body {
height: 100%;
color:#FFF;
}
.wrapper {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 155px;
}
<div class="wrapper">
<header>Header</header>
Main Content
<div class="push"></div>
</div>
<footer>Footer</footer>
http://jsfiddle.net/u6rsLv1j/2/
Try:
header{
position:fixed;
top:0;
left:0;
height:50px;
background:#CCC;
}
footer{
position:fixed;
bottom:0;
left:0;
height:30px;
background:#333;
}
main{
height:auto;
margin:50px 0 30px;
}
This way, your header and footer would always stay on the very top and the very bottom, just the content of your "main"-container seems to be scrollable. Not very sure about this is what you searched for...
Just set the position absolute to footer and the position relative to his parent as in code below.
Position fixed is not a good solution in this case because bottom:0 in position fixed means the bottom of the first screen, so it wont scroll with the page. Not mentioning it has serious problems f.ex. on mobile devices.
EDIT: Try to run below code snippet in new window, as the preview isn't rendered properly.
*{margin:0;padding:0;}
html,body{height:100%;width:100%; position:relative;}
header{height:50px;background:#CCC;}
footer{height:30px;width:100%;background:#333; position:absolute; bottom:0;}
/*main{height:auto;min-height:calc(100% - 80px);}*/
p{padding-top:5px;}
p:last-of-type{padding-bottom:5px;}
<header></header>
<main>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</main>
<footer></footer>
The key is to use min-height and position absolute within relative.
Here you go:
<html>
<head>
<style type="text/css">
html, body{
width:100%;
height:100%;
padding:0;
margin:0;
}
.page-wrapper{
position:relative;
min-height:100%;
width:100%;
}
.header{
height:50px;
background:#CCC;
}
.footer{
background:#333;
height:30px;
position:absolute;
width:100%;
bottom:0;
}
.main{
}
</style>
</script>
</head>
<body>
<div class="page-wrapper">
<div class='header'>header</div>
<div class='main'>main</div>
<div class='footer'>footer</div>
</div>
</body>
here is total solution of your problem.
http://css-tricks.com/snippets/css/sticky-footer/
I want a header,body and footer.I have coded it.when I alter the codes the footer either sits below the body when i give it like this
HTML CODE:
<div id="body" style="background-image:url(img/bg.png);" class="body">
<div id="title" class="title">
<h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
<p style="desc p"></p>
</div>
</div>
<div id="footer" style="background-image:url(img/bottom_bar.png);" class="footer">
<div><h6 class="footer h6">2011-FOOOTER</h6><img src="img/info.png" alt="" /></div>
</div>
CSS CODE:
.body
{
float:left; float:left; width:100%; height:100%; min-height: 100%; overflow-y: scroll;
}
.title
{
width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF;
}
.desc
{
width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px;
}
.desc p
{
margin-top:0;
}
CSS CODE of footer:
.footer
{
float:left; width:100%; line-font-size:15px; padding:0px; bottom:0px; height:25px; font-size:18px;
}
when I code it as below,the footer sits on the body and when you go down you can see the text below the footer
.footer
{
float:left; width:100%; position:absolute; line-font-size:15px; padding:0px; bottom:0px; height:25px; font-size:18px;
}
I want the footer to be fixed to the bottom of the screen and want the text to scroll without the scroll bar.
Could someone suggest what is the mistake I have done and where?
Try this styles for which to see scrollbar just remove overflow:hidden in body
html,
body {
margin:0;
padding:0;
height:100%;
overflow:hidden;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:10px;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:fixed;
bottom:0;
left:0;
}
Sure you will get footer pushed under body with 100% height of body, with no space for footer to stay in your view, you need to solve it, anyway this question is so common, your words maybe not helped you, simply you need to search about "Sticky Footer" a lot of questions answered here or simply with magic of Google you can see :
http://ryanfait.com/sticky-footer/
and http://www.cssstickyfooter.com/
And learn about it.
Good luck.
in the footer class
Instead of
position:absolute;
use
position:fixed;
this should work
I have tow pages of html that contain a footer. I want to stick the footer to the bottom of the page in both pages. It works fine when the page does not have vertical scroll but when the content is a lot and page has scroll footer stands over my contents. Here is my page layout:
<body>
<div id="container">
<div id="header"> Header </div>
<div id="menu"> Menu </div>
<div id="content"> Content </div>
<div id="footer"> Footer </div>
</div>
</body>
and here is my css:
html, body
{
width:100%;
margin:0;
}
#header, #menu, #content, #footer
{
border:thin solid #000;
}
#content
{
width:70%;
margin: 0 auto;
height:100%;
}
#footer
{
position:absolute;
bottom:0;
width:100%;
background-color:#06F;
}
Change your CSS like;
#footer{
width:100%;
background-color:#06F;
}
Here is a working Live Demo.
and if you want the footer stick to the bottom, no matter the content is, try;
#footer{
width:100%;
background-color:#06F;
bottom:0;
position: fixed;
}
But define a height to your footer and add the same amount of padding-bottom to your content, otherwise some text may be hidden by footer
Here is a working Live Demo.
#footer {background-color: #0066FF;bottom: 0;position: absolute;width: 100%;bottom:0px;}
body,html {height:100%}
by this way you will get your output
You can try this
#footer {
background-color: #0066FF;
width: 100%;
}
I have two <div>s side by side, in a two column layout. I want to make the second div width auto fit to the browser width... but my CSS isn't quite working:
<style>
#sidebar{
float:left;
width:230px;
min-height:10px;
overflow:hidden;
margin:auto;
}
#content{
float:left;
width:auto;
min-height:10px;
overflow:hidden;
margin:auto;
background-color:#cddfea;
}
</style>
<div id="sidebar">aa</div>
<div id="content"></div>
How can I make the width of the "content" div fit the rest of the browser window while my sidebar has a width of 230px?
Thank you. :)
Try this: jsFiddle
HTML:
<div id="sidebar">aa</div>
<div id="content">bb</div>
CSS:
#sidebar{
float:left;
width:230px;
min-height:10px;
overflow:hidden;
margin:auto;
background: #faa;
}
#content{
min-height:10px;
overflow:hidden;
margin-left:230px;
background:#cddfea;
}