In my react project, my footer is overlapping my elements near the bottom of the page.
see live project here: https://surpay-app.herokuapp.com/#/?_k=wo17rb
I have looked at many other questions about this topic as this is a common issue, but I think mine has to do with different react components acting strangely with one another.
I've tried to play with the margins, of the body, as well as the content. I've played with overflow as well as different display styles for the footer. None of this fix the issue. I'd like the footer to stick to the bottom (so i have a position: fixed) but I dont want it overlapping my content. Adding bottom margin to body doesnt help either.
It seems like this shouldn't be an issue anyway, given that the footer is a component that is rendered after the rest of the content. Here is the JSX:
render() {
return (
<div>
<Navigation />
{this.props.children}
<Footer />
</div>
);
}
You need to add a margin to the bottom of body to account for the space taken up by the fixed footer:
body {
margin-bottom: 80px; // footer height plus 10px
}
Nothing to do with react. It's your css that's wrong.
Add all the <footer /> styles to the <div class="Footer" /> instead.
.Footer {
height: 70px;
position: fixed;
bottom: 0;
background: #201D1E;
padding: 10px 0;
width: 100%;
}
.footer {
padding: inherit;
}
Having the wrapped in a div called Footer just seems like bad html though. Doesn't make sense.
On body remove height and add padding-bottom: 70px.
On #app change height: 100% to min-height: 100vh
On .homePage change height: 400px to min-height: 400px
On .Footer remove height: 70px
It happened to me while using CSS-Flexbox,
Try this:
.mydiv{
display: flex;
flex-direction: column;
}
for example: having two React Components one after the other, Let's say we want to render the following:
return(
<div className="mydiv">
<Comp1 />
<Comp2 />
</div>
)
Related
When the user goes at the end of the page with the scrool, there he can see the footer. the footer must appear only at the end of bottom when the user go at the end. My code work when there are a lot of components in the page, so the footer does what I want. The problem is when the page has a little component the footer appears in this way:
My CSS are :
html{
min-height: 100% !important
position: relative !important
}
#footer{
background-color: #30373d
width: 100%
position: relative
height: auto
}
<div id="footer"></div>
Anyone can help m
Just add a wrapper around your content and give it a min-height:100vh; (or whatever height suits your actual layout) property like below.
If you want the footer to always appear at the bottom of the page, set it to positon:absolute;
body {
padding: 0;
margin: 0;
}
#wrapper {
min-height: 100vh;
}
footer {
min-height: 100px;
width: 100%;
background: black;
}
<div id='wrapper'>
very little content
</div>
<footer></footer>
Instead of working on the footer, work on the content. Given that your footer has a fixed dimension you can ensure the body content will always take at least the portion of the empty screen minus the footer size. For example you could specify your content min-height like this:
.content {
min-height: calc(100vh - footerDimension)
}
I am developing a single-page application consisting of a navbar and a router-outlet which displays the component selected in the navbar. The primary component which loads by default is a Leaflet map which I would like to fill the entire page aside from the navbar. Currently I cannot even get the main component to fill the whole page, as it insists on including white space on the sides. I've set the container to have a high-res background image so I can see how much space it is actually filling.
The main page with all its unnecessary whitespace
The code:
app.component.html
<body>
<app-nav-menu></app-nav-menu>
<div class="container" id="main-container">
<router-outlet></router-outlet>
</div>
</body>
styles.css
body {
height: 98vh;
width: 98vw;
}
html, body, .container {
height: 100%;
overflow: hidden;
width: 100%;
}
#main-container {
background-image: url("src/assets/chicago-wallpaper.jpg");
width: 98vw;
height: 94vh;
}
Matthew Allen seems to have supplied the embarrassingly simple answer. Bootstrap had applied a max-width rule to .container, and setting "max-width: none" in styles.css lets the map fill the page.
The body tag in your html page has a default padding.
So, you need to remove that padding by adding the following code.
"style.css"
body {
width: 100%;
height: 100vh; /* This take the whole viewport height */
margin: 0;
padding: 0; /* Remove the default padding */
}
If you add float:left to all elements in the css that could help.
This seems to be the most perplexing issue of all time, at least for me. Knowing that this page, aside from the header is broken - I have copied the HTML and tried to carefully remove the WordPress related jazz so you get the html of the page.
JsBin Live Page
What I want you to focus on is the footer sitting in the middle of the page. I remove position:absolute and it sort of moves down.... It needs to stay at the bottom of the page.
This is position:fixed this is the only way it stay at the bottom, but see how the footer follows you? I don't want that.
You might say, do min-height: 100% That is not what I want either because then the container, row and column classes that have height of 100% do not work.
What I am trying to accomplish is: this type of layout. But as you can see the footer rides up...
Yes I have tried position:relative as well: check out position:Relative
So as you can see The Live page I linked you too, from everythin gI read on the internet is the right way to achieve this type of layout., How ever I must be doing something wrong ...
Update 1
Before you suggest I am missing divs, I have validated through a div checker for all of MY example and the divs are correct. I am not missing any divs. This is a pure css issue
Before you mark this a duplicate of x, y and z - I have provided three examples of the positions I have tried and none of them has worked:
position:absolute
position:relative
position:fixed - Not what I want. The footer MUST stay at the bottom of the page.
Finally, as stated min-height: 100% on the wrapper (or any other element) is not acceptable as an answer unless you can specify how I can achieve this type of layout.
The way i usually do this, is to add position: relative to html and position: absolute to the footer itself.
The main disadvantage that you have to set margin-bottom=footer-height for the body
<!doctype html>
<html>
<head>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 100px; // is equal to footer height
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="footer">footer</div>
</body>
</html>
See the result https://jsfiddle.net/jy0gsgm4/
Removing height:100% from wrapper stops the spacing below the footer.
This is happening because the total height is the 100% wrapper and the height of the navbar. I would suggest putting the navbar into the wrapper div.
I'm a fan of this method.
display: inline-block;
Pretty self explanatory. HTML (Demo)
<div class="verycoolwrapper">
<!-- tons of cool stuff on page -->
<footer id="footerstay">Blah | Blah2 | Hey | Click Here | Copyright 2090</footer>
</div><!-- // end wrapper -->
CSS: (Demo)
.verycoolwrapper {
width: 960px;
background: pink;
margin: 0 auto;
position: relative; // child elements relative to this, no height needed
}
#footerstay {
// your styles
width: 100%;
height: 150px;
background: #ccc;
display: inline-block;
}
Also, alternately; clear float should work for you.
I am trying to get my footer to sit at the bottom of all the content, regardless of how much content there is. I've tried many different approaches, but none seem to work for me. At first, I got the footer to sit at the bottom of content, but then there was "whitespace" below the footer because there wasn't enough content to make the footer reach the bottom of the screen. Now, I got it to sit at the bottom of the screen, but it will intersect content, like this:
I want it to sit below the second row of content, but I can't seem to get it to do that, while still sitting at the bottom of the content when there is less content. Here is a demo.
For the footer intersecting the content, check here
For the footer not going to the bottom of the page when there is a little bit of content, check here
Here is the CSS for the footer:
footer {
bottom: 0;
height: 50px;
left: 0;
position: absolute;
width: 100%;
}
The way your are structuring your HTML code is incorrect. Right now you have:
<header></header>
<div></div>
<div></div>
<div></div>
<div></div>
<footer></footer>
What you need to have is something like this:
<div class="page-wrap">
<!-- all your DIVs with the main part of your code should be in here -->
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
This CSS code is needed in order for the sticky footer to work:
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -50px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 50px;
}
.site-footer {
/*your footer code here*/
}
Follow that structure should help get your footer to always stay at the bottom. Example code has been taken from CSS Tricks
What you want is a bit tricky, I think I've faced the problem before, not sure I've solved it properly. Now I would use javascript, I know it's not optimal since you'd also have to listen to the size of the body etc.
But it's basically an if/else case, if content's bigger than window's size, then footer's position: relative;, else it requires fixed or absolute position. Note that for the relative position to work you'd have to remove those float: left; on your <div class ="rows">...
Another alternative would be to use some kind of filler, to fill up the space, and always keep the footer relative, but that's the same problem, it has to be dynamically computed according to window's size.
It's quite similar to the centered height problem, not that easy to figure out
You can try this floating footer solution:
Thanks
Eric Chang
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
#page {
margin: 0;
padding: 5;
}
#footer {
display: block;
width: 100%;
text-align: center;
background: black;
color: white;
bottom: 0;
position: fixed;
}
</style>
</head>
<body>
<div id="page">
Test here
<br>
</div>
<div id="footer">
Footer Here
</div>
</body>
</html>
The footer is at the bottom in my browser in the second example. What Browser are you getting the errors on?
on my website it is a div based layout when the window is reszied everything is pushed together. Such as images overlap or are moved below each other and divs also overlap each other.
How can I get it to scroll when the content of the div is greater than the window size, similar to facebook if you resize the window it prevents anything overlappting and just makes the user scroll?
body
{
background-color: #B0B0B0;
color: #ffffff;
margin-top: 0px;
margin: 0px;
}
#header
{
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
}
#content
{
width: 80%;
height: 800px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
padding: 30px;
}
<div id="header">
[Header]
</div>
<div id="content">
[Content]
<img src="image1.png" /><img src="image2.png"/><img src="image3.png" />
</div>
The html is like that but obviously with more content
Hope I haven't made this too confusing, thanks.
Just add overflow:auto; to your div.
You can also use the following if you only want x or y scrolling
overflow-x:auto;
or
overflow-y:auto;
use the overflow:scroll; to enable scrolling in the DIVs
You must add white-space:nowrap; to your body tag.
I believe you may want overflow: auto;
Here's a comparison between auto and scroll.
add the style
overflow: scroll;
to #content
This answer is pretty late, however I stumbled across this question, as I was having issues on one of my pages, where I have this Page with 30 odd inputs of various types, that are split between two tables. I was unable to scroll to see about 10 or so inputs at the bottom of the page, and could not even scroll left to right when adjusting the browsers width.
What solved my issue was:
html, body {
overflow: visible;
}
This activated my X and Y scroll bar.
I had an issue with my footer not adjusting when scrolling, it instead would just stay fixed where it was situated before scrolling. this was due to my master CSS having the footer's position set as absolute. Simple fix, just creating a new style element in the page and added
footer {
position: fixed;
min-width: 100%;
}
I hope this helps anyone looking for a solution.
As stated by user3726345 , the best option to use is the
html,body {
overflow: visible;
}
using
overflow: auto;
dosnt give the best output. then you can further adjust your footer codes to your taste.