I have read all the tutorials on how to make the footer at the bottom of the webpage but still i'm unable to do it for my site.
The links i have referred are
How do you get the footer to stay at the bottom of a Web page?
Making my footer stick to bottom of the page
Ways to stick footer to the bottom a page
making the footer stick the bottom
None of it worked..!
CSS
#footer1 {
clear: both;
background-color: #333;
width: 1200px;
min-width: 100%;
width: 100%;
bottom: 0;
position: relative;
height: 50px;
border-top:5px solid #1b9bff;
}
Here is the dummy fiddle of my site
Fiddle
This is the fiddle i have tried but there is a bug in it too
http://jsfiddle.net/andresilich/fVpp2/1/
Try this:
<div id="container">
<div id="content"></div>
</div>
<div id="footer">My Sticky Footer</div>
CSS:
html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content { padding-bottom: 3em; }
Add/Edit as following
#body {
margin-bottom: 85px;
position: relative;
}
#footer1 {
position: fixed;
}
I guess this is what you want
* html #form1 {
height:100%;
}
#form1 {
min-height: 100%;
position: relative;
}
#body {
padding-bottom: 50px; /* padding-bottom should be equal to the footer height (this keeps the footer from overlapping the content) */
}
#footer1 {
position: absolute;
width: 100%;
clear: both;
bottom: 0;
padding: 0;
margin: 0;
}
Following the code of this method - you need to to:
1) Place your footer outside the form
2) Add height: 100% on form
3) Set negative bottom margin to form according to the height of the footer.
form {
min-height: 100%;
height: 100%;
margin: 0 auto -150px; /*footer 150px high */
}
Modified Fiddle
Related
Ok i have problem to force footer on bottom when not enough content to push it there naturally.
I partially solved problem. It is rly simple design, i have header, content and footer, all inside div wrapper.
html,
body {
margin:0;
padding:0;
height:100%;
font: sans-serif;
}
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding: 2% 5%;
max-width: 940px;
margin: 0 auto;
padding-bottom:80px; /* Height of the footer element */
clear: both;
background-color: yellow;
}
footer {
background:#ffab62;
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
font-size: 0.75em;
text-align: center;
padding-top: 30px;
clear: both;
color: #ccc;
}
I have used background color to see position of elements on page. So when there is not enough content footer is on bottom and it is OK. When there is more than enough content footer is overlapping some of it, it gets fixed when i put position on footer relative instead of absolute but then on pages where there is not enough content footer is not on bottom.. Fixing one other is not good and fixing that other first page is not good.. Is there any solution that can help me solve this...
Adjust your min-height: to the minimum value where you want your footer to end up, 100% will put it right below your content (which should be the default anyway without even declaring) which you said isn't long enough; make a minimum-height: 900px; or similar to where you want the minimum end point to be where the footer will live.
If the footer is in the correct place in the HTML but it is floating up. Then consider the below.
display:inline-block;
add to footer.
footer {
display: inline-block;
}
If these don't work, show your HTML!
You nearly did it :)
Your content div is overlaping the sticky footer because of its height. Just use a height: calc(100% - footer_height); and start your content where your header finishes.
This is a JSFiddle example of this usage.
CSS file
html,
body {
margin: 0;
height: 100%;
}
.container {
min-height: 100%;
position: relative;
}
.header {
background: #d6d6d6;
position: absolute;
height: 80px;
width: 100%;
top: 0;
left: 0
}
.content {
position: absolute;
top: 80px;
left: 0;
width: 100%;
height: calc(100% - 80px);
background: yellow;
}
.footer {
background: #d6d6d6;
position: absolute;
height: 80px;
bottom: 0;
left: 0;
width: 100%;
clear: both;
}
I hope it is useful.
Background: On small screens when the keypad is up and the footer sits on its top then it covers the input fields in the content area.
Here are the requirements (some borrowed from [here][1]):
The footer should be visible if the content above it is shorter than the user’s viewport height.
If the content is taller than the user’s viewport height, then the footer should disappear from view and rest at the bottom of the page, as it would naturally.
This must be done without JavaScript
The header must be fixed at the top
The most important part is only the content can have a scroll-bar if necessary
It has to work on Android 4.x, IOS >=7.1 WebView, WP8.1 Web Browser element
This is how I make the content scrollable now while putting the footer to the bottom.
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#wrapper {
min-height: 100%;
position: fixed;
}
header {
height: 72px;
background-color: red;
}
#content {
overflow: auto;
border-bottom: 1px solid red;
margin-bottom: 50px;
}
footer {
height: 50px;
background-color: black;
position: absolute;
bottom: 0;
top:auto;
left:0px;
width:100%;
}
Update1
This is what I could come up with so far.
http://jsfiddle.net/gfqew5un/3/
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#wrapper {
min-height: 100%;
position: fixed;
}
header {
height: 72px;
background-color: red;
}
#content {
overflow: auto;
border-bottom: 1px solid red;
margin-bottom: 50px;
}
footer {
height: 50px;
background-color: black;
position: absolute;
bottom: 0;
top:auto;
left:0px;
width:100%;
}
It's close to my final goal but the problem with this solution comes up when the content is longer than the viewport. In that case the footer goes out of the screen but I want it to stay at the bottom while the content gets a scroll-bar and stretches till the top of the footer. So a hard coded max-height on content won't work. I need something more dynamic.
You should use position:relative to make sure the footers position is right under the content.
if you use max-height to your content div in combination with overflow: auto the scrollbar appears.
This is the CSS code:
header{
height: 72px;
background-color: red;
position: relative;
left: 0px;
right:0px;
overflow: visible;
}
#content{
overflow:auto;
position: relative;
max-height:200px;
}
footer{
height: 50px;
background-color: black;
position: relative;
}
Link to JSFiddle
You can easily achieve this effect using flex option from CSS3.
HTML:
<header>
<h1>Your header</h1>
</header>
<div id="content-wrapper">
<div id="content">
Lorem ipsum dolor
</div>
<footer>
footer content
</footer>
</div>
CSS:
html {
height: 100%
}
body {
display: flex;
flex-direction: column;
height: 100%;
}
#content-wrapper {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
}
#content {
flex: 1;
}
footer {
height: 35px;
padding-top: 20px;
}
https://jsfiddle.net/puybgmps/
First off, similar but never answered questions:
vertically-scrolling-percentage-based-heights-vertical-margins-codepen-exampl
scroll-bar-on-div-with-overflowauto-and-percentage-height
I have an issue with scrolling a center part of the web page while its height needs to be auto.
Here is a fiddle
The header needs to be on top at all times, meaning I don't want the body to become larger than 100%.
However the div #messages can become larger, and that div needs to scroll on its own.
The #messages has a margin-bottom to leave room for the fixed bottom div.
I tried making the div #messages with box-sizing: border-box; and making it height:100% and padding to keep it in place but this was a really nasty looking solution and the scroll bar was the full page height instead of only the inner part.
Any help would be greatly appreciated.
You want something like This
Or maybe - his big brother..
Pure CSS solution, without fixing any height.
HTML:
<div class="Container">
<div class="First">
</div>
<div class="Second">
<div class="Content">
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.First
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Second
{
position: relative;
z-index: 1;
/*for demonstration only*/
background-color: #6ea364;
}
.Second:after
{
content: '';
clear: both;
display: block;
}
.Content
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
You could try the following.
You HTML is:
<div id="container">
<div id="header">The header...</div>
<div id="content">
<div id="messages">
<div class="message">example</div>
...
<div class="message">example</div>
</div>
<div id="input">
<div class="spacer">
<input type="text" />
</div>
</div>
</div>
</div>
Apply the following CSS:
html, body {
height: 100%;
}
body {
margin:0;
}
#header {
background:#333;
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 45px;
overflow-y: scroll;
}
#messages {
overflow: auto;
}
#messages .message {
height: 79px;
background: #999;
border-bottom: 1px solid #000;
}
#input {
position:fixed;
bottom:0;
left:0;
width:100%;
height: 45px;
}
#input .spacer {
padding: 5px;
}
#input input {
width: 100%;
height: 33px;
font-size: 20px;
line-height: 33px;
border: 1px solid #333;
text-indent: 5px;
color: #222;
margin: 0;
padding: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/5Y8gq/
First, set the height of 100% to the html and body tags, which allows you to reference the view port height.
You want the #header to be fixed towards the top of the page using position: fixed, similarly for your footer #input.
The key is to use absolute positioning on #content to stretch it between the bottom edge of the header and the top edge of the footer, and then apply overflow-y: scroll to allow it to scroll the content (list of messages).
Comment
The source code for the #input block may be placed outside of the #content block.
I am building a website and I am facing some problems with the scrollbar for divs. I have a fixed header and footer and the divs in between must stay between the header and footer. In case of overflow a scroll will appear.
What I am Trying is similar to How to get a scrollbar in a div with fixed header and footer?
But I cant make it work correctly.
JS Fiddle of What I Am Trying
Fiddle
I could make it work by giving body{height: 84%;} but it will different in different browsers.
EDIT:
Now that jsfiddle is back...
Here is an updated fiddle for what you wanted
the following is the main change that was necessary:
div[role="main"]
{
height: 100%;
background: pink;
margin: -70px 0 -30px;
padding: 70px 0 30px;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #4CD3BF;
}
Do something like this:
Not much content: CODEPEN1
Lots of content: CODEPEN2
Markup
<div class="container">
<header></header>
<div class="content"></div>
<footer></footer>
</div>
CSS
/* Assuming header and footer height of 64px */
.container
{
height: 100%;
background: pink;
margin: -64px 0;
padding: 64px 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.content {
overflow:auto;
height:100%;
}
header
{
height: 64px;
background: purple;
position: relative;
z-index:1;
}
footer
{
height: 64px;
background: gray;
position: relative;
z-index:1;
}
there are more than 1 answers to this problem. the easiest way to do this is to wrap the main content (so no header and footer) in a absolute positioned div. set the divs to to the bottom of the header and the bottom to the top of the footer eg
fiddle: http://jsbin.com/onipiq/2/edit
css :
body{
margin: 0;
padding: 0;
}
header{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100px;
background: #eee;
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
background: #eee;
}
.contentContainer{
position: absolute;
width: 100%;
top: 100px;
bottom: 100px;
overflow-y: scroll;
}
.content{
position: relative;
width: 960px;
margin: 0 auto;
}
Note that this example will not scroll on most touch devices but will work fine on desktop.
My simple layout contains header, main section and footer. Footer pushed to bottom of a page. And I want main section to take all the space between header and footer. Here is what I've done: http://jsfiddle.net/5d3m9/
HTML
<div class="wrap">
<header>header</header>
<div class="main">lorem2000 </div>
<div class="clear"></div>
<footer>#Copyright</footer>
</div>
CSS
html, body {
height: 100%;
}
body {
margin: 0;
}
header {
height: 150px;
background: orange;
}
.wrap {
min-height: 100%;
position: relative;
overflow: hidden;
}
.main {
background: #00eaea;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
.clear {
height: 50px;
}
footer {
background: #dadada;
height: 50px;
width: 100%;
position: absolute;
bottom: 0;
}
Is there any other/better way to achieve this? (without padding-bottom: 32767px; margin-bottom: -32767px;)
Apply the following style to .main
.main {
background: #00eaea;
top: 150px;
bottom: 50px;
position:absolute;
width: 100%;
}
http://jsfiddle.net/5d3m9/1/