I had a very nice idea to make my project much prettier.
I want that the footer is standard like in the picture below:
And when i scroll further down now, that the footer goes up and bellow it is all the stuff like the "Impressum" and "Contact".
I searched the Internet for various solutions but couldn't find something fitting.
I hope you can help me.
Code of my footer:
HTML:
<footer>
<div class="footer">
<p class="footer-text">OneClick</p>
</div>
</footer>
CSS:
.footer {
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
padding-top: 10px;
background: #F28724;
font-size: 1.3em;
}
.footer-text {
color: #3a3a3a;
}
.footer-text > a {
color: #3a3a3a;
display: table;
text-align: center;
margin-right: auto;
margin-left: auto;
}
$(function() {
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$('.footerContent').slideDown(650);
} else if ($(document).scrollTop() < 100) {
$('.footerContent').fadeOut(500);
}
});
})
body,
html {
height: 1000px;
}
.footer {
position: fixed;
z-index: 99;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
padding-top: 10px;
background: #F28724;
font-size: 1.3em;
}
.footer-text {
color: #3a3a3a;
}
.footer-text > a {
color: #3a3a3a;
display: table;
text-align: center;
margin-right: auto;
margin-left: auto;
}
.footerContent {
height: 150px;
position: fixed;
bottom: 0;
width: 100%;
left: 0;
background: #F28724;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
<p class="footer-text">OneClick
</p>
</div>
<div class="footerContent">
<p>Contact ...
<p>
</div>
You could try this solution that uses the calc function of CSS (read more: http://www.w3schools.com/cssref/func_calc.asp), however, this is reported not supporting the IE8, I believe Chrome will run it well
HTML:
<header>
<h1>Header</h1>
</header>
<main>
<content>
<p>content</p>
</content>
<footer>
<p>Footer</p>
</footer>
</main>
CSS:
html,
body {
margin:0;
padding:0;
min-height:100vh;
}
header {
background: LightSlateGray;
height: 100px;
line-height: 100px;
padding: 0 10px;
}
header h1 { margin: 0; }
main { height: auto; min-height: calc(100vh - 100px); }
content, footer { display: inline-block; width: 100%; }
content { height: auto; min-height: calc(100vh - 200px); background:lightblue; }
footer {
height:100px; /* Height of the footer */
background:#6cf;
}
Demo: https://jsfiddle.net/89ucrec5/4/
assign absolute position to footer and bottom:0;
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.
Trying to make the footer in my html css website stick down but nothing works. I've tried changing the position to absolute and fixed and setting bottom: 0 and doing everything but nothing works. Also, is there a better way to make my logo aligned in the middle? Heres my css:
.footer{
background-color: #d62929;
clear: both;
width: 100%vw;
display:block;
overflow: hidden;
padding-top:10px;
padding-bottom: 10px;
min-height: 100%vw;
}
.contact{
margin-left: 30px;
margin: 0 auto;
display:block;
float: left;
padding-right: 50px;
}
.info{
margin-left: 30px;
margin: 0 auto;
padding-left: 30px;
display:block;
float: left;
padding-right: 50px;
}
.account{
margin-left: 30px;
margin: 0 auto;
padding-left: 30px;
display:block;
float: left;
padding-right: 50px;
}
a{
text-decoration:none;
color: black;
font-family: times new roman;
font-size: 18px;
text-align: center;
}
ul{
list-style: none;
text-align: left;
}
.logo_footer{
float: left;
padding: 40px 0;
margin-left: 20px;
margin-right: 40px;
}
h1{
color: white;
font-size: 24;
}
li{
padding: 5px;
}
Heres my html for the footer:
<div>
<footer class="footer">
<img src="{{url_for('static', filename='Logo.png')}}" style="height:108px;width:100px;" class="logo_footer" alt="logo"></a>
<div class="contact">
<h1>Contact us</h1>
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Telegram</li>
</ul>
</div>
<div class="info">
<h1>Information</h1>
<ul>
<li>About Us</li>
<li> Contact Us</li>
<li>Return Policy</li>
<li>Delivery</li>
</ul>
</div>
<div class="account">
<h1>Account</h1>
<ul>
<li>Log in</li>
<li> Register</li>
<li> My cart</li>
</ul>
</div>
</footer>
</div>
You can make position:fixed; instead of position:absolute; This will make it fixed to the bottom. if there are any other div or something that's causing an overlay issue, use z-index:5;
I used postion:relative on wrapper div and postion: sticky on footer.
.sectionWrapper {
position: relative;
}
.header {
height: 10vh;
width: 100%;
background: red;
}
.body {
height: 100vh;
width: 100%;
background: blue;
border: 1px solid black;
}
.footer {
height: 20vh;
width: 100%;
background-color: green;
position: sticky;
bottom: 0%;
}
<div class="sectionWrapper">
<section class="header">Header</section>
<section class="body">Body 1</section>
<section class="body">Body 2</section>
<section class="body">Body 3</section>
<section class="footer">footer</section>
</div>
There are multiple ways for that.
Min-height:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.footer {
position: relative;
min-height: 100%;
Margin-top, here you do need to specify footer height:
* {
margin: 0;
padding: 0;
}
html,
body,
.footer {
height: 100%;
}
.footer__content {
box-sizing: border-box;
This the best, because the height of the footer doesn't matter:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.footer {
display: table;
height: 100%;
This way is a bit different from others because it uses CSS calc() function, and you need to know exact footer height:
* {
margin: 0;
padding: 0;
}
.footer__content {
min-height: calc(100vh - 80px);
}
This is the most correct way, however it works only in modern browsers, as in the 3rd example, the height doesn't matter:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.footer {
display: flex;
flex-direction: column;
In my project, I am using this to solve same task, it's the easiest solution that I found in Internet:
body {
position: relative;
min-height: 100vh;
}
.footer {
position: absolute;
bottom: 0px;
}
Here is important to use min-height property in body and not the height one, because actual height of your page can be more that user's screen size.
This solution makes your footer to snap not to screen bottom, but to page bottom.
I'm learning now CSS and i'm creating a portfolio page as part of it.
I've created this page: link to the codepen
The thing is, the footer is not sticks to the bottom of the page, can some one tell me how can i fix it? so it will be after the <div id="contact">
Iv'e noticed that when I do put it in the <div class="content"> it does work, I tried to figure out why and I didn't got it.
Thanks.
CSS & HTML are here:
html,
body,
main {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Alef";
}
header {
position: fixed;
top: 0;
width: 100%;
height: 70px;
background: #fff;
}
nav {
width: 960px;
height: 70px;
margin: 0 auto;
}
nav ul {
margin: 10px 0 0;
}
nav ul li {
display: inline-block;
margin: 0 40px 0 0;
}
a {
color: #4d4d4d;
line-height: 42px;
font-size: 18px;
padding: 10px;
text-decoration: none !important;
}
.active {
color: #004cc6;
font-weight: bold;
font-size: 20px;
background: #f9fafc;
}
.content {
margin-top: 70px;
width: 100%;
height: 100%;
}
.content > div {
width: 80%;
height: 50%;
margin-left: auto;
margin-right: auto;
color: white;
font-size: 25px;
}
#home {
background: #0f5fe0;
}
#portfolio {
background: #129906;
}
#about {
background-color: #a00411;
}
#contact {
background-color: black;
}
:target:before {
content: "";
display: block;
height: 70px; /* fixed header height*/
margin: -70px 0 0; /* negative fixed header height */
}
footer {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
background-color: #dbdbdb;
text-align: center;
height: 70px;
width: 100%;
}
<header>
<nav>
<ul>
<li><a class="active" href="#home">My Page</a></li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<div class="content">
<div id="home">
<p>#home</p>
</div>
<div id="about">
<p>#about</p>
</div>
<div id="portfolio">
<p>#portfolio</p>
</div>
<div id="contact">
<p>#contact</p>
</div>
</div>
</main>
<footer>
Fotter
</footer>
Remove height: 50%; from .content > div if you want to put footer just after contact.
Codepen
If you want to stick footer to the bottom of the browser window, then add this to your css:
footer {
position: fixed;
bottom: 0px;
}
Codepen
Change footer value like below
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
background-color: #dbdbdb;
text-align: center;
height: 70px;
width: 100%;
}
you can use vh instead of percentage to set the min-height of main, then you need to remove the height
.main {
min-height: 100vh; // Change as per your requirement
}
I want to create a layout like this-
Footer is sticky.
Below is the code I tried:
body {
position: relative;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
html,
body {
height: 100%;
margin: 0;
}
.container {
max-width: 1280px;
margin: 0 auto;
}
.page-wrap {
min-height: 100%;
margin-bottom: -45px;
background-color: #f2f2f2;
}
#header {
height: 80px;
width: 100%;
background-color: #fdbb30;
position: relative;
padding-bottom: 10px;
}
.adminpanelContainer {
background-color: white;
padding: 40px;
margin-top: 20px;
height: 100%;
}
#footer {
width: 100%;
background-color: #fff;
z-index: 1;
}
#footerwrapper {
height: 45px;
}
<body>
<div class="page-wrap">
<header id="header">
<div class="container"></div>
</header>
<div id="body">
<div class="container" style="height:100%;">
<div class="panelContainer"></div>
</div>
</div>
</div>
<footer id="footer">
<div class="container" id="footerwrapper"></div>
</footer>
</body>
I am giving height: 100% to .adminpanelContainer and its ancestors also but there is no effect on it.
I want the white area to expand across the whole web page irrespective of their height.
What changes I have to make to extend the div till bottom.
This will work for you:
I have just added ↓
#body .container{
height: calc(100vh - (90px + 45px));
}
the calculation is as follows:
height: calc(100ViewportHeight - (#header[height+padding-bottom]+ #footerwrapper[height]));
If you want to learn more about calc and vh, please click on them.
A working Sample from your snippet:
body {
position: relative;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
html,
body {
height: 100%;
margin: 0;
}
.container {
max-width: 1280px;
margin: 0 auto;
}
.page-wrap {
min-height: 100%;
margin-bottom: -45px;
background-color: #f2f2f2;
}
#header {
height: 80px;
width: 100%;
background-color: #fdbb30;
position: relative;
padding-bottom: 10px;
}
.adminpanelContainer {
background-color: white;
padding: 40px;
margin-top: 20px;
height: 100%;
}
#footer {
width: 100%;
background-color: #fff;
z-index: 1;
}
#footerwrapper {
height: 45px;
}
#body .container{
height: calc(100vh - (90px + 45px));
}
<body>
<div class="page-wrap">
<header id="header">
<div class="container">
</div>
</header>
<div id="body">
<div class="container" >
<div class="panelContainer">
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="container" id="footerwrapper">
</div>
</footer>
</body>
Hope this was helpful for you.
Without adjusting any existing markup the intended behaviour can be achieved by declaring <percentage> height unit values for applicable nested elements as well.
Start by declaring a relative height (with percentage unit values)
for the element #body - account for the combined height of the
nested header & footer elements, e.g:
#body {
/* 100% height minus the sum of header & footer height */
height: calc(100% - 125px);
}
Next, declare height: 100% for any further nested elements that
are required to occupy the full available height of the viewport,
e.g:
.panelContainer {
height: 100%;
}
The code snippets below demonstrate this behaviour with both fixed and relative footer elements.
Fixed Footer:
body {
position: relative;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
html,
body {
height: 100%;
margin: 0;
}
.container {
max-width: 1280px;
margin: 0 auto;
text-align: center;
}
.page-wrap { /* adjusted */
height: 100%;
background-color: #f2f2f2;
}
#header {
height: 80px;
width: 100%;
background-color: #fdbb30;
position: relative;
padding-bottom: 10px;
}
.adminpanelContainer {
background-color: white;
padding: 40px;
margin-top: 20px;
height: 100%;
}
#footer {
width: 100%;
background-color: #fff;
z-index: 1;
/* additional */
position: fixed;
bottom: 0;
}
#footerwrapper {
height: 45px;
}
/* Additional */
* {
box-sizing: border-box;
}
#body {
height: calc(100% - 125px); /* 100% height minus the sum of header & footer height */
}
.panelContainer {
height: 100%;
/* following styles added just for the sake of demonstration */
background: white;
border: 1px solid #d6d6d6;
box-sizing: border-box;
max-width: 80%;
margin: auto;
}
.panelContainer .inner {
position: relative;
height: 100%;
}
.panelContainer .inner span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 20px;
margin: auto;
}
<body>
<div class="page-wrap">
<header id="header">
<div class="container">
<span>height: 80px</span>
</div>
</header>
<div id="body">
<div class="container" style="height:100%;">
<div class="panelContainer">
<div class="inner"><span>relative height declared with <code>percentage</code> values</span></div>
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="container" id="footerwrapper">
<div class="container">
<span>height: 45px</span>
</div>
</div>
</footer>
</body>
Relative Footer:
body {
position: relative;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
html,
body {
height: 100%;
margin: 0;
}
.container {
max-width: 1280px;
margin: 0 auto;
text-align: center;
}
.page-wrap { /* adjusted */
height: 100%;
background-color: #f2f2f2;
}
#header {
height: 80px;
width: 100%;
background-color: #fdbb30;
position: relative;
padding-bottom: 10px;
}
.adminpanelContainer {
background-color: white;
padding: 40px;
margin-top: 20px;
height: 100%;
}
#footer {
width: 100%;
background-color: #fff;
z-index: 1;
/* additional */
position: relative;
bottom: 0;
}
#footerwrapper {
height: 45px;
}
/* Additional */
* {
box-sizing: border-box;
}
body {
padding-bottom: 45px;
}
#body {
height: calc(100% - 80px); /* 100% height minus the height of the header */
}
.panelContainer {
height: 100%;
/* following styles added just for the sake of demonstration */
background: white;
border: 1px solid #d6d6d6;
box-sizing: border-box;
max-width: 80%;
margin: auto;
}
.panelContainer .inner {
position: relative;
height: 100%;
}
.panelContainer .inner span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 20px;
margin: auto;
}
<body>
<div class="page-wrap">
<header id="header">
<div class="container">
<span>height: 80px</span>
</div>
</header>
<div id="body">
<div class="container" style="height:100%;">
<div class="panelContainer">
<div class="inner"><span>relative height declared with <code>percentage</code> values</span></div>
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="container" id="footerwrapper">
<div class="container">
<span>height: 45px</span>
</div>
</div>
</footer>
</body>
Practical Interactive CodePen Demonstrations:
Here you can observe practical demonstrations, for fixed and relative footers, which allow content to be added or removed dynamically. In addition, these demonstrations also account for dynamic footer heights.
Keeping a Fixed Footer at the bottom of page (Dynamic Footer Height)
Keeping a Relative Footer at the bottom of page (Dynamic Footer
Height)
I am trying to make the footer stay at the bottom of the page, NOT the bottom of the screen (fixed) but at the bottom of the entire page, so you can only see it after scrolling to bottom. However, for some reason it stays above the bottom, and I can't seem to find the reason...
FIDDLE:
https://jsfiddle.net/okfudezn/
Image:
HTML (the div has no wrappers etc):
<div class="footer">
<a>REGISTERED NAMES AND TRADEMARKS ARE THE PROPERTY OF THEIR RESPECTIVE OWNERS - Copyright © 2017 All rights reserved</a>
</div>
CSS:
.footer {
background-color: #4b4c46;
height: 55px;
line-height: 55px;
width: 100%;
text-align: center;
color: #e1dac5;
font-size: 14px;
}
Just change replace you content div height to auto
updated fiddle
.content {
position: relative;
width: 650px;
height: auto;
background-color: #e6e6e6;
border: 1px solid #bcbcbc;
margin: 0 auto;
margin-bottom: 80px;
top: -100px;
}
I would try with:
.footer {
position: absolute;
bottom: 0;
}
Change this css
.content {
background-color: #e6e6e6;
border: 1px solid #bcbcbc;
/*height: 650px;*/ /*Remove this*/
margin: 0 auto 30px;/*Change this*/
overflow: hidden;/*Add this*/
position: relative;
/*top: -100px;*//*Remove this*/
width: 650px;
}
.grid {
width: 600px;
/*height: 1000px;*/ /*Remove this*/
margin: 0 auto;
padding-top: 30px;
}
https://jsfiddle.net/okfudezn/
Here you go!
html, body {
margin:0;
padding:0;
height: 100%;
}
#container {
position: relative;
height: auto;
min-height: calc(100% - 54px);
padding-top: 54px; /* Header & Footer */
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 54px;
background: red;
}
#content {
background: orange;
height: 100%;
}
#footer {
position: absolut;
bottom: 0;
width: 100%;
height: 54px;
background: yellow;
}
.simulateContent {
height: 1000px;
}
<div id="container">
<div id="header">
HEADER
</div>
<div id="content">
CONTENT START
<div class="simulateContent"></div>
CONTENT END
</div>
<div id="footer">
FOOTER
</div>
</div>
I am not good in web-designing, I am working on a web template that was automatically generated by Adobe Dreamweaver.
I want to push the footer's DIV to the bottom of page even I have no content on the page.
This is .CSS (I have omitted some of it)
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}
.container {
width: 960px;
background: #FFF;
margin: 0 auto;
}
.header {
background: #ADB96E;
}
.sidebar1 {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
float: left;
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #CCC49F;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the
}
And this is the common markup of my pages.
<body>
<div class="container">
<?php
include('templates/header.php');
include_once('templates/sidebar.php');
?>
<div class="content">
<!-- end .content --></div>
<div class="footer">
<p>This is a simple footer.</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
And footer on page looks like
I have tried this for footer.
position: fixed;
bottom: 0;
width: 100%;
But then page looks like
Here is a solution that I use, its a HTML 5. But this should work for you. Just change the class and you should be good to go.
footer {
background: #000;
position: absolute;
bottom: 0px;
display: flex;
height: 40px;
width: 100%;
}
See Fiddle
Also you can use the fixed position approach which works just as good or better
footer {
background: #000;
position: fixed;
bottom: 0px;
display: flex;
height: 40px;
width: 100%;
}
Check the DEMO.
Check the 3 lines at bottom are responsible to keep the footer at bottom.
.footer {
padding: 10px 0;
background: #CCC49F;
clear: left;
/*Below 3 lines are the responsible to keep it at bottom*/
position: absolute;
bottom:0;
width: 100%;
}
you can try
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
}
.container {
width: 960px;
margin:auto;
min-height:100%;
position:relative;
background: #FFF;
}
.header {
height: 50px;
background: #ADB96E;
}
.sidebar1 {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
}
.content {
background:#5ee;
padding: 10px 0;
width: 780px;
float: left;
}
.content {
padding-bottom:80px; /* Height of the footer element */
}
.footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background: #CCC49F;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
</div>
<div class="sidebar1">
</div>
<div class="content">
</div>
<div class="footer">
<p>This is a simple footer.</p>
</div>
</div>
</body>