I've got a laravel project with bootstrap added as css.
I've tried anything to get my sticky footer to work but as soon the page is longer then the window it stays at the bottom of the window when scrolled up.
My main:
<html>
<head>
<title>Justin van Horssen</title>
{{-- Bootrstrap 4.1.1 CSS --}}
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
</head>
<body>
<header>
#include('inc.nav')
</header>
<main role = "main" class="container">
#include('inc.messages')
#yield('content')
</main>
#include('inc.scripts')
<footer class="footer">
</footer>
</body>
My footer CSS:
.footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #003b6f;
}
There might be some problem with your html or body CSS.
As per the bootstrap 4 docs, the CSS should be like:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #003b6f;
}
For more ways to get a sticky footer, check out css tricks.
Thanks..hope it helps..cheers.
Related
I have a very simple problem: I want to have multiple <section>s inside a <main> tag. Each of the sections should contain a child <div> that is sticky so it is bound by the height of the section.
Now I have the problem that the <main> needs overflow-x: hidden to remove unwanted horizontal scrollbars (especially on Safari) but at the same time this line seems to disable the sticky elements. Any ideas how to solve this without JS?
This demo shows the problem. Uncomment the overflow to see the difference.
<!DOCTYPE html>
<html>
<head>
<style>
main {
width: 100%;
height: auto;
min-height: 100vh;
/*overflow-x: hidden;*/
position: relative;
display: block;
}
section {
width: 100%;
min-height: 100vh;
background: green;
}
div {
position: sticky;
top: 0;
}
</style>
</head>
<body>
<main>
<section>
<div>
<p>Content goes here</p>
</div>
</section>
<section>
<div>
<p>Second content goes here</p>
</div>
</section>
</main>
</body>
</html>
Position sticky normally doesn't work if parent element have overflow hidden property.
Instead of main try to give "overflow-x: hidden" to the body
body
{
overflow-x: hidden;
}
You may try below code,
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
main {
width: 100%;
height: auto;
min-height: 100vh;
/*overflow-x: hidden;*/
position: relative;
display: block;
}
section {
width: 100%;
min-height: 100vh;
background: green;
}
div {
position: sticky;
top: 0;
}
</style>
</head>
<body>
<main>
<section>
<div>
<p>Content goes here</p>
</div>
</section>
<section>
<div>
<p>Second content goes here</p>
</div>
</section>
</main>
</body>
</html>
Note: Also you may use overflow: auto; instead of overflow-x: hidden; for this particular task only.
For your reference please visit below link: https://www.w3schools.com/css/css_overflow.asp
I am trying to create a sticky footer but I'm getting empty space above and below my header & footer.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
position: relative;
height: 400px;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
What is the best way to create a sticky footer?
Can anyone explain why I've got this space appearing above header & below footer when I have content (h1 p) in in my header section.
For the header gap, your h1 and p tags have a default padding and margin, you may want to remove them or reduce them to your liking
h1, p {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
h1,p {
padding: 0;
margin: 0;
}
header {
background-color: orange;
position: relative;
height: 400px;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
A "sticky" div can be achieved using position: fixed; in your footer CSS. Fixed means that the on-screen position will never change. Or rather you should follow the instructions posted there.
Concerning the space, it is probably because of the default styles applied to h1. Use a debugger to see those default styles and override them with your custom css.
Firefox and Chrome have built in debuggers that also let you view styles and are very efficient for debugging. Usually right click > "inspect element" then go for the CSS tab which lets your select and see styles applied to elements.
In your example, you are not "resetting" the h1 and p tags. By default these elements have some extra margin.
Try adding the following code to your css.
h1, p {
margin: 0;
}
Also check out the HTML5 CSS Sticky Footer.
you may use flex prperties
.wrapper may scroll, header & footer are sticky
/* demo purpose */
.wrapper:hover:before {
content:'test';
display:block;
height:1000px;
}
/* end demo purpose*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display:flex;
flex-flow:column;
}
header {
background-color: orange;
position: relative;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
width: 100%;
height: 60px;
bottom: 0;
}
.wrapper {
flex:1;
overflow:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
or just footer is sticky ?, needs an extra imbrication
/* demo purpose */
.wrapper:hover:before {
content:'test';
display:block;
height:1000px;
}
/* end demo purpose*/html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body, main {
display: flex;
flex-flow: column;
}
header {
background-color: orange;
position: relative;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
height: 60px;
bottom: 0;
}
.wrapper, main {
flex: 1;
}
main {
overflow: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<main>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
</main>
<footer>
footer
</footer>
</body>
</html>
footer {
background-color: #202020;
color: white;
//replace absolute with fixed for sticky footer (as in, it sticks at the bottom.)
position: fixed;
width: 100%;
height: 60px;
bottom: 0;
}
I saw this comment you posted on another answer:
If desktop only, then I would go with fixed positioning; however, iOS has problems rendering fixed positioning at times. – SergeantHacker
Try removing height 100% from body and html.
I'm trying to make a website template and I just started with the header and navbar. I'm trying to position a div with some text inside the #header div. I set the position to relative and I used the top property but it's just not moving. Can someone explain to me why?
You need to remove the semicolon after the #header block in your CSS as this is preventing the browser from reading the next rule in the file:
#header {
width: 100%;
height: 700px;
background-image: url("poro.jpg");
background-size: 100%;
text-align: center;
};
That last semicolon shouldn't be there. The same is true of your semicola following the #navbar li and #header-msg blocks.
#header {
width: 100%;
height: 700px;
background-image: url("poro.jpg");
background-size: 100%;
text-align: center;
}
#navbar {
position: relative;
width: 75%;
height: 100px;
top: 100px;
}
#navbar li {
display: inline;
padding-right: 40px;
color: blue;
position: relative;
left: 350px;
}
#header-msg {
position: relative;
top: 300px;
}
<!DOCTYPE html>
<html>
<head>
<title>
Experimenting
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="header">
<div id="navbar">
<ul>
<li class="button">Home</li>
<li class="button">Shop</li>
<li class="button">Offers</li>
<li class="button">FAQ</li>
</ul>
</div>
<div id="header-msg">
<h1>We sell stuff.</h1>
<h3>You buy stuff.</h3>
</div>
</div>
</body>
</html>
Note: I made the #navbar li have blue text in the snippet so they stand out from the white background.
First delete semicolons after all { }. Next try to set
#header {
width: 100%;
height: 700px;
background-image: url("poro.jpg");
background-size: 100%;
text-align: center;
position: relative;
}
and change position of #header-msg to absolute:
#header-msg {
position: absolute;
top: 300px;
}
I just gave an extra space after the semicolon.
#header {
width: 100%;
height: 700px;
background-image: url("poro.jpg");
background-size: 100%;
text-align: center;
};
#navbar {
position: relative;
width: 75%;
height: 100px;
top: 100px;
};
#navbar li {
display: inline;
padding-right: 40px;
color: white;
position: relative;
left: 350px;
};
#header-msg {
position: relative;
top: 500px;
};
<!DOCTYPE html>
<html>
<head>
<title>
Experimenting
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="header">
<div id="navbar">
<ul>
<li class="button">Home</li>
<li class="button">Shop</li>
<li class="button">Offers</li>
<li class="button">FAQ</li>
</ul>
</div>
<div id="header-msg">
<h1>We sell stuff.</h1>
<h3>You buy stuff.</h3>
</div>
</div>
</body>
</html>
I have a site with two footers. One is very well behaved as a 'fixed' footer that is always visible at the bottom of the page. The other footer is larger and should be below all content, only appearing when all content is scrolled through (if the content is bigger than the page, it shouldn't be visible until you scroll to the bottom). However, it does need to be sticky so that if there's very little content it doesn't ride up and leave an awkward white gap.
Right now it's displaying in the middle of the page. :( Help?
html, body {
height: 100%;
width: 100%;
}
#PageContainer {
width: 100%;
height: 100%;
}
header {
width: 100%;
}
#Content {
position: relative;
background-image:url(Images/Golf%20Ball%20Texture.jpg);
background-repeat:repeat;
background-size: 150px auto;
width: 100%;
padding-left: 20px;
margin-left: -20px;
padding-right: 20px;
margin-right: -20px;
min-height: 90%;
}
footer {
width: 100%;
}
#MovingFooter {
clear: both;
position: absolute;
width: 100%;
background-color: #FFD600;
right: 0;
bottom: 0;
font-size: .9em;
}
#StickyFooter {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #787878;
padding-left: 20px;
margin-left: -20px;
padding-right: 20px;
margin-right: -20px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="Stylesheet" href="../style.css" type="text/css" />
<link rel="shortcut icon" href="Images/Logo%20Favicon.ico">
<title>Your Personality</title>
</head>
<div id="PageContainer">
<header>
</header>
<body>
<div id="Content">
</div> <!--id="Content"-->
<div id="MovingFooter">
<h2>Company Philosophy</h2>
<p>Footer content</p>
</div> <!--class="FooterThirds" -->
</div> <!-- class="ThirdsContainer" -->
</div> <!-- id="MovingFooter" -->
<div id="StickyFooter">
<p class="FancyFinePrint">© Copyright 2014 by Company Name. All Rights Reserved.</p>
<div id="FooterPartners">
<p class="FooterPartnerText">Proud Partners With:</p>
</div> <!-- id="FooterPartners" -->
</div> <!-- id="StickyFooter" -->
</div> <!-- id="PageContainer" -->
</body>
You're looking for a technique like FooterStickAlt, which keeps the footer below the content, but also keeps the footer at the bottom of the viewport if the content isn't as tall enough to push it down that far.
Put simply, everything except the footer gets wrapped in a containing element which has min-height: 100%, and then the footer is pulled up with a negative top margin. This particular technique necessitates knowing the height of your sticky footer.
https://css-tricks.com/snippets/css/sticky-footer/ and http://cssstickyfooter.com are the same idea.
I just want the footer to appear on top of the background image. There is a background image which is the color and a logo of the company full screen except of the bottom 2 cm. There I want simple text with a link. Will do that myself, but cant get the text on top of the background color or background image.
Here is the HTML:
<link href="voorblad.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.poptrox-1.0.js"></script>
<script type="text/javascript" src="static_init.js"></script>
</head>
<body>
<div id="bg1"></div>
<img alt="full screen background image" src="gallery/voorblad.jpg" id="full-screen-background-image" />
<div id="wrapper">
</div>
<footer>
<p><h2>Framing your memories. Enter here. </h2></p>
</footer>
</body>
</html>
And here is my css:
#charset "utf-8";
/* CSS Document */
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow-y:hidden;
}
#full-screen-background-image {
z-index: 2;
min-height: 90%;
min-width: 1024px;
width: 100%;
height: auto;
position: relative;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
#bg1 {
min-width: 1255px;
width: 100%;
height: 1090px;
background: url(images/bg1.jpg) top center no-repeat;
position: absolute;
top: 0;
z-index: 1;
}
#footer {
position:relative;
bottom:0;
z-index: 3;
}
A few basic things:
What is the purpose of the empty bg1 and wrapper divs?
You have css for an element with ID 'footer', but there is no such element in your html.
Wrapping an h2 tag in a p tag is semantically incorrect.
A quick clean-up gives us something like this:
<body>
<div id="full-screen-background-image"></div>
<div id="footer">
<h2>Framing your memories. Enter here. </h2>
</div>
</body>
Try adding a working jsfiddle so people can help you better. I can't access your local image, so I used a red background. See this fiddle for a basic idea of positioning one item on top of another: https://jsfiddle.net/cp35y75z/1/
If you use position: absolute instead of position: relative the element will not take up space in the DOM, meaning there will be no white space where the footer would have been originally.
To style the footer make sure you take away the # unless you have an ID on the element. The proper css should look like this:
footer {
position:relative;
bottom:0;
z-index: 3;
}