Got the sticky footer working on my site here is the CSS code
html, body {height:100%; }
#wrap {min-height: 100%;}
#main {overflow:auto; padding-bottom: 180px; } /* must be same height as the footer */
#footer {position: relative;
margin-top: -180px; /* negative value of footer height */
min-height: 180px;
clear:both;}
But there is a white gap between body (where I have a bgcolour) and footer...tried everything, anyone had any similar issues?
You can user this css code to stick your footer at bottom
footer {
position: fixed;
bottom:0;
min-height: 180px;
}
So it will always stick at bottom.
Related
How can i set my nav div’s height to be 100% of one it's containing header div. As per the CMS I’m using the layout is this.
<header>
<div class=“container”>
<nav class=“nav-primary collapse navbar-collapse”>
Some of these classes come from bootstrap. The header height is set explicitly as 80px. The container div has no height attributes. The nav css has height attribute as auto !important. the CSS is below.
I need the nav to be 100%. I’ve check other posts here on stack overflow but haven’t found anything similar to this situation.
html, body {
height:100%;
}
header {
position: fixed;
width: 100%;
z-index: 999;
min-height:80px;
}
.nav-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
You could add this css to your .container:
.container {
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
}
Jsfiddle: https://jsfiddle.net/z4sjjto6/
Not 100% sure without seeing the rest of your HTML/CSS, but you can try this:
header .nav-primary {
height: 100%;
}
or
.container .nav-primary {
height: 100%;
}
or
header .container .nav-primary {
height: 100%;
}
Hope you can help me out. I'm Dutch, so my English is not very good.
I've got a div and I want it to show at the bottom of the browser, even when you scale the browser window. Same as this website:
http://www.cedricvella.com/#node-3
The content with the white background always starts at the bottom of the browser window, even when it's scaled down. I hope it can be done with pure css!
add the css for the div:
.div-class {
position: fixed;
left: 0; bottom: 0;
}
Check this demo in jsfiddle
CSS
body{
margin:0px;
padding:0px;
}
.footer{
width:100%;
position:fixed;
bottom:0px;
left:0px;
text-align:center;
background:#999;
height:50px;
line-height:50px;
}
HTML
<div class="footer">this is fixed area with align bottom</div>
Assuming you're talking about a footer, you should take a look at Ryan Fait's method.
It uses a wrapper with a .push element to keep the footer element at the bottom.
Like so:
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
I'm trying to accomplish this design:
Where the sidebar will be fixed, but the right side (the main content) will scroll vertically (and potentially horizontally if the user's browser window is smaller). What is the best way to achieve this?
I tried making the sidebar be "fixed" with a fixed width of 200px, and then the main content just has a margin-left of 200px. However, if the user's browser is then smaller than the main content, the sidebar overlaps all the content as the user tries to scroll horizontally.
Is there a smarter way to achieve this? Thanks!
Use the content div as your container for the page.
.sidebar {
position: fixed;
width: 200px;
height: 400px;
background: #000;
}
.content {
margin-left: 200px;
height: 500px;
width: auto;
position: relative;
background: #f00;
overflow: auto;
z-index: 1;
}
.info {
width: 1440px;
height: 300px;
position: relative;
background: #f55;
}
<div class="sidebar"></div>
<div class="content">
<div class="info"></div>
</div>
Your content will need to be the container to put the page in. The values here are my test to see if I am correct in this. If your width and height exceeds the values you set for content, the scroll bars will appear.
Have a fiddle: http://jsfiddle.net/djwave28/JZ52u/
edit: responsive sidebar
To have a responsive fixed sidebar, simply add a media-query.
Example:
#media (min-width:600px) {
.sidebar {
width: 250px;
}
.content {
margin-left: 250px;
}
}
Here's another fiddle: http://jsfiddle.net/djwave28/JZ52u/363/
Here is an alternative: http://jsfiddle.net/BoyWonder/8mVQX/embedded/result/
body{
padding-left:200px;
margin:0;
}
div#sidebar{
position:fixed;
height:100%;
width:200px;
top:0;
left:0;
background:grey;
}
div#content{
background:black;
width:100%;
height:1600px;
}
Here is another alternative by using only two CSS lines
.sidebar {
position: sticky;
top: 0;
}
and the credit goes to this post.
You can also experiment with the code over here.
I am trying to stretch the content area of the page to 100%. I have got a fixed header (50px height) and a sticky footer (95px height) and anything in between should use 100% height...However I can't get this to work. Here is my CSS
<div id="wrap">
<!-- fixed top navigation -->
<div id="main">
<!-- main content -->
</div>
</div>
<footer>
<!-- footer -->
</footer>
The CSS is like this
html, body {
height: 100%; /* needed for container min-height */
}
#wrap {min-height: 100%;}
#main {
position:relative; /* needed for footer positioning*/
overflow:auto;
padding-bottom: 95px; /* must be same height as the footer */
padding-top:50px;
min-height:100%;
}
footer {
position: relative;
margin-top: -95px; /* negative value of footer height */
height: 95px;
background-color:#ebebeb;
}
body {margin:0px;padding:0px;}
Any ideas how to do this?
if you've putted the footer relative ("sticky") meaning you want you website to scroll down with the content.
so you need do create another div ("block") -> in the HTML position the div between header and footer,
and give it a width of 100% and a height of auto; (meaning: the div will fill up verticaly with the amount of content putted in it.
you can make the footer like
footer{
position: absolute;
border: 3px solid #eee;
height: 30px;
top: auto;
bottom: 0;
left: 0;
right: 0;
}
i have tried before a lot
try use javascript to set height 100%
or try to use frameset
UPDATE
this article for using css
http://www.dave-woods.co.uk/index.php/100-height-layout-using-css/
but i am sure 90% that it may have a problems with different browsers but try it.
and this article for using jQuery
http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/
and this for using frameset
http://www.echoecho.com/htmlframes08.htm
and
http://www.w3schools.com/html/html_frames.asp
Finally you will choose what is useful for your project
Good Luck
My Regards
The best and simple way is
html,body{
height:100%;
}
#wrap {
height: calc(100%-50px-95px);
}
.footer {
//your code here
height: 95px;
}
Same issue as before (see Sticky Footer, but only sometimes and Sticky Footer, but only sometimes...continued)...
I have a footer that I want to stick to the bottom of the page unless content fills the page, then I want it to get pushed down. I've done this a dozen times with other sites, but I can't get this one to work. Working in Wordpress. I've checked the order of my divs and I've gone over the css...any help is appreciated.
The main css components:
* {
margin: 0;
padding: 0;
}
html, body {
height:100%;
min-height:100%;
}
#wrapper {
background:url("images/shadowborder.png") repeat-y center;
width:100%;
max-width:100%;
min-width:980px;
min-height:100%!important;
margin:0 auto;
margin-bottom:-20px;
position:relative;
overflow:auto;
}
#content {
clear:both;
float:left;
padding:20px 20px 60px 20px;
font-size: 1.6em
}
#spacer {
height: 40px;
clear: both;
}
#footer {
position: relative;
border-top: 1px solid #e5a5fc;
padding:3px!important;
height:20px;
}
The site:
http://www.hcfmissoula.com
The recipe I use is:
height: 100% on html
min-height: 100% and position: relative on body (with height:100% for ie6)
position: absolute and bottom: 0 on the footer div
Maybe be tricky preventing footer from obscuring some text near the bottom though.