React page keep footer at the bottom of the page - javascript

I have a problem when try to fix footer at bottom of the page as below picture:
Although I google and see many suggestions, but I'm still facing the problem. I suspect this problem is <div data-reactroot></div> cannot be set height 100% as its parents. Could anyone help me?
Thanks in advance!
Update:
Style of footer:
borderTop: '1px solid #ddd',
height: '60px',
lineHeight: '60px',
backgroundColor: 'white'

You need to tell your footer to position itself to the bottom of the surrounding container:
Footer css:
position:absolute;
left:0;
bottom:0;
right:0;
And for the container (the react-root div):
padding-bottom:60px;
As an alternative (if you don't need to support IE 8) you could try this style on the div.container :
height: calc(100% - 60px);

For any other person the above solutions do not work for, you could try the following steps:
Give the parent div a non-static position such as relative (remember the default position is static)
Give the parent div a minimum height of 100vh; this enables it to take up all available space vertically
Then for the footer (child), which should be wrapped in a div if not one, give it the following properties; position: absolute; bottom: 0; width: 100%.
UPDATE: In some cases, setting the footer div position to absolute may not work. In such a case, use relative instead.
Hopefully, the steps above should fix it :-)

It is important to have content wrapper and set its min-height to 100vh:
min-height: 100vh; (100% of the viewport height)
min-height: 100%; (100% of the parent's element height)
Look at here is very well explained and worked for me:
https://medium.com/#zerox/keep-that-damn-footer-at-the-bottom-c7a921cb9551

One trick I believe everyone is missing here is that in React after html and body element, there is also a div with #root which encloses the entire content. Please refer to the image below.
So, it is required to make the height 100% of all 3 i.e. html, body and #root.
html, body, #root {
height: 100%;
}
Then add these properties in #root:
#root {
display: flex;
flex-direction: column;
}
You must wonder that why this the #root needs to be flex and not the body. The reason is that it is the innermost parent or I should say the closest parent of the footer.
Now, finally just do this for the footer:
footer: { margin-top: auto }
What the above line does is it pushes the footer at the end of its parent.
As simple as that. Nothing fancy here. No need to do any calc on height or change the position of footer.

I would change the footer css as follows:
position: fixed;
left:0;
bottom:0;
right:0;
It is possible to have a position: absolute but it won't be scrolling-friendly.

flex-grow
Quite late to the party but my solution was:
<div className="layout">
<Navbar />
<main>
{children}
</main>
<Footer />
</div>
.layout {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.layout main {
flex-grow: 1;
}

Are you trying to have a wrapper for your page so you can absolutely position the footer at the bottom? If so, you can create a new component with relative position for that and pass the others in as children and give your footer absolute positioning at the bottom.

Wish I read it earlier.
Here is the snippet for Ikechuk answer and note that now the footer also respect the margin (which may not in any other answers above):
html, body, div{
height:100%;
width:100%
display:block;
}
footer{
position:absolute;
bottom:0;
display:block;
width:100%
}
hr{
display: block;
unicode-bidi: isolate;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
margin-inline-start: auto;
margin-inline-end: auto;
overflow: hidden;
border-style: inset;
border-width: 1px;
}
<html>
<body>
<div style={"margin=5%;"}>
<div style={"position:relative"}>
<footer>
<hr>
I am footer
</footer>
</div>
</div>
</body>
</html>

Thank you, #mwoelk had the question answered. I just would like to make it clearer for the beginner.
Step 1 --- Footer css:
.Footer {
position: fixed;
left: 0;
bottom: 0;
right: 0;
}
Step 2 --- Wraper of Footer css: (Let's use React as an example, usually footer is wrapped inside .App. The reason for adding padding bottom is to avoid some part of the content is covered by Footer at the bottom if content is too long.)
.App {
padding-bottom: 60px;
}

Related

Keep footer at the bottom of the page but make the page grow as needed

I have this CSS code for a footer:
.footer {
width:100%;
margin:0 auto;
padding-top:20px;
padding-bottom:40px;
position:absolute !important;
bottom:0; !important;
}
What I need to do is to be able to make the page to grow as the elements above the footer grows like textbox or something above it. However the code above makes the footer stick and the elements above overlaps with the footer.
Is there a quick CSS fix for this kind of scenario or jQuery is needed for this?
You're looking for a sticky footer: take a look at my article.
It's written in polish but you have both CSS and XHTML extra easy to understand. Feel free to use it. :)
Check this out ;
Sticky Footer
Or in specific, you can use these properties for your CSS on footer:
footer {
position: relative;
z-index: -2;
height: 300px;
background: none repeat scroll 0% 0% #31353A;
font-size: 12px;
color: #CCC;
text-align: center;
}
Only while you have your main contents set to position: relative;
I hope it helped.
JSfiddle link
.site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.site-content {
flex: 1;
}

CSS: Performance wise, better to use calc or position absolute

I have a container div with fixed height. Inside two divs, the top height: 50px and the other one must fill the empty space but allowing internal scroll.
Now I have two options:
#up{
height: 50px;
}
#down{
position: absolute;
top: 50px;
bottom: 0;
}
or:
#up{
height: 50px;
}
#down{
height: calc(100% - 50px);
}
If I have many of these cases inside my window, which one is the best to use performance wise?
This Fiddle
ps. I don't care about old browser support.
I would always work with calc option. Both could look the same but they are not.
When you use position:absolute You are taking the container #down out of the html flow.
This means that if anytime you are going to add more stuff to your project, You will have many problems positioning them.
As an example, if you want to add another container below #down (a footer maybe), in your first option it will be placed overlapping #down container right below your header. In the second option it will be placed where you want it.
One way to fill the space would be to use flexbox.
.container {
display: flex;
flex-direction: column;
height: 200px;
}
#up {
background: yellow;
flex: 0 0 50px;
}
#down {
background: orange;
flex: 1 1 auto;
}
<div class="container">
<div id="up">
up
</div>
<div id="down">
down
</div>
</div>

Hide scroll bar of nested div, but still make it scrollable [duplicate]

This question already has answers here:
Hide scroll bar, but while still being able to scroll
(42 answers)
Closed 8 years ago.
This is a reference that I used, which explains how to make a div scrollable with its scroll bar hidden. The only difference is that I have nested divs. Check my fiddle
HTML:
<div id="main">
<div id="sub-main">
<div id="content">
<div id="item-container">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
</div>
</div>
</div>
CSS:
#main {
width: 500px;
height: 500px;
}
#sub-main {
width: 500px;
height: 500px;
overflow: hidden;
}
#content {
background-color: red;
width: 500px;
height: 500px;
overflow: auto;
}
#item-container {
width: 1500px;
height: 500px;
}
.item {
width: 500px;
height: 500px;
font-size: 25em;
text-align: center;
float: left;
}
Like above, I have a overflowed horizontal div and I want to hide its scroll bar. I have to make it still scrollable because $.scrollTo() wouldn't work otherwise.
UPDATE:
I have read all the answers, but I still have not resolved my problem and don't know what's causing it. This is the live that's having troubles.
Basically, I am trying to follow this almost exactly the same, but there must be some reason that my website isn't working as expected. There are two problems.
When I set overflow: hidden to a parent container of scrollable items, I cannot scroll (native javascript scroll functions do not work too).
I want to scroll just the overflowed container, not the entire window. This can be done by setting a target in $.localScroll({ target: '#projects-content' }) but nothing scrolls when I set the target. If I don't, scrolling works as long as overflow:hidden is not applied.
Again, any help would be greatly appreciated.
HTML:
<div id="projects"> <!-- start of entire projects page -->
<div id="project-sidebar">
<a href="#project-first">
<div class="sidebar-item sidebar-first">first</div>
</a>
<a href="#project-second">
<div class="sidebar-item sidebar-second">second</div>
</a>
<a href="#">
<div class="sidebar-item sidebar-third">third</div>
</a>
</div>
<div id="project-content"> <!-- this must be the scrollable itmes' container, not the entire window -->
<div id="project-first" class="project-item">
<!-- these items should be scrollable -->
<div class="project-subitem" id="first-sub1">
<a href='#first-sub2' class='next'>next</a>
</div>
<div class='project-subitem' id='first-sub2'>
<a href='#first-sub1' class='prev'>prev</a>
</div>
<!-- end of scrollable items -->
</div>
</div> <!-- end of scroll scroll container -->
</div> <!-- end of entire projects page -->
<script>
// FIXME: when I set target, nothing scrolls.
// But I don't want the entire window to scroll
$('#projects').localScroll({
//target: '#project-content',
hash: false
});
</script>
CSS
#project-content {
width: 80%;
height: 100%;
position: relative;
float: left;
}
#project-sidebar {
float: left;
width: 20%;
height: 100%;
}
.project-item {
width: 300%;
height: 100%;
}
.project-subitem {
height: 100%;
width: 33.33%;
position: relative;
float: left;
}
Update:
After I added overflow:scroll to #project-content, the scrolling works as expected. All I need now is making scroll bars disappear in #project-content. I tried adding overflow:hidden to its parent but had no success. I also tried adding it to html, body, but then the entire document refuses to accept any scrolling functions like scrollTop().
Any help will be greatly appreciated!
Theory :
The technique is to use a parent container that is shorter than the child element with scrollbar. This image shows what I mean :
Practice :
In your case, I suggest using absolute positionning and negative bottom value on #project-content so it overflows it's parent container (#projects) at the bottom.
The point is now what negative value? It should be the same value as the with of a scroll but scrollbars are never the same width according to browsers. So I suggest giving a bigger value : -30pxto be sure it is hidden. You will just need to be carefull that you don't have content to close to the bottom that can be hidden on browesers with thin scrollbars.
This is the CSS you should add to your website :
#projects{
position: relative;
}
#project-content{
position: absolute;
top: 0;
left: 20%;
bottom: -30px;
/* remove:
height: 100%;
position: relative;
float: left;
padding-bottom: -15px
/*
}
scollbars take up around 20px so just make you scrollable div 20px taller and 20px wider and your scrollbars will be hidden:
#content {
background-color: red;
width: 520px;
height: 520px;
overflow: auto;
}
Example
It's kind of cheating but could you hide it behind the #content like this DEMO
#content {
background-color: red;
width: 500px;
height: 480px;
overflow: hidden;
}
#item-container {
width: 1500px;
height: 500px;
overflow: scroll;
}
If you know all containers that can be scrollable, you can hide scrollbar with CSS and a little bit of JS. For webkit-based browsers (safari, google chrome, opera) it will be CSS-only solution to set scrollbar width to 0. For IE, Firefox and other non-webkit browsers you should calculate scrollbar width that will be used as negative margin-right for you scrollable content.
To do so you should wrap your content into div with overflow-y:scroll to always show vertical scrollbar and hide this scrollbar with margin-right:-17px and parent overflow:hidden. Example is here. No need to set fixed width, nor height.
This is the way that used in jQuery Scrollbar. Hiding horizontal scrollbar is more complicated and requires to handle content changes to recalculate container height.
I basicly add padding:0 1em 1em 0; to the element where it is supposed to be hidden , this hides both scrollbars if parent has overflow: hidden. tune padding-bottom or only padding-right, if it is to hide only one of them.
1em is average width of scroll bars in most browsers :
http://jsfiddle.net/5GCsJ/912/
The solution to make the content itself with horizontal scroll.
Just increase the height of #main, and #content.
#main {
width: 500px;
height: 520px;
}
#sub-main {
overflow: hidden;
}
#content {
background-color: red;
width: 500px;
height: 520px;
overflow: auto;
}
#item-container {
width: 1500px;
height: 500px;
overflow: hidden;
}
.item {
width: 500px;
height: 500px;
font-size: 25em;
text-align: center;
float: left;
}
Use a script to create custom scrollbars.
http://manos.malihu.gr/jquery-custom-content-scroller/
Then use CSS(or modify script or change script config) to hide the custom scrollbars.
I did this crudely using jQuery and your example
Check this fiddle:
I simply detected the direction of the scroll-wheel and pushed the horiz-scroll bar with jQuery
$(document).ready(function(){
$('#content').bind('mousewheel', function(e){
var curScroll = $("#content").scrollLeft();
if(e.originalEvent.wheelDelta > 0) {
$("#content").scrollLeft(curScroll-500);
} else {
$("#content").scrollLeft(curScroll+500);
}
});
});
It is "crude" because I hard-coded some values like the 500px amount to scroll, you could write some more javascript to detect dynamically how much to scroll. Plus I don't know if the wheelDelta value will be +120 for up and -120 for down, for you and other users.
Also note that the scrolLeft() can be animated.. for smoother transitions.

CSS position fixed. Div wrapper must be fixed vertically but must be varying in horizontally

I have a div , something like this
#footer
{ position:fixed;
left:40px;
top:0px;
}
The position is fixed when I scroll vertically or horizontally. But i want the div to be fixed when user scrolls the scroll bar vertically but should be varying when user scrolls the scroll-bar horizontally.
I have seen some of the forums and posts but mostly I found jquery script.I want to know if there is a way to do it in CSS?
Fixed position in only one direction
I read this post but I did not understand the jquery script. Kindly let me know the way to do it in css or the better way to do it with jquery.Thanks
Seems to be impossible to get this "look fine" with only CSS/HTML.
As mentioned from Ruup or Fixed position in only one direction, layering over JS for it, is a good option.
Fortunately, i found a way to get it work somehow (not that beautiful):
http://jsfiddle.net/MKEbW/5/
HTML (inside the body-tag):
<div id="simulated-html">
<div id="footer">
<span>
<!-- Footer text here -->
</span>
</div>
<div id="simulated-body">
<!-- Your website here -->
</div>
</div>
CSS:
* { margin:0; padding:0; }
html {
font: 12px/1.5em Georgia;
}
p { padding: 5px; }
html, body {
height: 100%;
overflow: hidden; /* hide scrollbars, we create our own */
}
#simulated-html {
background: orange;
overflow-x: scroll; /* force horizontal scrollbars (optional) */
overflow-y: hidden; /* hide. we use the #simulated-body for it. */
position: relative; /* to align #footer on #simulated-html */
height: 100%;
}
#simulated-body {
overflow-y: scroll; /* force vertical scrollbars (optional) */
overflow-x: hidden; /* hide. we use the #simulated-html for it. */
height: 100%;
background: #eee;
/* use as a container */
width: 450px;
margin: 0 auto;
}
#footer {
position: absolute;
bottom: 0px; /* vertical align it to #simulated-html */
width: 100%;
background: red;
z-index: 99; /* always show footer */
color: white;
}
#footer span {
width: 450px;
margin: 0 auto;
background: green;
display: block;
}
​
Seems to work in IE7+ and modern browsers, tested via browserlab.adobe.com.
Tested with scrollbars, smaller and wider viewports in Chrome 18.
I recommend a fallback for not capable browsers and/or a JS workaround.
The linked post is exactly what you need. You can copy the exact script.
$(window).scroll(function(){
$('#footer').css('left','-'+$(window).scrollLeft());
});
The div css is like this (probably not footer when it has top 0px :P but ok)
#footer
{ position:fixed;
left:40px;
top:0px;
}
When you scroll the jquery script just adjusts the left(x) coordinate to the same value as the scrollLeft of the window.
There is a small fix on the previous code.
The changed javascript code for moving fixed div horizontally
$(window).scroll(function(){
$('#footer').css('left',-$(window).scrollLeft());
});
how should the horizontal axis vary? the way this code is currently it would stay 40px from the left at all times. in order to make the left margin change position relative to the size of the window you must use percentages and negative margins. for instance, to center a fixed div:
#centered {
height: 350px;
top: 0;
position: fixed;
width: 1024px;
left: 50%;
margin-left: -512px;
z-index: 9999;
}
notice that your negative margin must be HALF the width of your div. if you want it 40px to the left of center then you would add another 40px to margin-left.

Force a div to go to bottom

I browsed the same question in SO, and none of them worked well [Cross Browser compatible] .
So, i'm looking for the same job to solve with jQuery.
I want to place the div at the bottom of the HTML page, not to the bottom of the screen.
I've tried with CSS only so far
clear: both;
min-height: 6%;
position: fixed;
bottom: 0;
Edit
My CSS
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
#footer {
width: 100%;
height: 6%;
position: absolute;
bottom:0px;
left:0px;
}
#content {
float: left;
width: 59.5%;
height: 83%;
position:relative;
}
#news {
z-index:2;
}
<html>
<div id="content">
<div id="news"> </div>
</div>
<div id="footer"></div>
<html>
I believe you want sticky footer after all.
jsfiddle demo
It uses this sticky footer.
Basic idea is to use that sticky footer or basically any Sticky footer and then color your #wrap, because it will cover the whole viewport vertically
Set height of body and html to 100%, then create a wrapper for the entire body that has position: relative and height:100%, when you have the element inside this wrapper it will align to the bottom.
<html
<body>
<div id="body-wrapper">
<div id="bottom"></div>
</div>
</body>
</html>
With CSS:
body, html {
height:100%;
}
#body-wrapper {
height:100%;
position:relative;
}
#bottom {
position:absolute;
bottom:0px;
left:0px;
}
Here is what happens without a wrapper: http://jsfiddle.net/Cj4c2/1/
And here it is with a wrapper: http://jsfiddle.net/CPSt6/
You should use position: absolute; bottom: 0px; That way div should be always on bottom of wrapping element. Wrapping element should have position: relative;
Please refer to the css document:
An element with fixed position is positioned relative to the browser window.
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is
src: http://www.w3schools.com/css/css_positioning.asp
so you should use position:absolute.

Categories