When adding a footer to my page, styling is not attached to the page, even though the path's are correct. The footer never goes to the bottom, just stays underneath my content.
I've tried moving the block of code inside/outside the main container div, I've even tried downloading the template and adding my code to that, and that doesn't work either. Stock code from the Bootstrap site works. As soon as I paste it into my code it no longer is at the bottom where it should be.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #f5f5f5;
}
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
No errors besides not docked to the bottom of the page, it's like my CSS file isn't linked, I checked the paths and they are correct.
Footer is inside the body tag. The body have a margin-bottom: 60px;. So footer not docked to bottom like it should be.
Change css body margin-bottom: 60px; to margin: 0px;. Here is the complete code.
html {
position: relative;
min-height: 100%;
}
body {
margin: 0px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #f5f5f5;
}
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
The code you posted works fine for me in two different browsers. I suspect you have other code on the page screwing things up. Below is a complete example.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #f5f5f5;
}
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
<p>And the lamb lies down on Broadway.</p>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
Related
i am Currently working on a Angular 2 Website.
I wanted to have a Landing section which covers the Full screen, a content Section, which is as large as the Content inside and a Footer at the Bottom as well as a navbar that stays always on top.
I'm more of a Backend-Developer, so CSS is not my biggest Strength.
My Current code for Testing is:
Global CSS:
html, body {
margin: 0px;
padding: 0px;
width: 100vw;
height: 100vh;
}
App-Component HTML and CSS:
<app-home></app-home>
<header>
Test
</header>
.
header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 50px;
color: white;
background-color: rgba(0, 0, 0, 0.8);
}
And my Home-Component HTML / CSS:
<header></header>
<div class="content"></div>
<footer></footer>
.
header {
position: relative;
width: 100%;
height: 100%;
background: blue;
}
.content {
position: relative;
width: 100%;
height: 500px;
background: red;
}
footer {
position: relative;
width: 100%;
height: 50px;
background-color: yellow;
}
The Problem i Currently have is, that all my Containers are about 10px wider that the screen. Because of this there is a Horizontal Scrollbar at the bottom.
The weird thing is that this Problem only occurs when i add the content or footer section. When i only have the header Everything is fine.
Also the Navbar stays in the correct size.
Image of the Problem
Probalby it's just a stupid small mistake, but even with other solutions from Stack Overflow i tried it is still not working.
I appreciate all your Help!
just change width to 100% from width: 100vw for body; Like below:
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100vh;
}
I am trying to emulate this version of sticky footer done here https://getbootstrap.com/docs/4.1/examples/sticky-footer/
This is my html code
<body>
#Html.Partial("Navigation/_Navigation")
<div class="container body-content">
<div class="content-container">
#RenderBody()
</div>
<footer>
© #DateTime.Now.Year - Stardocs Services
</footer>
</div>
</body>
This is my css
html {
}
body {
padding-top: 50px;
margin-bottom: 50px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-top: 20px;
padding-left: 15px;
padding-right: 15px;
}
.content-container {
}
/*Footer*/
footer {
position: absolute;
bottom: 0;
left:0;
width: 100%;
height: 50px;
line-height: 50px;
background-color: #f5f5f5;
}
When I view it in desktop mode it sticks to the bottom just fine. However, when I resize the screen, the bar looks like this :
I'm not sure how to continue from what I've done.
You need to add
.body-content {
min-height: 100vh;
padding-bottom: 50px;
position: relative;
}
Also, you should remove
body { margin-bottom: 50px; }
Our design team has come up with a concept that uses a full background image on the landing page, but then only has the image on the footer of the remaining pages, with the main content being on a white background.
So, as a quick mock up to illustrate the concept, the landing page might be:
While the majority of the site would be:
This presents a problem because we obviously don't know the window size it's being displayed in, so it keep that footer strip consistent across all pages I presumably have to use a whole-page background image and then block most of it out in white.
I am struggling to do this in CSS (I'm a back-end developer that's been roped in to do this ). I adopted the following pattern for a sticky footer:
html{
height: 100%;
margin: 0;
}
body {
background-image: url("iStock-507452790.jpg");
margin: 0; padding: 0;
background-size: 100%;
height: 100%;
}
.wrapper {
min-height: 100%;
background-color: white;
margin-bottom: -50px;
}
.footer, .push {
height: 50px;
}
<body>
<div class="wrapper">
content!
<div class="push"></div>
</div>
<footer class="footer">
footer!
</footer>
</body>
But this just leads to the whole page being filled with the background colour specified on the wrapper.
Is there a way to get white on most of the page and just keep the strip at the bottom? I am not averse to using other sticky footer methods if necessary.
I also have changed the DOM a little. Hope this helps.
Also you can remove the footer text if you dont need it.
html, body {
margin: 0;
padding: 0;
}
body {
background-image: url('http://www.lavitaoggi.com/wp-content/uploads/2014/02/8e69oceano-acqua-bolle-aria-ossigeno.jpg');
}
.wrapper {
min-height: 90vh;
background-color: white;
}
.footer {
height: 10vh;
color: #fff;
}
<div class="wrapper">
content! loream
</div>
<footer class="footer">
footer!s
</footer>
html,body{
height: 100%;
width:100%;
margin: 0;
}
.page{
height: 100vh;
width:100%;
display:inline-block;
background-image: url('http://ulatbambu.com/images/google-images-water-background-clipart-35.jpg');
margin: 0;
padding: 0;
background-size: 100%;
background-color:blue;
}
.wrapper {
min-height: 85%;
background-color: white;
margin-bottom: -50px;
width:100%;
}
.footer, .push {
height: 50px;
background-color: transparent;
position: absolute;
display:inline-block;
bottom: 0;
left: 0;
width: 100%;
z-index: 9999;
text-align:center;
padding-top:20%;
}
<body>
<div class="page">
<div class="wrapper">
content!
<div class="push"></div>
</div>
<footer class="footer">
<span>footer!</span>
</footer>
</div>
</body>
Try this
Just try this
body,
html {
height: 100vh;
padding: 0;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
color: #000;
font-size: 25px;
}
.footer {
color: #fff;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
background: url('https://dummyimage.com/600x400/000/fff') center
center no-repeat;
background-size: cover;
}
<div class="wrapper">
content!
<footer class="footer">
footer!
</footer>
</div>
I have this page layout and am trying to make it occupy 100% of the height by expanding the content area and leaving the footer visible at the bottom of the page.
But for some reason the content area is not expanding. Do you know what I need to change in the code?
<body>
<form id="form1" runat="server">
<div>
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</div>
</form>
</body>
And here is the css
html, form
{
height: 100%;
}
body
{
padding: 0px;
margin: 0px;
background-image: url('../back.jpg');
height: 100%;
}
.main
{
margin: 0px auto;
width: 100%;
height: 100%;
}
.header
{
float: left;
width: 100%;
background-color: Yellow;
height: 80px;
}
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
height: auto;
min-height: 100%;
}
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
}
Thanks
You need to remove the extra div that has no class specified. Since that div has no height specified, the 100% height you are setting in the div with class main will not work.
<body>
<form id="form1" runat="server">
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</form>
</body>
UPDATE
Okay so fixing your issue with the footer not "sticking" to the bottom of the page, I modified part of your css.
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
padding-bottom: 50px;
min-height: 90%;
}
.footer
{
position: fixed;
bottom: 0;
left: 50%;
width: 960px;
margin-left: -480px;
height: 50px;
background-color: Green;
}
.content
padding-bottom: 50px; This is so extra content does not overflow into the space occupied by the footer.
.footer
position: fixed; We need this to force the positioning of the footer.
bottom: 0; This will force the footer to the bottom of the page.
left: 50%; Puts the left side of the footer div in the middle of the page.
margin-left: -480px; Move the div left of half of the width of the footer so it is now centered on the page.
Example 1: http://jsfiddle.net/nG9sm/
Example 2, lots of text: http://jsfiddle.net/9Up5F/
Your code has extra div with no class just remove it, it will fix the issue.
Updated fiddle
Update your .footer CSS:
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: absolute;
bottom: 0;
}
or
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: fixed;
bottom: 0;
}
Help Link
Make footer stick to bottom of page correctly
I am trying to implement cosntruction, described here.
<div id="wrap">
<div id="header">
header
</div>
<div id="main">
main<br/>main<br/>main<br/>main<br/>main<br/>main<br/>
</div>
</div>
<div id="footer">
footer
</div>
#header {
border-top:20px solid #fff;
height: 33px;
line-height: 33px;
text-align: center;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%;background-color:gray;}
#main {
overflow: auto;
padding-bottom: 53px; /* must be same height as the footer */
background-color: red;
border: solid 1px blue;
height: 90%;
}
#footer {
position: relative;
margin-top: -53px; /* negative value of footer height */
height: 33px;
line-height: 33px;
border-bottom:20px solid #fff;
text-align: center;
}
The whole page has background color (gray), header and footer are transparent (so you can see the page's background through it) and the content block has red background. Despite the fact that content part is stretchable it doesn't fill with the background the whole block, only the actual.
Is it possible to fill the whole content block with the color?
While minimizing window the footer floats on content. is it possible to disable such behaviour?
Here is a workaround of what you are looking for. Hope this helps.
Add this lines of code below to your code:
#main{
position: absolute;
top: 33px;
bottom: 33px;
left: 0;
right: 0;
}
#wrap{
position: relative;
}