I have a footer that's fixed to the bottom of the page but when I get to the bottom it blocks a button. How do I go about fixing this issue?
Footer.jsx
import "./Footer.css";
const Footer = () => {
return (
<footer>
<p>Copyright © 2022</p>{" "}
</footer>
);
};
export default Footer;
Footer.css
footer {
position: fixed;
bottom: 0;
font-size: 1.2rem;
left: 0;
padding: 1rem;
text-align: center;
width: 100%;
}
Try this
footer {
position: static;
bottom: 0;
font-size: 1.2rem;
left: 0;
padding: 1rem;
text-align: center;
width: 100%;
}
Analysis
You made position: fixed for the footer, so anything which goes behind that will gets hidden. Instead, for the footer, we can use position: static so that the footer will position itself with the flow.
For more info - position at mdn
Related
The code that appears below creates the following layout:
The important part is that the content, although centered on the screen when not overflowing, never overlaps the navbar and has its own scrollbar:
The problem is that this layout is achieved with the help of padding (marked by a comment in the code below), which results in the additional scrollbar on the right of the screen.
How can I design the same layout that would have only one scrollbar - the one in the content?
Please note that the solution should not break the following details:
The rounded corners and the shadow.
The title in the content block not participating in scrolling.
The image covering the whole scrollable content, so it scrolls together with the content.
In addition, it would be great if this can be achieved without as many nested div's as I have right now.
Edit: I am ready to go with the suggestion of #JHeth in the comments section. However, I would still be interested if someone can come up with an alternative design that does not rely on padding for centering.
Here is the code (CodePen):
* {
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
:root {
--navbar-height: 3rem;
}
.navbar {
width: 100%;
text-align: center;
font-size: 2rem;
line-height: var(--navbar-height);
background-color: lightgreen;
}
.centering {
position: absolute;
inset: var(--navbar-height) 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
& .auto-margin {
margin: auto;
// For scrollable content
display: flex;
max-height: 100%;
padding-bottom: calc(var(--navbar-height)); // Causes scrolling
}
}
.content-block {
display: flex;
flex-direction: column;
.title {
font-size: 2rem;
position: sticky;
}
.content-outer-container {
display: flex;
flex-direction: column;
overflow-y: auto;
border-radius: 1em;
box-shadow: 0 1em 2em rgba(black, 0.4);
.content-container {
width: 300px;
overflow-y: auto;
.content {
position: relative;
padding: 1em;
&:before {
content: "";
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background-position: center;
background-image:
url(http://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg);
}
}
}
}
}
<div class="navbar">An Amazing Navbar</div>
<div class="centering">
<div class="auto-margin">
<div class="content-block">
<div class="title">My Title</div>
<div class="content-outer-container">
<div class="content-container">
<div class="content">
<h1>Line1</h1>
<h1>Line2</h1>
<h1>Line3</h1>
<h1>Line4</h1>
<h1>Line5</h1>
</div>
</div>
</div>
</div>
</div>
</div>
simply remove max-height:100%; to .centering .auto-margin and it'll works!
.centering .auto-margin {
margin: auto;
display: flex;
/* max-height: 100%; */
padding-bottom: calc(var(--navbar-height));
}
I've a fixed side bar on the right side of the page (position: fixed)
But it's contents are not fully visible as it's not scrolling with the page scroll. I could have added overflow-y: scroll in the .sidebar{} css settings. But don't want a separate scroll bar for sidebar. Is there an option to make it scroll with the full page scroll.
Here is my css settings for sidebar :
.sidebar {
text-align: center;
padding: 2rem,1rem;
color: rgba(255,255,255,.5);
background-color: #202020;
top: 0;
bottom: 0;
}
If you want to debug to see what went wrong, here is it running live : https://pagefault.me
Thanks
Based on the answer I suggested in my comment, I was able to work in chrome to arrive at the css below.
1) Add some css to the .sidebar-nav component
nav.sidebar-nav {
position: absolute;
overflow-y: scroll;
top: 100px; /*100px to give some room for the sidebar heading (without this, absolute position will make the nav overlap)*/
left: 15px; /* you can make this zero and add `padding-left: 15px` */
bottom: 15px; /* leave some room for copyright section */
right: -17px; /*this may vary from browser to browser (i suggest using the width of the widest scrollbar, then adjust for padding-right)*/
padding-right: 15px; /*padding to prevent the text from flowing off screen*/
}
2) The .container class becomes
.sidebar .container{
max-width: 38rem;
padding-left: 1rem;
padding-right: 1rem;
margin-left: auto;
margin-right: auto;
height: 100%;
position: relative;
overflow: hidden;
}
3) Make sure the footer bit remains at the bottom after making .sidebar-nav absolute
.sidebar .container > p:last-of-type {
position: absolute;
bottom: -15px;
}
Of course as mentioned in the original solution, you have to test the scrollbar widths in different browsers to arrive at the right width to use in place of right: -17px in step 1.
Use absolute position instead of fixed as you want it to scroll it along with the page.
body {
margin: 0;
padding: 0;
position: relative;
}
main {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 300vh;
background: beige;
}
aside {
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 300vh;
background: black;
color: white;
}
<main></main>
<aside><aside>
A flex box solution without positioning :
body {
margin: 0;
padding: 0;
display: flex;
}
main {
width: 80%;
height: 300vh;
background: beige;
}
aside {
width: 20%;
height: 300vh;
background: black;
color: white;
}
<main></main>
<aside></aside>
Page is here
I am using a sticky footer, which works fine everywhere but my portfolio page. The gallery is relatively positioned, and is overflowing from it's parent div. The footer is sticking to the bottom of the parent, rather than the page.
Help? Preferably in a way where I don't have to rewrite all my code?
Please try this one i hope it will helpful to you.
html, body {
height: 100%;
}
header {
background: #fff;
position: relative;
z-index: 100;
}
.content2 {
clear: both;
margin: 0 auto;
padding: 0;
text-align: center;
width: 70%;
}
.gallery {
display: table;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: auto;
position: relative;
width: 100%;
}
#footer-block {
bottom: 0;
position: fixed;
width: 100%;
}
Thanks
Fixed it by coding body and html to 110% height, footer wrapper to 100% height, and adding page wrapper with 100% height.
So I have this straight forward page:
<div class="page-wrapper">
<div class="page-header">Some navigation stuff goes in here</div>
<section class="page">The content goes here</section>
</div>
<footer class="page-footer">Guess what this is for?</footer>
And I have this CSS to make the footer stick to the bottom of the page:
html,
body {
height: 100%;
}
.page-header {
color: white;
background-color: #1f1f1f;
height: 75px;
}
.page {
margin: 20px 0 0;
}
.page-wrapper {
min-height: 100%;
margin-bottom: -340px;
&:after {
content: "";
display: block;
height: 340px;
}
}
.page-footer {
padding: 0;
margin: 20px 0 0;
border: 0;
border-radius: 0;
color: white;
text-align: center;
background-color: #1f1f1f;
text-align: left;
height: 340px;
}
And for illustation purposes, here is a codepen.
Now, this was all working fine, but my client has asked for a second footer, but this time it doesn't appear on all pages and it has to be within the .page wrapper.
Here is a codepen to illustrate this.
As you can see, the second footer has no way of attaching to the bottom of the page (above the main footer). I have tried lots of things like flexbox and absolute positioning, but I just can't get it to work.
Can anyone offer any solutions?
Once again, I need to point out that I can not change the location of the .view-footer.
If you want the following order:
Header
Content
view footer
footer
and you don't have a specific page length you need to have, you can just use regular divs (display: block) items to get everything one under another.
using blocks will allow you to make every element get the entire width of the screen, while every element appear below the previous one.
Here's a fixed version of your codepen.
If you want the footer to stick to the bottom of the content (lets say that the .page part of your site needs a certain fixed height), you can use absolute positioning only for the footer.
here's a codepen example for that :-)
I would use these settings on the footer:
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 340px;
And this to make sure nothing can be hidden under the footer (i.e. the full page content can be scrolled up from behind the footer):
.page { margin-bottom: 340px; }
This would include that second footer being scrolled up. If it also needs to be sticky above the first footer, give it also position fixed, plus bottom: 340px, and increase the bottom margin on the content accordingly.
So, If I get this right, You want a page that if the content is shorter than the viewport, then the footer sticks to the bottom. And in some pages, you have an additional footer, that has to stick above the original footer but it is not directly before it in the DOM, it is inside the element before it.
If your footers have a fixed height, then things are not so tough. In the first step, you have to set the .page-wrapper min-height to calc(100% - page-footer-height) which means:
.page-wrapper {
min-height: calc(100% - 340px);
position: relative;
}
That solves the sticky .page_footer problem.
Now, since the bottom of .page-wrapper will always be touching the top of .page-footer you can just place your .view-footer on it's bottom with position-absolute which, unfortunately, will hide the content of .page.
At this point, you have two options, either you add an additional element after the .view-footer as a placeholder to simulate the space, or you have to add a modifier class to the.page or some parent element to add a padding-bottom equal to .view-footer height. Since you have control of the server side code, I suppose that at least one of the options is possible.
Placeholder Version:
html,
body {
height: 100%;
}
.page-header {
color: white;
background-color: #1f1f1f;
height: 75px;
}
.page {
margin: 20px 0 0;
background-color: pink;
}
.view-footer {
background-color: #dcdcdc;
border-top: 1px solid #adadad;
margin: 20px 0 -20px 0;
padding: 50px 0;
position: absolute;
width: 100%;
bottom: 0;
}
.page-wrapper {
min-height: calc(100% - 340px);
position: relative;
}
.page-footer {
padding: 0;
margin: 20px 0 0;
border: 0;
border-radius: 0;
color: white;
text-align: center;
background-color: #1f1f1f;
text-align: left;
height: 340px;
}
.view-footer + .empty {
height: 120px;
}
<div class="page-wrapper">
<div class="page-header">Some navigation stuff goes in here</div>
<section class="page">
The content goes here
<div class="view-footer">I have no control where this appears in the html</div>
<div class="empty"></div>
</section>
</div>
<footer class="page-footer">Guess what this is for?</footer>
Modifier class Version:
html,
body {
height: 100%;
}
.page-header {
color: white;
background-color: #1f1f1f;
height: 75px;
}
.page {
margin: 20px 0 0;
background-color: pink;
}
.extra-footer .page {
padding-bottom: 120px;
}
.view-footer {
background-color: #dcdcdc;
border-top: 1px solid #adadad;
margin: 20px 0 -20px 0;
padding: 50px 0;
position: absolute;
width: 100%;
bottom: 0;
}
.page-wrapper {
min-height: calc(100% - 340px);
position: relative;
}
.page-footer {
padding: 0;
margin: 20px 0 0;
border: 0;
border-radius: 0;
color: white;
text-align: center;
background-color: #1f1f1f;
text-align: left;
height: 340px;
}
<div class="page-wrapper extra-footer">
<div class="page-header">Some navigation stuff goes in here</div>
<section class="page">
The content goes here
<div class="view-footer">I have no control where this appears in the html</div>
</section>
</div>
<footer class="page-footer">Guess what this is for?</footer>
I have a header bar that is positioned using position:absolute; and I cannot seem to get it to not overlap my content.
Here is the html i'm using for my example:
<div class="ui-page ui-page-active">
<div class="ui-header">
<div class="ui-title ui-title-h1">
Page Title 1
</div>
</div>
<div class="ui-content">
Page Two
</div>
<div class="ui-footer">
<div class="ui-title ui-title-h3">
Page Footer 1
</div>
</div>
</div>
and here is my css
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.ui-page {
background-color: #bbb;
height: 100%;
width: 100%;
display: block;
position: relative;
}
.ui-page-inactive {
display: none;
}
.ui-page-active {
display: block;
}
.ui-header {
position: absolute;
top: 0;
background-color: #000;
width: 100%;
display: inline-block;
}
.ui-content {
}
.ui-footer {
position: absolute;
bottom: 0;
background-color: #000;
width: 100%;
display: inline-block;
}
.ui-title {
text-align: center;
color: #fff;
padding: 4px;
line-height: 150%;
}
.ui-title-h1 {
font-size: 1.5em;
font-weight: 900;
}
My end goal is to have a header bar always at the top, a footer bar always at the bottom and for the content to fill the centre. The content div does not actually need to fill 100%, I just don't want it to be blocked by either the header or footer.
An easy way would be to have either padding-top or margin-top (I'm not sure which) on .ui-content set to the height of your header, that would push .ui-content down so there isn't overlap.
If the header and footer are a fixed-height (like, for example "80px") then you can make the content absolute with the top-and-bottom margins (position:absolute;overflow-y:scroll;top:80px;bottom:80px;) and make the header and footer fixed (position:fixed;height:80px;top:0;left:0;right:0;overflow:hidden; for the header and position:fixed;height:80px;bottom:0;left:0;right:0;overflow:hidden; for the footer)
Something like that might work.