I'm having trouble dividing a page into header, content and footer.
I followed one of the topics here on stackoverflow. However, when I try adding anything to the content part all of my content appears below the footer element. So far, this is my code.
Can anyone explain what I am doing wrong and what is the reason behind it?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
//Removed
</head>
<body>
<div class="main-wrapper">
<header>
<?php
require('header.php');
?>
</header>
<section class="page-content">
yeah
</section>
<footer>
<?php
include('footer.php');
?>
</footer>
</div>
</body>
</html>
Here's my CSS
body, html {
width: 100%;
height: 100%;
background: #ddd;
padding: 0;
margin: 0;
}
.main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0;
position: relative;
}
article {
background-color: white;
}
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #555;
height: 55px;
}
.page-content {
width: 100%;
height: 100%;
}
.nav-bar {
width: 100%;
background: white;
text-align: center;
}
The page-content appears below footer, even when I set it's position to absolute. What am I doing wrong?
Thank you for all your help.
You should add
<div style="clear:both;"></div>
between your section and footer tag and see if that helps
.page-content {
box-sizing:border-box;
padding:0 0 55px; /* make space for footer */
}
Related
When I create the new page & set background-color: black, it is coming according to content, not on the whole window.
I don't want to put that property into HTML.
I mean size of the body is generating according to content.
How can I fix that?
I can't put position: fixed in the body because sometimes I have to scroll on other pages & also I have footer stick to the bottom.
This is HTML:
<html>
<head>
</head>
<body ng-cloak>
<notifications-bar class="notifications"></notifications-bar>
<div ng-controller="MainCtrl as main">
<ng-include src="'app/layout/header.html'"></ng-include>
<div ng-view></div>
</div>
<footer class="footer_body">
<ng-include src="'app/layout/footer.html'"></ng-include>
</footer>
<spinner></spinner>
</body>
</html>
This is CSS:
html, body {
margin: 0;
padding: 0;
}
html {
position: relative;
min-height: 100%;
}
body
{
min-height: 100% !important;
margin-bottom:60px;
}
.footer_body {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 0px;
height: 60px; /* height of footer */
background-color: #666666;
}
Update you CSS property html body background color like this
html, body {
background-color:#aadb1e;
}
Have you tried to set a background-color to .html in your css file ?
html, body {
margin: 0;
padding: 0;
}
html {
position: relative;
min-height: 100%;
}
body
{
min-height: 100% !important;
margin-bottom:60px;
}
.special-bg{
background-color: cyan;
}
.footer_body {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 0px;
height: 60px; /* height of footer */
background-color: #666666;
}
<html class='special-bg'>
<body>
<notifications-bar class="notifications"></notifications-bar>
<div ng-controller="MainCtrl as main">
<ng-include src="'app/layout/header.html'"></ng-include>
<div ng-view></div>
</div>
<footer class="footer_body">
<ng-include src="'app/layout/footer.html'"></ng-include>
</footer>
<spinner></spinner>
</body>
</html>
I have a background I am trying to place behind my header, but I am having trouble.
All my content is sitting behind the background.
Can anyone give me some insight on what I am doing wrong or missing?
* {
box-sizing: border-box;
}
.header {
background-color: white;
color: #36363F;
height: 600px;
padding: 15px;
}
<div class="header">
<h1>GETUWIRED</h1>
</div>
<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img src='http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg' style='width:100%;height:100%' alt='[]' />
</div>
A few ways to do this:
using css background in body (or html) - recommended
* {
box-sizing: border-box;
}
body {
background: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg);
}
.header {
background-color: white;
color: #36363F;
height: 600px;
padding: 15px;
}
img {
width: 100%;
height: 100%
}
<div class="header">
<h1>GETUWIRED</h1>
</div>
z-index negative
Use z-index: -1 instead of z-index:0 in the element with background.
Also you can use the image as a background instead of img element, to have a semantic meaning.
* {
box-sizing: border-box;
}
.bg {
background: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg);
position: absolute;
z-index: -1;
left: 0;
top: 0;
width: 100%;
height: 100%
}
.header {
background-color: white;
color: #36363F;
height: 600px;
padding: 15px;
}
img {
width: 100%;
height: 100%
}
<div class="header">
<h1>GETUWIRED</h1>
</div>
<div class="bg">
</div>
Note Avoid using inline styles, they are a bad practice.
Since you are stretching the image across the whole viewport, may I suggest you add it as a background-image on the body instead. It will give you a cleaner markup.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
background: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg) center no-repeat;
background-size: cover;
}
.header {
background-color: white;
color: #36363F;
height: 600px;
padding: 15px;
}
</style>
</head>
<body>
<div class="header">
<h1>GETUWIRED</h1>
</div>
</body>
</html>
You should not use img tag as background, you should use css background instead. You could learn css background from here https://developer.mozilla.org/en/docs/Web/CSS/background
In your case, you should rewrite your codes like below. Make use of the body css background.
I adjust the header height to 110px, because before is too high.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.header {
background-color: white;
color: #36363F;
height: 110px;
padding: 15px;
}
body {
background-image: url('http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg');
background-size: 100% 100%;
background-position: 0 0;
}
</style>
</head>
<body>
<div class="header">
<h1>GETUWIRED</h1>
</div>
</body>
</html>
#babar-miamor
Please try changing class container property as below
margin: 0px;
padding: 0px;
height: 100%;
Hope it help.
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.
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 assign overflow:hidden to the wrapper but it is ignored. It works however, if I assign it to body. Does anyone have an idea how to make it work for the wrapper?
The HTML...
<head>
<meta charset="utf-8">
<title>Overflow Test</title>
</head>
<body>
<div id="wrapper">
<header></header>
<main>
<div id="content"></div>
</main>
</div>
</body>
</html>
The CSS...
html {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
position: relative;
margin: 0;
padding: 0;
min-height: 100%;
}
#wrapper {
overflow: hidden;
}
header {
position: fixed;
top: 0xp;
left: 0px;
width: 100%;
height: 50px;
background-color: #d20000;
}
main {
width: 100%;
height: auto;
}
#content {
width: 100%;
height: 3000px;
background-color: #ffdd00;
}
Help would me much appreciated...
Thanks
Typo, change <div id="#wrapper"> to <div id="wrapper">
Update: I change the #content height to 100px, and created this fiddle to test if it works, and it seems it does. You must have removed much of your code in the example you provided, perhaps something else is causing the problem? Or is it the #content height 3000px that is the problem?
Update2: I think you want to activate/deactivate scrolling on body based on the status of your menu. I created this little fiddle with jQuery to show you how you can toggle a class on body. Just tie the listener to your menubutton instead of the whole wrapper element like I did, and watch the class .overflow getting added/removed to body. I hope this was the answer you where looking for?
Ok, I got it to work by putting my wrapper inside another div with position:absolute and top and bottom set to 0. I took inspiration from this thread http://goo.gl/U3OQQV
Here's the new fiddle... https://jsfiddle.net/aaandreas/esLcw3md/2/ Thanks for your effort turbopipp, I appreciate it!
Here's the updated HTML...
<body>
<div id="prewrapper">
<div id="wrapper">
<header></header>
<main>
<div id="content"></div>
</main>
</div>
</div>
And the updated CSS...
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#prewrapper {
position: absolute;
width: 100%;
overflow: hidden;
top: 0;
bottom: 0;
}
#wrapper {
position: relative;
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0xp;
left: 0px;
width: 100%;
height: 50px;
background-color: #d20000;
}
main {
width: 100%;
height: auto;
}
#content {
width: 100%;
height: 3000px;
background-color: #ffdd00;
}