I am using separate header.php and footer.php files which I include in the pages I want to place them in. now my header works well but my footer doesn't stick to bottom of page and when I tried to fix it by setting position: fixed; it takes in some portion of my content means covers some of content.
*{
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
background-color: #eeeeee;
}
.logo img {
background-image: url(../img/menu_bg.png);
width: 150px;
height: 38px;
padding-top: 5px;
}
.search_box {
color: #198C9E;
background-color: #198C9E;
position: absolute;
top: 6px;
margin-left: 155px;
}
.headerMenu{
background-color:#5DBEDE;
}
#wrapper {
background-color:#5DBEDE;
}
.footer {
position: absolute;
bottom: 0;
width:100%;
height: 80px;
background-color:#5DBEDE;
}
For test purposes, my footer.php is empty
<?php
include ( "./inc/connect.inc.php" ); ?>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="js/main.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
</head>
<body>
<div class="footer">
</div>
</body>
</html>
add padding-bottom: 80px; to content block, while position fixed.
If think globally, and content height more than screen height:
.content {
min-height: 100vh;
padding-bottom: 80px;
}
body {
position: relative;
}
.footer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
height: 80px;
}
I found a very good way to put the footer at the bottom of the screen.
<div class="Content class">
content will go here.
</div>
<div class="footer">Footer</div>
The Stylesheet
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
Note: The main logic to add the footer at the end and add the style mentioned to it. For HTML and body add the style.
If you want the footer to stick to the bottom, no matter if the content is tall enough, you should use:
.footer{
position:fixed;
bottom:0;
width:100%;
height: 80px;
}
Since your footer has a fixed height, you can use for body:
body{
padding-bottom:80px
}
This way you make sure the content does not get cut of.
See example here https://jsfiddle.net/05zh0j6u/
Related
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 2 years ago.
I am working on my first ever website and it seems that I've run into a problem. I've created a footer, however it does not stay at the bottom.The footer messes up everything else in the page and distorts my items. What should I add in order make my footer stick to the bottom with causing any trouble to the rest of my page?. Here is my code.
* {
margin: auto;
padding: auto;
box-sizing: border-box;
font-family: Century Gothic;
}
header {
height: 15%;
background-size: cover;
background-position: center;
background-color: #ebebeb;
border-bottom: 5px solid #A9A9A9;
position: relative;
}
html,
body {
font-size: .80em;
margin: 0%;
padding: 0%;
color: #696969;
height: 100%;
width: 100%;
}
.footer {
background: #bfbfbf;
color: #d3d3d3;
height: 300px;
position: relative;
}
s .footer .footer-content {
border: 1px solid red;
height: 400px;
}
.footer .footer-bottom {
background: #343a40;
color: #686868;
height: 50px;
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
.footer-section-socials h1 {
margin-left: 6%;
margin-top: -1%;
font-weight: 50;
font-size: 150%;
color: black;
}
.logo-footer h1 {
padding: 1.5%;
margin-left: 3%;
font-family: Leckerli One;
color: black;
font-size: 3.1875rem;
}
.footer-about {
margin-left: 2%;
margin-right: 0%;
}
<footer class="footer">
<div class="footer-content">
<div class="footer-section-socials">
</div>
<div class="footer-section links">
</div>
<div class="footer-bottom">
© #.com | Designed by #
</div>
</div>
</footer>
Help in advance!
Your footer is not sticking to the bottom of the page, because the height of the gray div doesn't span the entire height of the webpage. What you can do to fix this problem is :
<div class='container'>
<div class='footer'>
</div>
.container{
height:100vh;
border:3px solid red;
position:relative;
}
.footer{
position:absolute;
bottom:0%;
width:100%;
height:30px;
background:gainsboro;
}
You have to use fixed position to make it stick to the bottom
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
There are several ways to do this, I added a default html structure to the snippet:
Position absolute footer and relative, 100vh min-height body:
body, html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
position: relative;
min-height: 100vh;
padding-bottom: 50px;
}
body .footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<section class="main"></section>
<footer class="footer"></footer>
</body>
</html>
Using flex, min height 100vh body and a section above the footer with flex 2:
body, html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
}
body .main {
flex: 2 0 auto;
}
body .footer {
flex: 0 0 50px;
display: block;
width: 100%;
background-color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<section class="main"></section>
<footer class="footer"></footer>
</body>
</html>
Using a 100vh min-height body, a section with calc height and a fixed height footer:
body, html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: block;
}
body .main {
min-height: calc(100vh - 50px);
}
body .footer {
height: 50px;
display: block;
width: 100%;
background-color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<section class="main"></section>
<footer class="footer"></footer>
</body>
</html>
Fixed position footer (always visible in viewport):
body, html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body .footer {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<section class="main"></section>
<footer class="footer"></footer>
</body>
</html>
You should normally have a navigation bar, a page body and a footer.
The page body should take up all the space between the navigation and the footer.
Least hackish way is using Flex. Try the following:
body {
min-height: 100vh;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.navigation {
height: 60px;
width: 100%;
background: blue;
}
.content {
height: 100%;
width: 100%;
display: flex;
flex-grow: 1;
}
.footer {
height: 100px;
width: 100%;
background: red;
}
<body>
<div class="navigation"></div>
<div class="content">Test content</div>
<div class="footer"></div>
</body>
I want to have a footer at the bottem of my page.
I have followed a lot of different tutorials, but it won't work.
when i scale my screen until there is a scrollbar the footer is at the bottem of the window and not at the end of the page.
this is my css:
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body{
position: relative;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
min-height: 100%;
padding-bottom: 40px;
margin: 0;
}
#footer{
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin-left: 16%;
margin-right: 16%;
font-size: 11px;
margin-top: 20px;
margin-bottom: 15px;
width: 68%;
}
html structure:
<!DOCTYPE html>
<html lang="nl">
<body>
<nav>
....
</nav>
<div id="content">
....
</div>
<div id="footer">
....
</div>
</body>
</html>
Images:
the footer at the bottem of the window
when I scroll down
Is there somebody who can help me?
thank you in advance!
There must be something else, because your code works ok with that example. Are you using iframes? Please try to put a snippet
Also if you have an element with float positioning you should put a <div style='clear:both>`before the #footer div, floating elements could do a lot of weird things if you don't clear.
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body{
position: relative;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
min-height: 100%;
padding-bottom: 40px;
margin: 0;
}
#footer{
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin-left: 16%;
margin-right: 16%;
font-size: 11px;
margin-top: 20px;
margin-bottom: 15px;
width: 68%;
}
<html>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="footer"> footer</div>
</body>
</html>
Here is an awesome way to stick a footer at the bottom of your page, without using height: 100%.
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
<body class="Site">
<header>header stuff!</header>
<main class="Site-content">Main Content stuff</main>
<footer>footer stuff!</footer>
</body>
The code:
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
How can I place the footer at the bottom of the page? I've tried experimenting with padding, bottom and margin but I haven't been very successful so far. Can someone tell me how to place the footer at the bottom of the page? Thanks
you can do this one sir:
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: fixed;;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
text-align:center;
}
HERE MY CODE
You need to set body height to 100%. Currently the body covers only upto the content you have. There was no explicit height set for the body element.
Since body needs to calculate 100% of the parent element, set html height to 100% as well.
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
If you aim to "fix" your element to the bottom of the screen, set:
position: fixed;
bottom: 0;
On a side note, it might be a good idea for you to start learning about HTML5 elements like "footer" instead of using divs for everything. Also note that id's are unique and styling is best applied in mass/generically (use classes instead).
I'm trying to put together a page that has a Header, navigation tabs that float over the bottom of the header, body content and then a footer. This should be fairly easy, but I'm running into a strange result.
The menu has to float over the header image, as that image may be static, or it may be a slider... or it may be an embedded Google map.
I've mocked up the code below and essentially the CSS for it. The problem is that even though I have the footer set to the bottom, when I view the page and the body has enough content, the footer seems to be floating over the body content and the body content extends past the bottom of the footer.
Here is my code.
Would appreciate someone smarter than me looking at this and making any suggestions.
<style>
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
padding:0;
margin: 0;
}
#header > img{
width: 100%;
}
.mynavigation{
margin-left: auto;
margin-right: auto;
color: #fff;
}
.mynavigation li {
display: inline-block;
text-decoration: none;
padding: 15px 25px 30px 25px;
z-index: 100;
color: #fff;
margin-top: 310px;
font-family: avenirltstd-black;
text-transform: uppercase;
letter-spacing: 5px;
}
.mynavigation li.is-active {
color: #474747;
background-color: #fff;
}
.mynavigation li a{
color: #fff;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #474747;
text-align: center;
}
</style>
<div id="header">
<img src="/images/myimage" />
</div>
<div id="mynavigation">
<!-- css makes this a tab menu and it needs to position at the bottom of the image <div> -->
<!-- so it looks like a white tab that is merged wit the whit body to look as if they are whole/together -->
<ul>
<li>Home</li>
<li>Examples</li>
<li>Other</li>
<li>Last</li>
</ul>
</div>
<div id="bodycontent">
<!-- page content goes here and has a white background -->
</div>
<div id="footer">
<!-- footer content here -->
</div>
Working Fiddle http://jsfiddle.net/u2qL4j8a/2/ You had wrongly mentioned the CSS selector for navigation and footer as classes whereas in the HTML you have mentioned these as IDs.
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
padding:0;
margin: 0;
}
#header > img{
width: 100%;
}
#mynavigation{
margin-left: auto;
margin-right: auto;
color: #fff;
position: fixed;
top: 0;
left: 0;
}
#mynavigation li {
display: inline-block;
text-decoration: none;
padding: 15px 25px 30px 25px;
/*z-index: 100;
color: #fff;
margin-top: 310px;*/
font-family: avenirltstd-black;
text-transform: uppercase;
letter-spacing: 5px;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #474747;
text-align: center;
}
Make your HTML structure like so:
<html>
<head>
</head>
<body>
<div id="header"></div>
<div id="mynavigation"></div>
<div id="content">
<!-- CONTENT STUFF -->
</div>
<div id="footer"><!-- FOOTER STUFF --></div>
</body>
</html>
...And your CSS like so:
html{
padding: 0;
margin: 0;
}
body{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#mynavigation{
position: absolute;
top: 350px;
height: 50px;
width: 100%;
}
#content{
position: absolute;
top: 350px;
bottom: 100px;
width: 100%;
overflow: auto;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
}
I would like to know how to make main content appear in front of background in the middle of the page below header and above footer. Like on this site for example. http://cdn.webfactore.co.uk/web_design_example_551_large.jpg I am not sure if it deals with heights and widths or anything else. Help me please. How do I make main content appear in front of background in middle?
Here's a quick HTML5 skeleton
<!doctype html>
<html>
<head>
</head>
<body>
<header>
<div id="header-wrapper">
</div>
</header>
<div id="content">
</div>
<footer>
<div id="footer-wrapper">
</div>
</footer>
</body>
</html>
html,
body {
background: #ccc;
font: 62.5% Arial, Helvetica, sans-serif; /* --- Setting body font at 62.5% makes 1.2em equal to 12px --- */
line-height: 1.7em;
letter-spacing: 1px;
color: #222;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
header {
background: #555;
position: relative;
width: 100%;
height: 60px;
margin: 0;
padding: 0;
}
#header-wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
padding: 0;
}
#content {
background: #fff;
position: relative;
width: 960px;
height: auto;
margin: 0 auto;
padding: 0;
}
footer {
background: #555;
position: absolute;
width: 100%;
height: 200px;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
}
#footer-wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
padding: 0;
}