I've got a footer that works fine, but when the size of content in the page is shorter than the page size, the footer is rendered below the content not in the bottom of the page, here is an image:
Here is my code (jsbin snippet):
.footer {
position: absolute;
width: 100%;
margin-bottom: 0;
background-color: #2D2D2D;
height: 100px;
text-align: center;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
</head>
<body ng-app="AngularJSApp">
<div class="contentBody">
<div id="contenido">
#RenderBody()
</div>
</div>
<div class="footer">
<p class="copyright">Copyright © 2015 Diego Unanue — 3xM Web Design</p>
</div>
</body>
</html>
What can I do to fix this problem, and always keep the footer in the bottom of the page?
you can use this sticky footer:
html,
body {
height: 100%;
margin: 0
}
.contentBody {
min-height: 100%;
/* equal to footer height */
margin-bottom: -100px
}
.contentBody:after {
content: "";
display: block
}
.footer,
.contentBody:after {
height: 100px
}
.footer {
width: 100%;
background-color: #2D2D2D;
text-align: center;
color: white
}
<body ng-app="AngularJSApp">
<div class="contentBody">
<div id="contenido">
#RenderBody()
</div>
</div>
<div class="footer">
<p class="copyright">Copyright © 2015 Diego Unanue — 3xM Web Design
</p>
</div>
</body>
Add this to your css
html, body {
min-height: 100%;
}
and on .footer change
margin-bottom: 0;
to
bottom: 0;
you can use
html,body {
position:absolute;
bottom: 0px;
}
Related
a week ago I started to learn html and css and to practice I decided to emulate an old web page with what I learned so far. The page is the following: http://in3.org/info/reading.htm
I am having difficulty making the blue vertical line appear that is on the right side of the page.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRIC PAGES Reading Notes</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main>
<header>
<img src="assets/ga.gif" alt="" />
<br>
<img src="assets/eptype2.gif" alt="" />
</header>
<aside class="aside1">
<img src="/assets/epnav5.gif" alt="" />
</aside>
<h2>Reading Notes</h3>
<aside class="aside2"></aside>
</main>
</body>
</html>
head,
body {
background-color: lightcyan;
margin: auto;
}
header {
width: 100%;
padding-left: 4.85%;
margin: auto;
}
.aside1 {
position: absolute;
width: 4.85%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
.aside2 {
position: absolute;
width: 4.85%;
padding-right: 30%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
img {
padding: 10px;
}
h2 {
color: red;
padding-left: 5.5%;
}
To make that blue vertical line I thought of using an empty aside tag with a width of 4.85% with a padding-right of 30%, but instead of having a distance of 30% to the right and occupying a 4.85% width, the aside is placed to the left of the page occupying 30% of the page.
I'd just give the wrapper/body-element your desired background-color, make a new container inside of that wrapper-element, give that your other desired background-color, and then center it. This way you don't have to make 2 new elements.
* {
margin: 0;
padding: 0;
}
body {
background-color: lightcyan;
}
.wrapper {
background-color: rgb(35, 168, 221);
height: 100vh;
max-width: 75%;
}
.container {
background-color: lightcyan;
max-width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRIC PAGES Reading Notes</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main>
<div class="wrapper">
<div class="container">
<h2>Reading Notes</h3>
</div>
</div>
</main>
</body>
</html>
This question already has answers here:
Why does height 100% work when DOCTYPE is removed?
(5 answers)
Closed 2 years ago.
Adding <!DOCTYPE html> is breaking my CSS only sticky footer meaning that as soon as I add it, the footer does not stick to the bottom of a web page anymore.
Following is a working example without the <!DOCTYPE html>.
Doing further tests I've noticed that when not declaring the page as HTML5 by adding the DOCTYPE statement, the div with CSS class wrapper is able to be stretched to take the full document height thus pushing the footer to the bottom. This is not happening when declaring the document as HTML5.
https://jsfiddle.net/muvwh4zn/
body {
background-color: #f0f0f0;
}
.navbar {
background-color: #444;
width: 100%;
}
.footer {
background-color: #444;
width: 100%;
height: 50px;
}
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
padding: 0px 0px 80px 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="container">
<div class="wrapper">
<header>
<div class="row">
<div class="text-white-50 text-center navbar">
HEADER
</div>
</div>
</header>
<br />
<main>
<div class="row">
BODY
</div>
</main>
</div>
<footer>
<div class="row">
<div class="align-middle py-3 text-white-50 text-center footer">
FOOTER
</div>
</div>
</footer>
</div>
</body>
</html>
Please also see my own comment just below for a possible solution to this issue.
Add flexibility to the container class. Your footer will always be pinned to the bottom.
https://www.w3.org/QA/2002/04/valid-dtd-list.html
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
body {
background-color: #f0f0f0;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.navbar {
background-color: #444;
width: 100%;
}
.footer {
background-color: #444;
width: 100%;
height: 50px;
}
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
padding: 0px 0px 80px 0px;
}
.push {
height: 50px;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="container">
<div class="wrapper">
<header>
<div class="row">
<div class="align-middle py-3 text-white-50 text-center navbar">
header
</div>
</div>
</header>
<br />
<main>
<div class="row">
BODY
</div>
</main>
</div>
<footer>
<div class="row">
<div class="align-middle py-3 text-white-50 text-center footer">
FOOTER
</div>
</div>
</footer>
</div>
</body>
</html>
I have simple webpage with header and footer.
This is roughly the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
#RenderSection("HtmlHeadTags", false)
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#RenderSection("Analytics", false)
#RenderSection("NortonSafe", false)
</head>
<body>
<div id="page-wrapper">
<header>
<div id="header-navbar">
<div id="header-navbar-active">
<a id="websiteLogo" href="/">
<img src="/Content/ankol-logo.png" alt="logo" />
</a>
<div class="clearfix"></div>
</div>
</div>
</header>
<div id="body-content">
#RenderSection("scripts_body", required: false)
#RenderBody()
</div>
<footer>
<p id="footer-links">
about
terms
contact
</p>
<p id="footer-copyright">2017 ©</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
</body>
</html>
with following (relevant) css parts:
#header-navbar {
display: block;
width: 100%;
background-color: #3F51B5;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
color: #FFF;
font-family: Arial;
font-size: large;
position: fixed;
z-index: 1000;
margin-bottom: 20px;
border: 1px solid transparent;
}
#footer-navbar {
display: block;
width: 100%;
background-color: #3F51B5;
color: #FFF;
font-family: Arial;
font-size: large;
margin-top: 70px;
padding-top: 5px;
padding-bottom: 5px;
}
Now, while in pc browser both header and consume 100% of the width of the window, in mobile browser the header and the footer consume only part of the width (I have Android, but checked it on several emulators on Edge and all show the same results)
The red box is the header and the green box is the footer.
What might be the reason for that?? can anyone refer me to a good tutorial about the differences between pc browser and mobile browser? thanks.
Try adding this style:
body {
width: 100%;
height: 100%;
margin: 0;
}
I'm making a multipage website and I'm including a navbar and a footer on each page, the navbar is in place and works just fine but my footer is all over the place. In some pages it's exactly where it should be, others it's in the middle of the page but it was like that before I even added page content.
I've tried a few things I found online but nothing's worked so far.
HTML:
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/navFooter.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="navbar"></div>
<div class="col-md-12">
<table class="table">
<td style="border: none;"><p>Choose the type of comparison you'd like to make.</p></td>
<td>
<b>Quick Comparison</b><br>
Compare all counties<br>
<b>Custom Comparison</b><br>
Compare selected counties and/or jurisdictions only
</td>
</table>
</div>
<div id="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
$("#navbar").load("navbar.html");
});
$(function(){
$("#footer").load("footer.html");
});
</script>
</body>
CSS:
html, body {
height: 100%;
width: 100%;
}
body {
padding-top: 90px;
position: relative;
overflow: scroll;
}
.footer {
position: absolute;
margin: 0;
width: 100%;
background-color: #19D8FF;
padding: 25px;
border-top: 4px solid #3399CC;
min-height: 150px;
max-height: 250px;
}
Footer HTML:
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-3 pull-left">
<img src="img/Wordmark.png" alt="Logo">
</div>
<div class="col-md-5">
Links |
Contact |
A-Z Index |
Site Map |
Disclaimer</li>
</div>
<div class="col-md-4">
<p class="muted pull-right">© 2017 All rights reserved</p>
</div>
</div>
</div>
</footer>
This code should put you in the right direction. I added bottom: 0 and changed the position to fixed. I also removed an uneeded tag you had. This will put it at the absolute bottom of the view and always be fixed at the bottom.
html, body {
height: 100%;
width: 100%;
}
body {
padding-top: 90px;
position: relative;
overflow: scroll;
}
.footer {
position: fixed;
bottom: 0;
margin: 0;
width: 100%;
background-color: #19D8FF;
padding: 25px;
border-top: 4px solid #3399CC;
min-height: 150px;
max-height: 250px;
}
So I'm making a basic layout. Which I usually take a creative commons layout but this time I decided to build my own.
So basically I am making a very basic page where there is a top section 100% width.
Then under that we have a display:table-cell section to place the two sections side by side.
This seems to work but my <h1></h1> is being placed at the bottom portion of the area. I want the content to be at the very top.
Here is my code:
section
{
display: block;
}
#instructions
{
width: 100%;
background-color: bisque;
height: auto;
padding: 20px;
}
#picture
{
width: 100% auto;
height: auto;
background-color: aliceblue;
padding: 30px;
border: 10px solid #000;
display: table-cell;
}
#content
{
width: 100%;
display: table-cell;
padding: 25px;
position: relative;
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Alberta Map</title>
<meta name="description" content="Learning Alberta's Geography">
<link rel="stylesheet" href="main.css">
</head>
<body>
<section id="instructions">
<h1>Learning Altberta's Geography</h1>
<p>bla bla bla bla</p>
</section>
<section id="picture">
<img src="alberta.jpg"></img>
</section>
<section id="content">
<h1> Lake....</h1>
</section>
</body>
What this outputs is the following problem:
Ultimately I want the text on the content id to start at the top portion of the section.
What should I have done and why is the at the lower bottom of the section?
Thanks
I think all you need is vertical-align:top
#instructions {
background-color: bisque;
padding: 20px;
}
#picture {
background-color: aliceblue;
padding: 30px;
border: 10px solid #000;
display: table-cell;
}
#content {
display: table-cell;
padding: 25px;
font-size: 16px;
vertical-align: top;
}
<section id="instructions">
<h1>Learning Altberta's Geography</h1>
<p>bla bla bla bla</p>
</section>
<section id="picture">
<img src="http://lorempixel.com/output/city-h-c-100-200-6.jpg" />
</section>
<section id="content">
<h1> Lake....</h1>
</section>
add
vertical-align:top;
to
#content
That's right add vertical-align:top;