I'm using the sticky footer from here: http://ryanfait.com/sticky-footer/
The CSS looks like this:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
And the HTML like this:
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
If I add another div within the wrapper is it possible to somehow set its height to fill the wrapper? Thanks!
Just add height: 100%; to the div you want to add to your wrapper
Related
I have a very simple problem: I want to have multiple <section>s inside a <main> tag. Each of the sections should contain a child <div> that is sticky so it is bound by the height of the section.
Now I have the problem that the <main> needs overflow-x: hidden to remove unwanted horizontal scrollbars (especially on Safari) but at the same time this line seems to disable the sticky elements. Any ideas how to solve this without JS?
This demo shows the problem. Uncomment the overflow to see the difference.
<!DOCTYPE html>
<html>
<head>
<style>
main {
width: 100%;
height: auto;
min-height: 100vh;
/*overflow-x: hidden;*/
position: relative;
display: block;
}
section {
width: 100%;
min-height: 100vh;
background: green;
}
div {
position: sticky;
top: 0;
}
</style>
</head>
<body>
<main>
<section>
<div>
<p>Content goes here</p>
</div>
</section>
<section>
<div>
<p>Second content goes here</p>
</div>
</section>
</main>
</body>
</html>
Position sticky normally doesn't work if parent element have overflow hidden property.
Instead of main try to give "overflow-x: hidden" to the body
body
{
overflow-x: hidden;
}
You may try below code,
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
main {
width: 100%;
height: auto;
min-height: 100vh;
/*overflow-x: hidden;*/
position: relative;
display: block;
}
section {
width: 100%;
min-height: 100vh;
background: green;
}
div {
position: sticky;
top: 0;
}
</style>
</head>
<body>
<main>
<section>
<div>
<p>Content goes here</p>
</div>
</section>
<section>
<div>
<p>Second content goes here</p>
</div>
</section>
</main>
</body>
</html>
Note: Also you may use overflow: auto; instead of overflow-x: hidden; for this particular task only.
For your reference please visit below link: https://www.w3schools.com/css/css_overflow.asp
I have two divs - one is fixed on the left side of the page as a side nav, and the other I have a background image that I would like to be fluid, and cover the width of the div. I looked and couldn't find anything as specific as what I am looking for. Below is my code.
.geodeticContainer {
width: 100%;
min-width: 800px;
}
.content {
width: 100%;
box-sizing: border-box;
margin-left: 300px;
}
.image {
width: 100%;
background-image: url("images/geodetics.jpg") norepeat center center fixed;
z-index:999;
}
.description {
position: fixed;
width: 300px;
height: 100%;
background-color: #eaeaed;
padding: 20px;
color: #0072bc;
}
<div class="geodeticContainer">
<div class="description">
This is the content of the side bar. There will be a descriptive paragraph about the image on the right hand side.
</div>
<div class="content">
<div class="image"></div>
</div>
</div>
I apologize if that has been done and I just couldn't find it because I don't know how to describe what I am looking for. Appreciate any help I can get.
You can make the image responsive within it's div using flexbox.
I had to adjust the margin-left property a little and I replaced your image class with an <img> tag to simplify.
.geodeticContainer {
width: 100%;
min-width: 800px;
}
.content {
display: flex;
margin-left: 340px;
}
.content div img {
width: 100%;
}
.description {
position: fixed;
width: 300px;
height: 100%;
background-color: #eaeaed;
padding: 20px;
color: #0072bc;
}
<div class="geodeticContainer">
<div class="description">
This is the content of the side bar. There will be a descriptive paragraph about the image on the right hand side.
</div>
<div class="content">
<div><img src="images/geodetics.jpg"/></div>
</div>
</div>
I'm not sure this is what you want to achieve but hopefully this will help
UPDATE:
I updated the code, please check snippet below or go to jsfiddle.net - ps: re-size the screen to see responsiveness. Hope this help
body {
padding: 0;
margin: 0;
background-color: black;
color: black;
}
[class*="col-"] {
height: 200px;
background-color: white;
}
#img {
background: url("http://s10.postimg.org/3nmoewzq1/dramatic_landscape_191458.jpg") top left no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
<p>
This is the content of the side bar. There will be a descriptive paragraph about the image on the right hand side. This is the content of the side bar. There will be a descriptive paragraph about the image on the right hand side.
</p>
</div>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-10" id="img">
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
I have a site with two footers. One is very well behaved as a 'fixed' footer that is always visible at the bottom of the page. The other footer is larger and should be below all content, only appearing when all content is scrolled through (if the content is bigger than the page, it shouldn't be visible until you scroll to the bottom). However, it does need to be sticky so that if there's very little content it doesn't ride up and leave an awkward white gap.
Right now it's displaying in the middle of the page. :( Help?
html, body {
height: 100%;
width: 100%;
}
#PageContainer {
width: 100%;
height: 100%;
}
header {
width: 100%;
}
#Content {
position: relative;
background-image:url(Images/Golf%20Ball%20Texture.jpg);
background-repeat:repeat;
background-size: 150px auto;
width: 100%;
padding-left: 20px;
margin-left: -20px;
padding-right: 20px;
margin-right: -20px;
min-height: 90%;
}
footer {
width: 100%;
}
#MovingFooter {
clear: both;
position: absolute;
width: 100%;
background-color: #FFD600;
right: 0;
bottom: 0;
font-size: .9em;
}
#StickyFooter {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #787878;
padding-left: 20px;
margin-left: -20px;
padding-right: 20px;
margin-right: -20px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="Stylesheet" href="../style.css" type="text/css" />
<link rel="shortcut icon" href="Images/Logo%20Favicon.ico">
<title>Your Personality</title>
</head>
<div id="PageContainer">
<header>
</header>
<body>
<div id="Content">
</div> <!--id="Content"-->
<div id="MovingFooter">
<h2>Company Philosophy</h2>
<p>Footer content</p>
</div> <!--class="FooterThirds" -->
</div> <!-- class="ThirdsContainer" -->
</div> <!-- id="MovingFooter" -->
<div id="StickyFooter">
<p class="FancyFinePrint">© Copyright 2014 by Company Name. All Rights Reserved.</p>
<div id="FooterPartners">
<p class="FooterPartnerText">Proud Partners With:</p>
</div> <!-- id="FooterPartners" -->
</div> <!-- id="StickyFooter" -->
</div> <!-- id="PageContainer" -->
</body>
You're looking for a technique like FooterStickAlt, which keeps the footer below the content, but also keeps the footer at the bottom of the viewport if the content isn't as tall enough to push it down that far.
Put simply, everything except the footer gets wrapped in a containing element which has min-height: 100%, and then the footer is pulled up with a negative top margin. This particular technique necessitates knowing the height of your sticky footer.
https://css-tricks.com/snippets/css/sticky-footer/ and http://cssstickyfooter.com are the same idea.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.parent {
height: 100vh;
overflow: auto;
}
.first {
height: 100vh;
}
.second {
height: 100vh;
}
</style>
</head>
<body>
<div class="parent">
<div class="first">
<h1>haha</h1>
</div>
<div class="second">
<h1>haha</h1>
</div>
</div>
</body>
</html>
demo: http://codepen.io/anon/pen/zxKmyq
this code will give two scrollbars on the left.
However, if we change the code to
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { <!-- this is the only modification I made compared to the first code -->
margin:0;
padding:0;
}
.parent {
height: 100vh;
overflow: auto;
}
.first {
height: 100vh;
}
.second {
height: 100vh;
}
</style>
</head>
<body>
<div class="parent">
<div class="first">
<h1>haha</h1>
</div>
<div class="second">
<h1>haha</h1>
</div>
</div>
</body>
</html>
demo: http://codepen.io/anon/pen/gbwBQK
Then there will be only one scrollbar, which is desirable.
But I don't know how this works, i.e. why this simple modification will change the scrollbar.
It's because most, if not all, browsers have a default margin of 8px on the body element.
When this default margin is present, the height of the browser is no longer 100%. Thus, a scrollbar is present.
More specifically, you are giving the .parent element a height of 100% of the browser. In addition to the 8px (top + bottom) margins, there is an excess of space.
100% + 16px != 100%.
In your second example, usage of
* {
margin: 0;
padding: 0;
}
..effectively removes this default margin.
You could merely use
body {
margin: 0;
}
..for the same results.
Im having some problems getting the Sticky Footer to work on my site. If the content is smaller than the window the footer should stay at the bottom of the window and the dead space should be filled up with a div. I think the CSS Sticky Footer does this, but I cant get the "push div" to work push the content all the way down. As you can see my code isn't just body-wrapper-footer.
<body>
<div id="banner-bg">
<div id="wrapper">
<div id="header-bg">
<!-- header stuff -->
</div> <!-- end header-bg -->
<div id="content-bg">
<div id="content">
<!-- content stuff -->
</div> <!-- end content -->
</div> <!-- end content-bg -->
</div> <!-- end wrapper -->
</div> <!-- end banner-bg -->
</body>
body {
color: #00FFFF;
background-image: url("Images/img.gif");
font-size: 1em;
font-weight: normal;
font-family: verdana;
text-align: center;
padding: 0;
margin: 0;
}
#banner-bg {
width: 100%;
height: 9em;
background-image: url("Images/img2.gif"); background-repeat: repeat-x;
position: absolute; top: 0;
}
#wrapper {
width: 84em;
margin-left: auto;
margin-right: auto;
}
#header-bg {
height: 16em;
background-image: url("Images/header/header-bg.png");
}
#content-bg {
background-image: url("Images/img3.png"); background-repeat: repeat-y;
}
#content {
margin-right: 2em;
margin-left: 2em;
}
Im confused about where the CSS Sticky Footer-code should go in my case.
Edit, heres what I got and what I want to do:
alt text http://bayimg.com/image/gacniaacf.jpg
Your HTML is a tad strange. For example, why does banner-bg wrap around everything?
That said, in order to use Sticky Footer technique you need to wrap everything but the footer into a single DIV. So your <body> tag would only contain two top DIVs - wrapper and footer. All the stuff you currently have would go inside that wrapper DIV.
Note that Sticky Footer may not work for you if background images you're using include transparent areas as it relies on wrapper background being covered by the header.
Update: Ok, here's the version that works. "Sticky Footer" style sheet is taken from cssstickyfooter.com and should work in all modern browsers. I've streamlined your HTML a bit (there's no need for separate background layers based on your picture) but you can modify it as you like so long as you keep the basic structure in place. Also, since I don't have your images I've added solid background colors for illustration purposes, you'll need to remove them.
<html>
<head>
<style>
* {margin: 0; padding: 0}
html, body, #wrap {height: 100%}
body > #wrap {height: auto; min-height: 100%}
#main {padding-bottom: 100px} /* must be same height as the footer */
#footer {position: relative;
margin-top: -100px; /* negative value of footer height */
height: 100px;
clear:both;
}
/* CLEAR FIX*/
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden}
.clearfix {display: inline-block}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%}
.clearfix {display: block}
/* End hide from IE-mac */
/* Do not touch styles above - see http://www.cssstickyfooter.com */
body {
background-image: url("Images/img.gif");
background: #99CCFF;
color: #FFF;
font-size: 13px;
font-weight: normal;
font-family: verdana;
text-align: center;
overflow: auto;
}
div#banner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 9em;
background: url("Images/img2.gif") repeat-x;
background: #000;
}
div#wrap {
background: #666;
width: 84em;
margin-left: auto;
margin-right: auto;
}
div#header {
height: 16em;
padding-top: 9em; /* banner height */
background: url("Images/header/header-bg.png");
background: #333;
}
div#footer {
background: #000;
width: 84em;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="banner">Banner</div>
<div id="wrap">
<div id="main" class="clearfix">
<div id="header">Header</div>
<div id="content">
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content
</div> <!-- end content -->
</div> <!-- end main -->
</div>
<div id="footer">
Footer
</div>
</body>
</html>
Instead of modifying your existing styles (or using CSS Sticky Footer), its a lot easier for me to just redo it. So here goes:
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
}
#container {
height: 100%;
margin: 0 0 -200px 0;
position: relative;
}
#footer {
position: relative;
height: 200px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">Oh Beautiful Header</div>
<div id="content">Lots of Content</div>
</div>
<div id="footer">Stay Put Little Footer</div>
</body>
Basically the negative margin should match the height of the footer, height 100% needs to be applied to html/body, and the position relative should be declared.
Also in reference to the xHTML, notice how the "footer" div is not INSIDE the "container" div, but rather, outside of it (so that there are 2 separate container-like divs, container and the footer).
If your still having trouble, the main problems with your markup IS:
100% height needs to be declared for html and body tag.
negative margin is missing on the container div which is the #banner-bg
if footer is 100px tall, #banner-bg should have margin-bottom: -100px
position needs to be relative on both #banner-bg and the #footer
html { height: 100%;}
body {
color: #00FFFF;
background-image: url("Images/img.gif");
font-size: 1em;
font-weight: normal;
font-family: verdana;
text-align: center;
padding: 0;
margin: 0;
height: 100%;
}
#banner-bg {
width: 100%;
height: 100%;
background-image: url("Images/img2.gif"); background-repeat: repeat-x;
position: relative;
margin: 0 0 -200px 0;
}
#wrapper {
width: 84em;
margin-left: auto;
margin-right: auto;
}
#header-bg {
height: 16em;
background-image: url("Images/header/header-bg.png");
}
#content-bg {
background-image: url("Images/img3.png"); background-repeat: repeat-y;
}
#content {
margin-right: 2em;
margin-left: 2em;
}
#footer {
position: relative;
height: 200px;
}
and the rest:
<body>
<div id="banner-bg">
<div id="wrapper">
<div id="header-bg">
<!-- header stuff -->
</div> <!-- end header-bg -->
<div id="content-bg">
<div id="content">
<!-- content stuff -->
</div> <!-- end content -->
</div> <!-- end content-bg -->
</div> <!-- end wrapper -->
</div> <!-- end banner-bg -->
<div id="footer">
Footer Content
</div>
</body>
</html>
I'm not sure what Sticky Footer meant to do when the content is actually longer than your page height...
If it should be floating over the text while you are scrolling then I would use Javascript to calculate the bottom coordinates and place the footer on a new layer in the fixed position. This could be made quite cross-browser friendly as well...
It's great to be able to implement the sticky footer using CSS and HTML alone, but I'm not a big fan of adjusting my markup / document structure for something cosmetic.
I much prefer a JavaScript approach, no graceful degradation. If no JS, no sticky footer. I typically use jQuery to implement:
jQuery
$(window).resize(function() {
if ($('body').height() < $(window).height()) {
$('#footer').addClass('fixed');
}
else {
$('#footer').removeClass('fixed');
}
}).resize();
CSS
#footer.fixed { position: fixed; bottom: 0; width: 100%; }
here you can find some code as follows
Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).
In CSS:
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.
In HTML Body:
Your website content here.
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2013</p>
</div>