I am trying to implement a sticky footer which has three divs stacked inside the footer div. Now if I load a page where I keep the content block empty, the footer is not sticky anymore :(. I was wondering what am I doing wrong?
CSS (Code Stripped to show only the relevant CSS):
/* Custom Sticky Footer */
.wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -553px; /* Should be -553 px, but somehow doesnot work. This is a hack */
}
.push,
.footer {
height: 553px;
}
.footer{
background-color: #fff;
}
#footer-margin-top{
height: 20px;
}
#footer-top{
background-color: #333333;
height:402px;
}
#footer-bottom{
background-color: #232323;
height: 131px;
border-top: 1px solid #444444;
}
And HTML (Code Stripped to show only the relevant divs):
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="wrap">
<div class="container">
</div>
<div class="push"></div>
</div>
<div class="footer">
<div id="footer-margin-top"></div>
<div id="footer-top">
<div class="row-fluid">
<div class="span12 social">
</div>
</div>
</div>
<div id="footer-bottom"></div>
</div>
</body>
</html>
JSFiddle
Just add
html, body { height : 100% }
see on cssdesk or jsfiddle
If I understand correctly with what you mean with sticky footer, then I suggest you to use this code :
.footer{
background-color: #fff;
position:fixed;
bottom:0; //set sticky on the most bottom of your pages
}
Related
I've been testing my site on multiple devices, and when testing on a screen with high resolution there is all this extra white space underneath the footer.
How do I make the height dynamic, fixing this issue?
My HTML is as follows:
<div class="contact">
<div class="content--container">
........
</div>
<div class="container">
<div class="columns is-multiline">
<div class="column is-12">
.......
</div>
</div>
</div>
</div>
<div class="footer">
......
</div>
A quick and easy fix would be to add a min-height to your .contact element.
Assuming it sits directly insider your body element, and if your footer height is 200px, you could do:
.contact {
min-height: calc(100% - 200px);
}
This does require that your body is either position:static; (the default) or has a min-height of 100%.
Add a min-height to your body like this:
body {
min-height: 100%;
}
Change your footer position to absolute like this:
.footer {
position: absolute;
}
Position and add width to your footer like this:
.footer {
position: absolute;
bottom:0;
left:0;
width: 100%;
}
Try to add these for CSS (it's from http://mystrd.at/modern-clean-css-sticky-footer/):
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
HTML template for that is:
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
Next option is to use flexbox like these example: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
In these example body has class="Site" and content also have a class called class="Site-content" and looks like these:
<body class="Site">
<header>Your header</header>
<main class="Site-content">
<div> Text </div>
</main>
</body>
CSS for these example looks like:
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
Full source for the Site component used in this example you can find here: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css
Another easy way to make a footer look like it has a dynamic height (if a tall footer height doesn't matter to you) is by changing the body's background-color to match the footer's. Then you can give one of your containers a 100% width and apply a different background-color.
That gives you the visual separation of the content and the footer without having to position or resize the footer.
Heres's the CSS:
body {
background-color: tomato;
height: 100%;
}
header {
color: white;
padding: 20px;
}
.container {
background-color: white;
height: 200px;
padding: 20px;
width: 100%;
}
footer {
background-color: tomato;
color: white;
padding: 20px;
}
and the HTML:
<header>
<h1>This is my header</h1>
</header>
<div class="container">
<p>This is my content</p>
</div>
<footer>
<p> this is my footer that looks like it has a variable height.</p>
</footer>
Link to a working example:
http://codepen.io/Brydave/pen/dNQJMb
I am new in Grails and displaying list of users by using list.gsp page but when list have less items say 1 or 2 then footer is appears after two record instead of taking it's fix position at bottom of browser.
I have tried by updating my css in main.css and also applying css to 'g:layoutBody' tag.but result is same.
Any one can please help me how to set footer at bottom.
i am using following css in 'g:layoutBody' tag-
<g:layoutBody style="position: fixed;left: 0px;bottom: 30px;width: 100%;"/>
my main.css has this code -
body {
background: #ffffff;
color: #333333;
margin: 0 auto;
max-width: inherit;
margin-left:20px;
margin-right:20px;
overflow-x: hidden; /* prevents box-shadow causing a horizontal scrollbar in firefox when viewport < 960px wide */
-moz-box-shadow: 0 0 0.3em #255b17;
-webkit-box-shadow: 0 0 0.3em #255b17;
box-shadow: 0 0 0.3em #255b17;
}
and footer css is
.footer {
background: #abbf78;
color: #000;
clear: both;
font-size: 0.8em;
margin-top: 1.5em;
padding: 1em;
min-height: 1em;
}
.footer a {
color: #255b17;
}
This is a purely HTML/CSS issue, so the same applies for GSPs and standard HTML pages.
What you're after is a "sticky footer", and it can be most easily achieved by wrapping your content in a container which pushes the footer to the bottom of the page.
Here's a working example (updated with content from question): http://jsfiddle.net/spikeheap/ujttV/2/
The key bits are to structure the HTML with something which extends below your content:
<body>
<div class="wrapper">
<div id="content">
...
</div>
</div>
<div class="footer">
This is a footer message
</div>
</body>
Then you can use CSS to set the height of the wrapper to be 100%:
html, body{
height: 100%;
}
.wrapper {
min-height: 100%;
}
Finally your footer can be clever and pull itself up from below the bottom of the page by using a negative margin-top:
.footer {
position: relative;
margin-top: -200px;
height: 200px;
background-color: #cecece;
}
You'll notice pretty quickly that if you make the window really small, or grow your content, that it's truncated, so your content block should have padding equal to the footer height (to make sure it pushes it down when it fills the space:
#content {
padding-bottom: 200px;
}
Update
The layoutBody tag is used for rendering the body of your gsp, so you could have layouts/mytemplate.gsp:
<!DOCTYPE html>
<html>
<head>
<g:layoutHead />
</head>
<body>
<div class="wrapper">
<div id="content">
<g:layoutBody />
</div>
</div>
<div class="footer">
This is a footer message
</div>
</body>
And then in (for example) index.gsp:
<head>
<meta name="layout" content="mytemplate">
</head>
<body>
Welcome to my website. Check out the amazing footer
</body>
I have two pages that differ only by the content contained in the content-box div tag. You can see them here:
Tall Version
Short Version
I have included the html/css code for the short version below. I would like to have the short version display so that if the amount of content does not fill up the entire page, the footer will still stick to the bottom AND the entire area between the header and the footer in the middle of the screen is the white corresponding to the content-box div.
What do I need to change to accomplish this?\
Update 1 I made a new page doing what #smallworld suggested. It can be seen here. This has a sticky footer, but I would like the outside "container" box to extend the height of the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii">
<style type="text/css">
#main {
width: 100%;
min-height: 100%;
height: 100%;
}
body {
width: 100%;
}
#header,#content { position:relative; right:0;left:0}
#header{
height:75px; top:0;
background: #4396CA;
}
#footer{
width: 100%;
position: relative;
height:50px;
bottom: 0;
left: 0;
background: #4396CA;
}
#content{
top:00px;
background: #F0F8FF;
min-height: 100%;
height: 100%;
}
#content-box {
width: 950px;
margin: 0 auto;
background-color: #FFFFFF;
text-align: left;
border-right: 1px solid #B0B0B0;
border-left: 1px solid #B0B0B0;
padding-bottom: 20px;
padding-top: 20px;
min-height: 100%;
height: 100%;
}
</style>
<title>EmbeddedAnalytics - Test Page</title>
</head>
<body>
<div id="main">
<div id="header">this is header</div>
<div id="content">
<div id="content-box">
<b>Content does not take up all of box. But still want footer to "stick" to bottom</b><br>
line1<br>
line2<br>
line3<br>
Last Line<br></div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
EDIT: See jsfiddle at http://jsfiddle.net/smallworld/gcpNh/ - I have used class="xyz" instead of using id="xyz" in your example. I know that stretching to 100% height shouldn't be as difficult and stressful, but in reality, it is. I feel your pain and that's why trying to help as much as I can. I made one more correction - it should have been padding-bottom, not margin-bottom on "main" class.
CSS:
html { height:100%;min-height:100% !important;margin:0;padding:0; /** see height, min-height values here. **/ }
body{ overflow:auto;padding:0;margin:0;height:100%;min-height:100% !important; /** see height, min-height values here. **/ }
.main {
position:relative;min-height:100%; height:auto; background:cyan;
/** see position, height, min-height values here. Height auto to make sure
that main div resizes if window size changes after initial rendering **/
}
.header { display:block;height:50px;position:relative;background:yellow;text-align:center;padding:10px; }
.content { padding:20px;margin-bottom:50px; /** bottom margin here to make sure that footer does not cover the content area **/ }
.footer { display:block;position:absolute;bottom:0;left:0;width:100%;height:50px;background:red;color:white;text-align:center;padding:10px; /** see position, top, left, and width properties here. **/ }
HTML
<div class="main clearfix">
<div class="header">header</div>
<div class="clearfix content">
<h1>Goal of this fiddle is to demonstrate sticky footer implementation</h1>
And domonstrate this with least amount of CSS and HTML, without using any extraordinary hacks.
<p>Your content goes in here. Add lot more content, and resize browser window to several different sizes to see how your page is rendered as compared to with very little content.</p>
</div>
<div class="footer">footer</div>
</div>
I have a basic layout where I'd like the footer to take up remaining portion of the viewport after the content. Right now when I use the code below it draws a scrollbar because the height is being calculated as footer height (100%) plus content height (varies), is there a way to prevent the scrollbar without calculating the height of the content with javascript?
html,body{height:100%;}
.content {position: relative;}
.footer{height: 100%; min-height:100%; background-color:green; overflow: hidden; padding-bottom: -2000px;}
<div class="content">
content
</div>
<div class="footer">
Footer
</div>
<html><head>
<style type="text/css">
body{overflow:hidden;}
.content {position: relative;}
.footer{height: 100%; background-color:green; padding-bottom:-2px;margin:0px;}
</style>
</head>
<body>
<div class="content">
content
</div>
<div class="footer">
Footer
</div>
</body>
</html>
If it's only for presentational purposes, I would do something like this:
HTML
<div id="wrap">
<div id="content">
Your main page content here
</div><!-- #content -->
Your footer content here
</div><!-- #wrap -->
CSS
html, body {
height: 100%;
background: #F0F0F0;
padding: 0;
margin: 0;
overflow: hidden;
}
#wrap {
height: 100%;
width: 800px;
background: #ccc;
margin: auto;
}
#content {
background: #fff;
}
I have a layout with header, footer, body content. It is a pretty standard layout. We have reports that sometimes extend past the hard coded width' But we need the left nav and the body content to the same line. With this HTML code below, if the width extends too far (say there is a content in the body that has more than 900+ width) then the body content flows below the left nav.
Basically, we want the content and left nav to remain on the same row regardless how much content is actually in that body content section. Is there a way to force the browser to keep those to items on the same row ALWAYS.
<html>
<head>
<title>Test</title>
<style type="text/css">
#bodyFull {
}
#header {
border: 3px solid #f00;
background-color: #99F;
width: 900px;
}
#footer {
border: 3px solid #909;
background-color: #F99;
width: 900px;
}
#leftNav {
float: left;
width: 150px;
height: 800px;
border: 2px solid #777;
background-color: #FF9;
}
#bodyContent {
float: left;
border: 2px solid #707;
background-color: #AAA;
width: 1024px;
height: 1024px;
overflow: hidden
}
#mainBody {
width: 920px;
}
</style>
</head>
<body>
<div id="bodyFull">
<div id="header">
The Header
</div>
<div id="mainBody">
<div id="leftNav">
Left Nav
</div>
<div id="bodyContent">
The Body
</div>
The End of Main Body
</div>
<div style="clear: both"></div>
<div id="footer">
The Footer
</div>
</div>
</body>
</html>
Small typo: bodyContent to rest at the same row as the leftNav.
/* !!! CAN THIS SECTION REMAIN ON THE SAME ROW AS THE LEFT Nav, EVEN THOUGH IT EXTENDS PAST THE 'HEADER/BODYFULL' width
*/
Ok, forget my margin-left suggestion, misunderstood the problem. If you want to make sure that div is always, say, 750px (so that plus the left nav is the same width as the header) then set its width to 750px and set either overflow: auto to add a scrollbar on that part of the page where necessary, or overflow: hidden to just truncate it.
Scratch what I said before, I misunderstood you. Try out the code below and let me know if it is what you are looking for. Otherwise you are going to need be more specific what you need. However you might want to check out this liquid layout and then put a wrapper div around it with a set width.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
#bodyFull {
}
#header {
border: 3px solid #f00;
background-color: #99F;
width: 900px;
}
#footer {
border: 3px solid #909;
background-color: #F99;
width: 900px;
}
#leftNav {
float: left;
width: 150px;
height: 800px;
border: 2px solid #777;
background-color: #FF9;
}
#bodyContent {
float: left;
border: 2px solid #707;
background-color: #AAA;
width:748px;
height: 1024px;
overfloat:auto;
}
#mainBody {
width:906px;
overfloat: auto;
}
</style>
</head>
<body>
<div id="bodyFull">
<div id="header">
The Header
</div>
<div id="mainBody">
<div id="leftNav">
Left Nav
</div>
<div id="bodyContent">
The Body
</div>
The End of Main Body
</div>
<div style="clear: both"></div>
<div id="footer">
The Footer
</div>
</div>
</body>