"How can I pin the footer to the bottom of the page"
I've been in a sticky situation with footers many times and I always end up with a different result.
What's the simplest way to have a sticky footer using CSS Flexbox?
I want this:
To look like this:
If a web page has a <header>, <main> and a <footer> all inside of the <body>:
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
footer {
background: grey;
margin-top: auto;
}
Making the body flex column allows all items within to be stacked, the margin-top: auto is the magic piece here. It automatically fills any white space with a margin.
Credit goes to Stephanie Eckles: https://moderncss.dev/keep-the-footer-at-the-bottom-flexbox-vs-grid/
Related
I'm trying to find a way to have a div expand down to the footer even when its content isn't big enough, preferable with CSS but a React solution is welcome as well. It should scroll within itself without pushing down the footer, which is fixed at the bottom.
Currently I have the contentArea with the following CSS...
position: sticky;
overflow-y: scroll;
height: 60vh; //this shouldn't be set, should just expand down to its sibling container, the footer, at the bottom
The container's parent has the position:relative styling.
There are similar solutions on here but they all require setting 100vh on the body, or styling the body in some way, and I can't do that as this is a standalone React component. The component starts at the blue dropdown, the one with Step 1 of 5 in it
You can try:
.parentContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.selectedContainer {
flex: 1;
}
I have a few pages with not a lot of content. The whole website is styled with a grid layout - basic header, main and footer:
The goal is to set the footer onto the bottom of the screen with a whitespace from the content, if there isn't a lot going on on the page like this:
For demonstration purposes I used margin-bottom of 50vh on this page.
But if, for example a blog post is bigger than 100vh, the footer should still appear on the bottom - without the whitespace of course:
The user needs to scroll to see the footer on the bottom of the page.
What's a "best practise"-way of achieving this behaviour (preferred without JS(?))?
Some code for those who might want to have a look into the structure of the webpage:
/* inside this class the content is wrapped into the grid layout */
.container {
display: grid;
grid-template-areas:
"header header header header header"
". recent-posts recent-posts recent-posts ."
"footer footer footer footer footer";
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
}
/* setting header, main and footer as grid layout */
header {
grid-area: header;
border-bottom: 1px solid;
border-radius: 4px;
margin-bottom: 2vh;
}
main {
grid-area: recent-posts;
}
footer {
grid-area: footer;
margin-top: 1vh;
padding: 0.2vh;
border: 1px solid;
border-radius: 4px;
}
If someone wants to have a look into the whole code, I publish the source code on my GitLab.
I got around with a solution which might help someone else in the future:
Inside the .container class I added:
.container {
[…]
/* this forces the footer to stay at the bottom even if the content doesn't fill up the page */
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
where grid-template-rows equals the amount of rows of the grid layout.
I edited the CSS-file to remove padding around the whole grid-layout which made the page a tiny bit bigger than 100vh and added a scrollbar this way.
Instead I added a margin to the header and footer itself:
footer on low-content pages
footer with more content
On mobile you may need to scroll to see the content due to the URL bar:
landing on mobile startpage
scroll on mobile to see 100vh
I mark this question as solved as this solution does exactly what I want; still, if someone knows a better way, please write an answer!
So this will be how if we use flexbox in this case.
section will act as a container to the whole data except the header and footer. Since the section is defined as flex:1, it will take the entire space except for the header and footer.
In this way, if the content gets overflowed in section, the footer will be pusher further down too. You don't have to worry about any such scenarios.
main {
display: flex;
flex-direction: column;
height: 100vh;
}
header, section, footer {
border: 1px solid #ddd;
padding: 10px;
}
section {
flex: 1;
}
<main>
<header>
Something
</header>
<section class="container">Another thing</section>
<footer>
Footer
</footer>
</main>
Here's the example of what I have so far:
https://codepen.io/anon/pen/jQZpNw
My objective is to center that box in the middle to the center of the page, and have the rest of the elements respond appropriately. I've ended up using margin-top: 10%; as a way to center the box, but the problem with this approach is that on smaller browser heights users will have to scroll. It's also not perfectly centered.
Ideally, what I'm looking for, is to:
Center the box (vertically and horizontally)
On small browser heights the center box should sit just underneath the navbar with a small margin, to eliminate the scrolling on small browsers.
Sticky the footer with a gap between the footer and the box when the browser height is really small.
When the center box expands its contents or the navbar expands its contents everything else should move appropriately and not overlap.
I made some javascript buttons to expand the navbar and centerbox so it's easier to experiment with. My actual app is obviously different, this is a stripped down version of what I have.
I tried a bunch of different things to get this to work with no luck, when I used calc() to set it to the center on small browser heights the footer or navbar would overlap the box. I'm out of ideas now, and CSS is not my strong suit. Thanks!
You can try a full page wrapper with a header, the footer, and the div you want centered. Using display:flex; with the flex-direction set to column and justify-content: space-between; you can basically center the div. It will be off a little bit if your header and footer are different sizes but you won't need a ton of media queries or code that is hard to maintain. Set the min-height of the wrapper to 100vh and your footer will be sticky, unless the window is too short to fit all of the pieces.
$('#nav-button').on('click', function(e) {
e.preventDefault();
$('#nav-content').toggleClass('expand');
});
header {
background: red;
padding: 5px;
}
header a {
color: white;
}
#nav-content {
height: 0;
transition: height .3s;
}
#nav-content.expand {
height: 300px;
}
footer {
color: white;
background: red;
padding: 5px;
}
#centered-box {
height: 200px;
width: 200px;
background: green;
margin: 10px auto;
}
#wrap {
min-height: 100vh;
display: flex;
justify-content: space-between;
flex-direction: column;
}
body {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
<header>
<nav>
Expand
<div id="nav-content"></div>
</nav>
</header>
<div id="centered-box"></div>
<footer>This is the footer</footer>
</div>
Are you using media queries at all in your CSS? Media queries allow you to style elements a certain way if the browser window size falls within the query.
is there a way to style a footer, so when there is a content (more than the height of the browser) it will be at bottom of the page(hidden), but if there is not enough content it will stick at bottom edge of the browser?
One solution I use requires a known height of your footer.
Fiddles:
A lot of content
A little content
Here's the HTML:
<main>
hello
</main>
<footer>
i am the footer
</footer>
And here's the CSS:
html, body {
height: 100%;
}
main {
min-height: 100%;
margin-bottom: -100px;
background: #ddd;
}
main:after {
content: "";
display: block;
height: 100px;
}
footer {
height: 100px;
background: #eee;
}
The trick is to set the main part of your document to have a min-height of 100%. This element must contain everything else on your page. In my example, I used the main element for this.
Next, give this element a negative margin equal to the height of the footer. This moves it up just enough to leave room for the footer there at the bottom.
The last piece of the puzzle is the after element. This is required to fill the space of that negative margin. Otherwise, the content of the main will overflow into the footer.
I can only recommend to read this.
Show footer if at bottom of page or page is short else hide
or this
http://css-tricks.com/snippets/css/fixed-footer/
You can always use the calc function in CSS to make out the difference in between the footer and the body height.
footer {
height: calc(100vh - 100px);
}
for example...
I have an empty page with one DIV on it:
<div style="height: 20%;
min-height: 10px;
max-height: 100px;
width: 100%;
background-color: blue;"></div>
I want to add a DIV after this one that takes up all remaining vertical space on the page. How do I do it?
I've spent all day on this and CSS is starting to drive me crazy.
What has to be inside this div?
If it's a just a color filler, just put your blue div in a another div wich you give a background color and make that one fit 100% of your browser window?
It will look like 2 divs beneath eachother. If you need content you can always just put another div under your blue one with whatever content you want.
EDIT:
code example:
http://jsbin.com/efefe/2
Assuming you have two divs:
<div id='one'></div>
<div id='two'></div>
where #one has variable height and #two should consume all remaining vertical space you can do:
/* Note you could add a container div instead of using the body */
body {
display: flex;
flex-direction: column;
}
#one {
flex: none;
}
#two {
flex: 1;
}
Furthermore, if you want #two to be scrollable you can add:
height: 100%;
overflow-y: scroll;
which will allow it to scroll vertically to show it's whole contents.
You can read more about display:flex here.