I tried many tutorials on the web, tried javascripts but nothing worked for my footer. I simply want it to stick to the bottom. If I fix it in a page where the content go below the screen the footer won't work in a page which have content within the screen size. If I fixe one the other breaks. How can I fix this?
In this page the footer is correct : http://fast-garden-6871.herokuapp.com/logs
In this page its in the midle of the screen (you have to scroll) : http://fast-garden-6871.herokuapp.com/delegates
Please help!
Add this CSS Code:
.wrapper {
display: block;
}
Add this css
footer {
position: fixed;
bottom: 0;
width: 100%;
}
if your footer is the last element in your html, why don't you try...
body
{
padding-bottom: 0;
margin-bottom: 0;
}
footer
{
margin-bottom: 0;
}
or if the whole thing is wrapped in a .container div then do this instead:
.container { margin-bottom:0; }
try the simple code:
html file:
<div id="header"> Your header </div>
<div id="body"> Your body .. </div>
<div id="footer"> Your footer </div>
css file:
#header {
background-color: blue;
}
#body {
background-color: green;
min-height: calc(100vh - 18px - 200px); /* calc(100vh - {{use inspect for height of header}} - {{height of footer}}*/
}
#footer {
height: 200px;
background-color: red;
}
Related
I want to make my page scroll normally and stop and fix on a certain point, then scroll div, and after div is completely scrolled continue scrolling body as usual.
I've tried to disable scrolling of the page and work with the wheel event, adding margin top to my content, but it doesn't seem to be a good solution.
Example of what i want https://aimbulance.com/ilayaregeneration
Thanks!
Your example is not locking the scroll to the div, but masking the entire page and using position: sticky in order to achieve that.
SOLUTION
A possible solution is to make the div you want to be scrolled a container with position: relative that holds a masking element with position: absolute that covers the entire div and contains a mask that will be position: sticky with top: 0.
check out this example:
https://codesandbox.io/s/scrolled-div-jqw7z
Use overflow-y
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
#section1 {
height: 600px;
background-color: pink;
}
#section2 {
height: 600px;
background-color: yellow;
display: flex;
justify-content: center;
/* this is the usage */
overflow-y: auto;
}
#inner {
/* this height is larger than the parent */
height: 1200px;
width: 33%;
background: radial-gradient(circle, black, white);
overflow-y: auto;
}
#section3 {
height: 600px;
background-color: blue;
}
</style>
</head>
<body>
<div class="main" id="section1">
</div>
<div class="main" id="section2">
<div id="inner"></div>
</div>
<div class="main" id="section3">
</div>
</body>
</html>
Current my page has a menu bar and iframe section to load the items in the menu bar when clicked. I wanted the iframe to scroll but not the parent page (i want the menu bar fixed to the top).
But the parent page scroll as well. So I set position: fixed for the parent page, the Content below can only be scrolled to a point and will eventually be cut off (see image below). How do I resolve this issue?
Here is a way using display: table, flex would be another way.
html,
body { height: 100%; margin: 0 }
.container {
display: table;
width: 100%;
height: 100%;
}
.page-row {
display: table-row;
height: 0;
}
.page-row-expanded {
height: 100%;
}
main iframe {
display: block;
width: 100%;
height: 100%;
border: none;
}
.header {
background-color: #bbb;
padding: 10px;
}
<div class="container">
<header class="page-row">
<div class="header">
Navigation bar
</div>
</header>
<main class="page-row page-row-expanded">
<iframe src="http://www.w3schools.com/"></iframe>
</main>
</div>
I dont know if its more complicated because of
position:fixed;
but have a look over here: Scroll Down iFrame - jQuery/JS
Heres an image of my website right now: http://i.imgur.com/nE0a0cj.jpg
The section says "What is Spheroid" is ment to be my content container. However, I can't seem to make it go from the header to the footer.
My HTML code:
<div id="container">
<h2>What is Spheroid?</h2>
</div>
My CSS Code:
html, body {
background-image:url(001.png);
background-size: 100%;
background-repeat: no-repeat;
height: 100%;
}
#container {
width: 800px;
height: 100%;
text-align: center;
margin: 0 auto;
background-color: #38788E;
}
I've tried using the "height: 100vh;" property, but it makes the container go beyond the footer so the page needs to be scrolled.
Also think it might have to be done with JavaScript, but that's a field where I'm going to need some support.
Thank you guys in advance :)
EDIT -
So I figured from one of the answers, that my div was inside another div. So I fixed this, and with the same code as provided it not looks like this: http://i.imgur.com/vYRVqhN.png
Thought it might have been the bg size, but as it is only set to "cover" it shouldn't be the issue.
Finally got your requirement, flex box layout is your friend.
View the demo in full page mode:
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
background: #eee;
}
header {
height: 40px;
background: lightgreen;
}
#container {
flex: 1;
width: 800px;
background: yellow;
margin: 0 auto;
}
footer {
height: 30px;
background: lightblue;
}
<header>header</header>
<div id="container"></div>
<footer>footer</footer>
Another approach with box-sizing:
html, body {
height: 100%;
margin: 0;
}
body {
box-sizing: border-box;
padding-bottom: 70px;
background: #eee;
}
header {
height: 40px;
background: lightgreen;
}
#container {
width: 800px;
height: 100%;
background: yellow;
margin: 0 auto;
}
footer {
height: 30px;
background: lightblue;
}
<header>header</header>
<div id="container"></div>
<footer>footer</footer>
It seems like you placed your <div id="container"> inside another div or any parent element (except html and body). If so, the parent element/s don't have a height of 100%. If you add height:100%; to the parent element your container must fill the entire height of the parent element.
I tested your code provided and it's working.
I have a problem with sticky footer which has absolute position,
<div class="wrapper">
<div class="content">
<p>Content</p>
</div>
<div class="footer">
Footer
</div>
</div>
body {
height: 100%;
min-height: 100%;
overflow: hidden;
width: 100%
}
.wrapper {
position: absolute;
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
width: 100%;
overflow: auto;
background: blue;
}
.footer {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
When I do scroll down my footer also scrolled, when I remove height:100% footer works fine but I need height:100% for my scroll bar for wrapper because I disabled it in body (I need do it). I want to retain height:100% for body and .wrapper but that footer was always at bottom. How can I do it using css ?
i got the same issue, use height: 100vh; i hope works for you!
If you need your footer to always be at the bottom look at this fiddle: http://jsfiddle.net/2n9okg1b/3/
In the fiddle I amd using poition: fixed; in the footer CSS. Fixing the position tells the browser to always keep the elements where you defined them to be.
Update
I have updated the fiddle link. http://jsfiddle.net/2n9okg1b/3/
With this update I detect with jQuery if the footer is below the window. If the footer is below the window I set the footer position to fixed. If the footer is not below the window I set the footer's position to relative. This allows the footer to always be at the bottom of the content or at the bottom of the window.
I'd like a page with a sticky footer, and I'd like the content above it to be scroll-able, while maintaining the stickiness of the footer. But I don't want to hard-code the height of the content area, but instead would like its height to be all the available height except for the height of the footer.
In the long run I would even like for the height of the scroll-able content area to be re-sizable if the window is re-sized, but I'm getting ahead of myself. I'm presuming I'm going to need a combination of CSS and Javascript to acheive this, that CSS alone cannot acheive it?
I've researched of course and have found the CSS overflow property, but my CSS in general is not very good :( Below is some CSS/HTML I've cobbled together based on ryanfait.com's sticky footer tutorial, if somebody can give me some advice using this as a starting point. Bear in mind, I will need straight Javascript, not jQuery, as this will be used in a custom browser (http://tkhtml.tcl.tk/hv3.html). My Javascript unlike my CSS though is pretty good, so an answer combining specific CSS suggestions with general Javascript suggestions (which I will then flesh out), would be ideal.
<html>
<head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
EDIT: What I've attempted based on first two answers:
I've made the following modifications to the CSS based on parts of the two answers received so far:
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
overflow-y: scroll;
}
.footer {
bottom: 0;
height: 4em;
position: fixed;
}
</style>
What this gives me in Chrome are two scrollbars, one very faint, but the more prominent one still allowing content that overflows (maybe I'm using the term incorrectly?) outside of the wrapper area, and over the top (or under the bottom) of the footer, plus outside the entire body. Thanks for help making progress but I still need quite a bit of help. Here's a link to a screenshot of what I'm seeing; I used http://www.ipsum-generator.com/ to generate all the content.
http://dl.dropbox.com/u/44728447/dynamic_wrapper_sticky_footer.JPG
html, body {
height:100%;
overflow:hidden;
}
.wrapper {
overflow-y:scroll;
height: 90%;
}
.footer {
position:static;
bottom: 0;
height: 10%;
}
Demo: http://jsfiddle.net/vfSM3/
On the footer div use position fixed and bottom 0 like:
.footer {
bottom: 0;
height: 4em;
position: fixed;
}
If you want to use fixed height on the footer, you could do the following
.wrapper{
overflow-y:scroll;
height:calc(100% - 20px);
}
.footer {
position:static;
bottom: 0;
height: 20px;
}
Note that you need to use the spaces here "100% - 20px" in order for it to work.