My code
.bid-toolbar {
background:#FFCD2F !important;
height:70px !important;
position: fixed;
bottom: 0;
I want to make the yellow toolbar stick to the bottom. I have tried a few times to make this toolbar to the bottom, but whenever I make it
fixed
, it goes up as I scroll the page down as you can see in the image below.
Using position: fixed often causes problems in mobile browsers. You can use display:flex in combination with overflow:auto to get a fixed footer without using fixed postioning:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.Row {
flex: 0 0 auto;
}
.Row.Expand {
overflow: auto;
flex: 1 1 auto;
}
</style>
</head>
<body>
<div class="Frame">
<div class="Row Expand"><h2>Awesome content</h2></div>
<div class="Row"><h3>Sticky footer</h3></div>
</div>
</body>
</html>
A working example: https://jsfiddle.net/9L2reymy/2/
This is the original answer, which hides the footer if the content is bigger than the screen height:
I wrote an article in my blog about fixed footers and implemented them with display:table instead. Here is the relevant code in a simple example:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: table;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
</style>
</head>
<body>
<div class="Frame">
<div class="Row Expand"><h2>Awesome content</h2></div>
<div class="Row"><h3>Sticky footer</h3></div>
</div>
</body>
</html>
Instead of position:fixed make it absolute property of position like
position:absolute;
position:absoulute; left:0px; bottom:0px; z-index:999;
You can try adding:
-webkit-transform: translateZ(0);
Or this was actually just the device/browser issues.
You can use jQuery to keep the bid toolbar bottom try the this code and note I used an ID #bid_toolBar you can change it to class if you want to.
$(document).ready( function() {
var bid_toolBarHeight = 0,
bid_toolBarTop = 0,
$bid_toolBar = $("#bid_toolBar");
positionbid_toolBar();
function positionbid_toolBar() {
bid_toolBarHeight = $bid_toolBar.height();
bid_toolBarTop = ($(window).scrollTop()+$(window).height()-bid_toolBarHeight)+"px";
if ( ($(document.body).height()+bid_toolBarHeight) < $(window).height()) {
$bid_toolBar.css({
position: "absolute"
}).animate({
top: bid_toolBarTop
})
} else {
$bid_toolBar.css({
position: "static"
})
}
}
$(window)
.scroll(positionbid_toolBar)
.resize(positionbid_toolBar)
});
Related
I know this is a duplicate question, I've read through many questions on this particular question like this one.
But I can't for the life of me get mine to work. I've tried many combinations of height and min-height for my html and body, using both % and vh. I tried setting the margin to 0 as well but that doesn't help. I tried this on both Chrome and Firefox, neither browser works. There were some answers that suggested using position: absolute but that messes up the styling for all the content I have.
Some combos I tried:
html, body{
height: 100%;
min-height: 100%;
}
html{
height: 100%;
}
body {
min-height: 100%;
}
html{
height: 100%;
margin: 0;
}
body {
margin: 0;
min-height: 100%;
}
My HTML layout:
<html>
<head>
... stuff
</head>
<body class=".container">
... stuff
</body>
</html>
You can use a fixed position for the bottom, but that can leave you with display problems as content gets covered.
I recommend using something like
body {
height: calc(100vh - 100px);
}
if you want to leave 100 px for your header and footer
What you're looking for is position: fixed, which tells the element to be fixed to that location, regardless of the other content. Couple this with bottom: 0, to state that the element should be fixed to the bottom of the page:
body {
margin: 0;
}
div {
padding: 5px;
}
.container {
background: #DDD;
height: 50px;
}
.footer {
position: fixed;
bottom: 0px;
height: 20px;
width: 100%;
background: #DDD;
}
<body>
<div class="container">Text</div>
<div class="footer">Copyright</div>
</body>
Hope this helps! :)
Solution :You can use the html 5 elements like
Header,
Article,
Section,
Footer
And set there height and width according to your requirements...
you can use this code to create a fixed footer at the bottom of your page
.yourfooterclass {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
basically what this is doing is positioning the footer at the very bottom of the page, so it doesnt matter how much content you have on the page it will always be at the bottomn
Since I couldn't change anything on the height-property of the body, I found this solution at https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/1, also pure CSS:
The html structure:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
And the CSS accordingly:
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
I've tried the following for my site-footer to stay at the bottom of one page only. (On all other pages, it works as planned but not on one, why is that?)
This is what I am using and although it works, it doesn't work across all mobiles/tablet devices.
help?
I was not exploring your queries, but nowadays you can achieve sticky footer with following markup:
<div class="page-wrapper">
<header>Hi! I'm Header!</header>
<main>And I'm Main content section! Let's rock!</main>
<footer>Hi! I'm Footer!</footer>
</div>
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
min-height: 100vh;
width: 100%;
}
header,
footer {
height: 50px;
}
main {
flex: 1;
}
See the fiddle over here
I have used this method in the past and it works perfectly.
HTML:
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
CSS:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
This CSS rule not working..
#wrapper{
height:100%;
width:100%;
background-color: aliceblue;
}
The wrapper does not take the full height of the page..
Just try like below it will be work for your issue.
First, pick the div which was you want to make 100% height of your any device and then apply CSS like below.
.wrapper {
height: 100vh;
}
For make your section or div height same as well as your device height you have to use VH, It's called viewport height.
I am trying to create a div for which I set the height should be same as that of my page.
height:100%
means nothing by itself...it hs to be 100% of something..and those numbers have to be calculable all the way up the parent-child chain.
So what can the wrapper be 100% of? The answer is the <body> which itself is a child of the <html> element.
Once we set those, it all works as you can't go up the chain any further than the <html> element which is the height of the viewport.
html,
body {
height: 100%;
margin: 0;
}
#wrapper {
height: 100%;
background-color: blue;
}
<div id="wrapper"></div>
That said, I'd go with min-height:100% on the wrapper to allow for overflow issues if the content exceeds the vireport height.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%;
background-color: blue;
}
.expander {
height:1000px;
}
<div id="wrapper">
<div class="expander"></div>
</div>
<!DOCTYPE html>
<style>
img.normal {
height: auto;
}
img.big {
height: 500px;
}
p.ex {
height: 100px;
width: 100px;
}
</style>
<title></title>
</head>
<body>
<img class="normal" height="84" src="hari.jpg" width="95"><br>
<img class="big" height="84" src="hari.jpg" width="95">
<p class="ex">
sample
</p>
</body>
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 am trying to work on a new project using Twitter's Bootstrap framework, but I am having an issue. I want a full body background, yet the background seems to be limited to the height of the container div. here is the HTML/CSS code:
<!doctype html>
<html lang="en">
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<title>Bootstrap Issue</title>
<style>
body { background: black; }
.container { background: white; }
</style>
</head>
<body>
<div class="container">
<h1> Hello, World!</h1>
</div>
</body>
</html>
How can I get the body to take up the entire screen?
You need to either add this:
html { background: transparent }
Or, set the "page background" (background: black) on html instead, which is fine to do.
Why? Inside Bootstrap, there's this:
html,body{background-color:#ffffff;}
(bear in mind the default background value is transparent)
For more information on why this matters, see: What is the difference between applying css rules to html compared to body?
Note that this is no longer an issue with Bootstrap 3+.
Set the height of html and body to be 100% in the CSS.
html, body { height: 100%; }
Then it should work. The problem is that the height of body is automatically calculated to be the height of the contents, rather than the height of the whole screen.
/* here is a pure CSS solution */
<style type="text/css">
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
a:link, a:visited, a:hover {
color: #333;
font-style: italic;
}
a.to-top:link,
a.to-top:visited,
a.to-top:hover {
margin-top: 1000px;
display: block;
font-weight: bold;
padding-bottom: 30px;
font-size: 30px;
}
</style>
<body>
<img src="/background.jpg" id="full-screen-background-image" />
<div id="wrapper">
<p>Content goes here...</p>
</div>
</body>
<style>
body { background: url(background.png); }
.container { background: ; }
</style>
this works for a background image if you want it
best solution would be
.content{
background-color:red;
height: 100%;
min-height: 100vh;
}
its automatically take veiwport height(vh) in bootstrap.