I want the footer of this page to stick to the bottom, below all content, but not fixed in the screen. The problem is that when the body has more than 100% of height, the footer stay in the middle of the screen, and not in the bottom.
I've seen a lot of tutorials on how to achieve this, using "position: absolute" + "bottom: 0" and stuff, but everything failed.
Check it out:
<html>
<head>
<meta charset="iso-8859-1" />
<link rel="stylesheet" type="text/css" href="index.css" />
<link href='https://fonts.googleapis.com/css?family=Arvo|Open+Sans|Ubuntu+Roboto' rel='stylesheet' type='text/css'>
<title>Matheus's Page</title>
</head>
<body>
<div id="wrapper">
<header>
<div class="title-div">
<h1>Title</h1>
</div>
<nav>
<ul>
<li>
<h3>Home</h3>
</li>
<li>
<h3>Articles</h3>
</li>
<li>
<h3>Perfil</h3>
</li>
<li>
<h3>Settings</h3>
</li>
</ul>
</nav>
</header>
<div id="body">
<p>Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste </p>
</div>
<footer>
<p>Footer</p>
</footer>
<div>
</body>
</html>
CSS:
body {
font-family: 'Arvo', serif;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
}
header {
position: absolute;
float: top;
width: 100%;
height: 8%;
background-color: #424242;
color: #FFD740;
}
.title-div {
position: absolute;
height: 100%;
margin: auto 5%;
padding-right: 3%;
border-right: solid 2px #FFD740;
}
header nav {
position: absolute;
width: 75%;
left: 15%;
}
header ul {
list-style: none outside none;
}
header ul li {
display: inline-block;
margin: auto 2% auto 0;
}
#body {
padding: 10px;
padding-top: 8%;
padding-bottom: 15%; /* Height of the footer */
}
footer {
position: absolute;
width: 100%;
height: 15%;
right: 0;
bottom: 0;
left: 0;
color: #FFD740;
background-color: #424242;
clear: both;
}
Link to printscreen of the result:
The accepted answer might be a bit outdated since we have Flexbox now. Give the container a min-height: 100vh and the footer a margin-top: auto so you don't have to deal with absolute positioning and fixed heights.
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
background-color: #FFCCCC;
}
.content {
background-color: #CCFFCC;
}
.footer {
background-color: #CCCCFF;
margin-top: auto;
}
<div class="container">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
I think this might help you.
Just showing you the way how to achieve what you want.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#header {
background: #ededed;
padding: 10px;
}
#content {
padding-bottom: 100px;
/* Height of the footer element */
}
#footer {
background: #ffab62;
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
}
<div id="wrapper">
<div id="header">
</div>
<!-- #header -->
<div id="content">
</div>
<!-- #content -->
<div id="footer">
</div>
<!-- #footer -->
</div>
<!-- #wrapper -->
Make sure the value for 'padding-bottom' on #content is equal to or greater than the height of #footer.
Update:
JSFiddle Demo to play around.
I'm using Bootstrap 4 and this worked for me link.
I did this way in the CSS file (base.css):
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
footer{
padding: 3em;
margin-top: auto;
}
And I've linked the css file in the html (base.html):
<head>
<link rel="stylesheet" type="text/css" href="'<path to css>'"/>
</head>
This is what worked for me:
When I tried bottom 0 and right 0, there was some annoying bottom margin below the footer which would not go away.
I fixed it with top: 100% and position absolute:
body{
height: 100%;
width: 100%;
position: relative;
}
footer{
background-image: linear-gradient(to right, #c10f3f, #010168);
padding: 1em;
width: 100%;
top: 100%;
position: absolute;
}
You may try this styling;
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -100px;
padding-bottom: 100px;
}
header {
position: absolute;
float: top;
width: 100%;
height: 8%;
background-color: #424242;
color: #FFD740;
}
.title-div {
position: absolute;
height: 100%;
margin: auto 5%;
padding-right: 3%;
border-right: solid 2px #FFD740;
}
header nav {
position: absolute;
width: 75%;
left: 15%;
}
header ul {
list-style: none outside none;
}
header ul li{
display: inline-block;
margin: auto 2% auto 0;
}
footer {
height: 100px;
padding-top: 15px;
padding-left: 15px;
color: #FFD740;
background-color: #424242;
}
Here is a demo
the answer posted by #divy3993 works but sometimes making footer absolute keeps it stranded on the middle of the page. Atleast that's what had happened to me. So I made a small change, I'll post it below
#footer {
background: #ffab62;
width: 100%;
height: 100px;
position: relative; //make relative instead of absolute
bottom: 0;
left: 0;
}
Try this:
css:
#footer
{
position: relative;
background-size: cover;
background-position: 50% 50%;
background-color: #ffab62;
}
html:
<doctype HTML>
<HTML>
<head>
</head>
<body>
<div id = footer></div>
</body>
</HTML>
I'm using bootstrap 4 and mdboostrap and I had the same problem.
the inline style worked for me:
<footer class="page-footer lighten-5"
style="position: relative; bottom:0; width: 100% !important;" >
....
</footer>
Your first mistakes are just using absolute position on everything and min-height on many stuff you don't need.
For starter just remove all absolute stuff and put min-height only in div named "body" after that footer will be glued to the #body by default, after that your footer won't be flying around where ever it wants.
Best way to use absolute in divs is:
- when you already have existing div with relative position, and then you put another div with an absolute position inside of a div with a relative position.
Also, play only with pixel values if you start going with % you will get lost like you already did.
position: fixed
Use this to set position to Fixed.
Related
when I scroll down on my page, my container overlap the header, but I want my header to overlap the container, so I made my header on a fixed position, but it does not work
here is my html code:
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="page">
<header class="leheader">
<div id="bloc1"></div>
<img src="https://i.imgur.com/dm6H7GV.png">
<div id="bloc2"></div>
</header>
<main class="container"></main>
</div>
</body>
</html>
and here is my css code:
body,
html,
.page {
background: #666666;
width: 99%;
height: 100%;
}
.leheader {
display: flex;
width: 99%;
position: fixed;
flex: 1 100%;
height: calc(100%-50px);
}
#bloc1 {
margin-left: 1px;
margin-top: 0.5px;
height: 50px;
width: 90px;
background: #cccccc;
border-radius: 10px 0 0 0;
}
#bloc2 {
background: #467491;
margin-top: 4px;
width: 93%;
height: 37px;
}
.container {
position: absolute;
top: 57px;
left: 9px;
background: #cccccc;
width: 99%;
height: calc(100% - 33px);
}
where is the problem ?
Try adding the z-index property to the header.
like this....
z-index: 2
In CSS to make something Fixed position you also need to give it a z-index (which is its position on z-axis). Read more about Z-Index here. Apart from it you also have to give it a position in terms of top, left, bottom and left to tell it where it has to fixed.
.leheader {
display: flex;
width: 99%;
position: fixed;
top:0;
left:0;
z-index:2;
flex: 1 100%;
height: calc(100%-50px);
}
I am new to CSS and HTML, and I am working on my final project for school.
I am trying to absolutely position some text "Welcome" to a div I've made. For some reason it won't position in relation to the div, I've looked it over 10 times and can't figure out why.
I want the "Welcome" text to sit at the bottom of the welcome div, however when I put bottom:0px; into the CSS, it doesn't position according to its parent container and instead goes 0px from the top of the whole screen.
Here's the code:
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
}
#header {
height: 150px;
position: relative;
background-color: red;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
height: 150px;
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav"></nav>
</header>
</div>
You are very close. Take the height away from the .w p tag and remove its margin as well:
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
}
#header {
height: 150px;
position: relative;
background-color: red;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
/*height: 150px;*/
margin: 0;
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav"></nav>
</header>
</div>
The problem, as CalvinNunes pointed out, is that you have a height set on .w div. And, p elements have margin and line-height values by default. You need to remove the margin and set the line-height to 1 or less (.5 makes the text touch the bottom of the green box).
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
position: relative;
}
#header {
height: 150px;
background-color: red;
position: absolute;
width: 100%;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
margin: 0;
line-height: 1;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav">
</nav>
</header>
</div>
<!-- End of wrapper-->
If you use absolute on something, related dom element should be relative, absolute or fixed, depending on your needs.
Also check if your absolute element doesn't have some unneeded margins etc.
But in your usage case i don't think that there is absolute needed. you can use bigger paddings for parent element top. Also this can be achieved using flex-end, which will allow dynamic text input.
I looked at some of the other answers for this, but none of them seem applicable because, although my fixed divs' dimensions are fixed, they're unknown until the page actually renders.
I have a fixed header div, followed by another div. The second div contains a sidebar div, and finally the content div:
<header>stuff</header>
<div id="wrapper">
<nav>sidebar stuff</nav>
<div id="content">Content</div>
</div>
The wrapper uses display: flex to put the sidebar and the content divs side by side.
My current goal is to fix the header and the sidebar when scrolling. The problem is that position: fixed takes the header and sidebar out of the regular flow, which makes it hard to position the content div relative to them. As a bonus, I don't know the dimensions of the header/sidebar until they render, so I can't just do position: absolute on the content div.
I am using React, and therefore would like to avoid manual DOM manipulation (e.g. jQuery).
Here is the code. Hope it will help you. If any changes let me know.
*{
margin: 0px;
}
#sidebar {
/*Strictly Necessary */
position:fixed;
height: 100%;
width:30%;
margin: 0px;
/*Aesthetics*/
background: lightblue;
border-radius: 7px;
}
#rightSideWrapper {
/*Strictly Necessary */
width:70%;
float: right;
/*Aesthetics*/
background: black;
}
header {
/*Strictly Necessary */
position: fixed;
width: 70%;
height: 100px; /*Adjust the hight to your purposes*/
/*Aesthetics*/
background: lightSalmon;
border-radius: 7px;
}
.ContentBox{
margin-top: 100px; /*The height of the header*/
display:flex;
flex-flow: row wrap;
}
main, section, footer {
/*Aesthetics*/
background: lightgray;
border-radius: 7px;
margin: 5px;
padding: 20px;
}
main {
/*Strictly Necessary */
height: 400px;
order: 1;
flex: 0 1 100%;
}
section {
/*Strictly Necessary */
height: 400px;
order: 2;
flex: 0 1 100%;
}
footer {
/*Strictly Necessary */
height: 100px;
order: 3;
flex: 0 1 100%;
}
<html>
<!--...-->
<head>
<meta charset="utf-8">
<title> Ghost </title>
<link rel="Stylesheet" href="css/style.css">
</head>
<body>
<div id="sidebar">
Side Content
</div>
<div id="rightSideWrapper">
<header>
Header
</header>
<div class="ContentBox"><!--. poner en minusculas.-->
<main>
Main Content
</main>
<section>
Section Content
</section>
<footer>
Footer
</footer>
</div>
</div>
</body>
</html>
Either you can use this code.
https://jsfiddle.net/gqsaedr7/2/
* {
padding: 0;
margin: 0;
}
header {
background: black;
padding: 15px;
position: fixed;
width: 100%;
}
#wrapper {
display: flex;
height: 100vh;
padding-top: 50px;
}
#navbar {
background: pink;
width: 20%;
position: fixed;
height: 100vh;
}
#content {
background: lightblue;
width: 100%;
padding-left: 20%;
}
<header>Header</header>
<div id="wrapper">
<nav id="navbar">sidebar stuff</nav>
<div id="content">
<div class="class-1">
ABC
</div>
<div class="class-2">
XYZ
</div>
</div>
</div>
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 am developing a site where I have a fixed header and a fixed footer. I am trying to get my content to be full page when there is not enough content and still be scrollable when there is.
What I have so far does this, but I am left with some extra space at the end of my page. How can I get rid of this extra space at the bottom?
Here is a jsFiddle: http://jsfiddle.net/0yz9nx35/1/
As you can see in the fiddle there is still a scrollbar showing empty space at the bottom of my page
My code:
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
CSS:
html { height: 100%; margin: 0px; padding: 0px; }
body { height: 100%; margin: 0px; padding: 0px;}
.wrapper { min-height: 100%; height: 100%; padding-top: 60px; }
.header { position: fixed; top:0px; left:0px; height:60px; background-color: #333; width: 100%;}
.footer { position: fixed; bottom:0px; left:0px; height:50px; background-color: #333; width: 100%;}
You can use that on the wrapper class:
height: calc(100% - 60px)
Or maybe you could change the structure of your page by something like:
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; }
#global { height: 100vh; }
#header { height: 60px; background-color: orange; }
#content { height: calc(100% - (60px + 50px)); background-color: gray; }
#footer { height: 50px; background-color: green; }
</style>
</head>
<body>
<div id="global">
<div id="header">
Aenean
</div>
<div id="content">
lacinia
</div>
<div id="footer">
quam
</div>
</div>
</body>
</html>
Remove the body {height:100%;} add some padding bottom on wrapper to compensate for the fixed footer height. Here is the fixed fiddle:
http://jsfiddle.net/0yz9nx35/9/
you can add overflow-y: hidden; do remove the scrollbar at the bottom.
If you want any scroll bar to be on the .content block, you can try the following.
You can make .content fixed such that the top and bottom edges are below the header and above the footer respectively.
In this approach, you may not need the .wrapper block element unless you need it for placing some background images, for example.
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
.wrapper {
height: 100%;
}
.header {
position: fixed;
top: 0px;
left: 0px;
height: 60px;
background-color: #333;
width: 100%;
}
.footer {
position: fixed;
bottom: 0px;
left: 0px;
height: 50px;
background-color: #333;
width: 100%;
}
.content {
position: fixed;
top: 60px;
bottom: 50px;
left: 0px;
background-color: beige;
width: 100%;
overflow: auto;
}
<div class="wrapper">
<div class="header"></div>
<div class="content">
Content goes here<br>
and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>
the end.
</div>
<div class="footer"></div>
</div>