I have a problem that I've been working on all day, unfortunately without success.
In Bootstrap I want a sticky footer that consists of only one row with several menu items which turns into one row for every item on screens with less then 1000px.
One Row Footer
More Row Footer
Unfortunately, I always fail because the footer is responsive and stays at the bottom of the page. I would be very happy if anyone. could send the appropriate HTML and CSS code.
Here's my code:
<style>
.footer {
position: fixed;
height: 100px;
bottom: 0;
width: 100%;
}
.footer-purple {
background-color: green;
}
.footer-content {
padding: 30px 50px 50px;
flex-direction: row;
max-width: 100%;
font-size: 14px;
display: flex;
}
.footer-navigation {
margin-left: 10px;
flex-direction: row;
display: inline;
}
.footer-link {
color: #fff;
}
</style>
<footer class="footer">
<div class="footer-content footer-purple">
<nav class="footer-navigation">
<a class="footer-link">
Test
</a>
<a class="footer-link">
Test 2
</a>
</nav>
</div>
</footer>
It looks like that: https://prnt.sc/sj02x6
Related
I'm trying to make a base layout with a left-side menu, right-side content and a top header that scrolls with the page. The content on the right side should also scroll with the main scrollbar.
My (for me unsolvable) problem starts, when I want the left side to be full size (height 100%) because in some cases i want to subtract the header from this.
With this example (https://jsfiddle.net/5q42xvwu/) it is easier to explain. I just want to have the text "TOP SIDER" and "BOTTOM SIDER" always on the screen regardless of whether the header is on the screen or not. So the left side should change the size depending on whether the header is on visible.
I don't know if and how this is possible with CSS. I already know that it is easily possible with JS.
I hope someone can help me with this problem, I already wasted several hours with this. Thank you :)
Here the code (in the fiddle):
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.header {
background-color: red;
}
.main {
background-color: green;
display: flex;
flex-direction: row;
}
.sider {
width: 200px;
background-color: cornflowerblue;
height: 100vh; /* I think here is the problem */
position: sticky;
top:0;
align-self: flex-start;
}
.inner-sider {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="main">
<div class="sider">
<div class="inner-sider">
<div>TOP SIDER</div>
<div>BOTTOM SIDER</div>
</div>
</div>
<div class="content">
MAIN CONTENT
<!-- SIMULATE A LAGE CONTENT PAGE-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
END OF MAIN CONTENT
</div>
</div>
</body>
</html>
Edit to further clarify:
The two inner <div> are only there to represent the top and the lower part of the "Inner Sider". In the real example instead of the ".inner-sider" there should be a full hight menu.
Added classes and sticky positioning to top and bottom siders. Hope it does not break your content layout!
body {
margin: 0;
padding: 0;
}
.header {
background-color: red;
}
.main {
background-color: green;
display: flex;
flex-direction: row;
}
.sider {
width: 200px;
background-color: cornflowerblue;
height: 100vh; /* I think here is the problem */
position: sticky;
top: 0;
align-self: flex-start;
}
.inner-sider {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* new styles below: */
.inner-top {
position: sticky;
top: 0;
}
.inner-bottom {
position: sticky;
bottom: 0;
}
<html>
<head>
</head>
<body>
<div class="header">Header</div>
<div class="main">
<div class="sider">
<div class="inner-sider">
<div class="inner-top">TOP SIDER</div>
<div class="inner-bottom">BOTTOM SIDER</div>
</div>
</div>
<div class="content">
MAIN CONTENT
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>END OF MAIN CONTENT
</div>
</div>
</body>
</html>
When I run my web-page, it displays it with the header on the left and the footer on the right, even though I don't want it to. I want it to display downwards.
My HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Alan Turing</title>
<link rel="stylesheet" type="text/css" href="MyStyles.css">
</head>
<body>
<header>
<h5>Alan Turing</h5>
</header>
<nav>
Home
Biography
Quiz
About
</nav>
<article>
<h2>Alan Turing</h2>
<p>Welcome to my Alan Turing website. Click on Biography to read about him, quiz to havea test about him. Click about to see about this web page and other useful websites.</p>
<img alt="Alan turing" src="Assets/alanTuring.jpg">
<p>Above is a picture of Alan Turing, who is famous for cracking the enigma code in World War 2.</p>
<h3>An overview on who he was</h3>
<p>Alan Turing was an English mathematician and pioneer of theoretical computer science and artificial intelligence. During WW2, he was instrumental in breaking the German Enigma code, leading to Allied victory over Nazi Germany.</p>
</article>
</body>
And my CSS code:
header {
padding: 35px;
text-align: center;
background:darkgreen;
color: darkgray;
font-size: 40px;
}
nav {
padding: 20px;
background: green;
color: darkgrey;
font-size: 20px
}
article {
padding: 100px;
text-align: center;
background: lightgreen;
}
#import url('https://fonts.googleapis.com/css?
family=Source+Code+Pro&display=swap');
body {
font-family: 'Source Code Pro', monospace;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
I have tried deleting some things, like each section, however it hasn't worked.
Thanks in advance!
You have set body to display: flex. The default direction of a flexbox is row. That's why your page is displaying left to right. To change this, so your flex parent displays its children in a column, add this line to body:
body {
…
flex-direction: column;
}
Here's a little demo to help illustrate changing flex-direction from row (the default) to column.
const container = document.querySelector(".container");
document.querySelector("button").addEventListener("click", () => {
container.classList.toggle("column");
});
.container {
min-height: 100vh;
display: flex;
}
.container.column {
flex-direction: column;
}
.container > div {
flex: 1;
}
.left {
background-color: gray;
}
.right {
background-color: yellow;
}
button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em 1.5em;
}
html, body { margin: 0; }
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<button type="button">Change flex direction</button>
Remove the display: flex and related properties from body
I'm setting up a website, and I'm facing the problem of coding a sticky footer that stays down if there is less content.
I've already tried using flex box and grid to code the sticky footer I need. I've tried many tutorials but nothing seems to be working. Here is a snippet of my html and css.
html{
height: 100%;
}
body{
min-height: 100%;
flex-direction: column;
display: flex;
}
.footerdiv{
flex: 1 0 auto;
text-align: center;
padding: 60px 0;
}
</section>
<section class="footer">
<div class="footerdiv">
<p>COPYRIGHT © 2019. ALL RIGHTS RESERVED. Design by<a
id="name" href="X"> Akshat Mundra</a></p>
<ul>
<li>
<a id="privacy" href="#">PRIVACY</a>
<a id="contact" href="#">CONTACT US</a>
</li>
</ul>
</div>
</section>
You want to apply flex: 1 0 auto to the <section> that comes before the footer.
Note that you'll also want margin: 0 on <body> so that there's no unnecessary vertical scrollbars when there's not enough content to span the full height of the page.
This can be seen in the following:
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
flex-direction: column;
display: flex;
}
.content {
flex: 1 0 auto;
}
.footerdiv {
flex: 1 0 auto;
text-align: center;
padding: 60px 0;
}
<section class="content"></section>
<section class="footer">
<div class="footerdiv">
<p>COPYRIGHT © 2019. ALL RIGHTS RESERVED. Design by<a id="name" href="X"> Akshat Mundra</a></p>
<ul>
<li>
<a id="privacy" href="#">PRIVACY</a>
<a id="contact" href="#">CONTACT US</a>
</li>
</ul>
</div>
</section>
Note that each of the following rules that are required to make use of a fixed, sticky footer using the flexbox approach:
Just remove the flex: 1 0 auto on the footerdiv class and just create/add this one instead:
.footer {
margin-top: auto;
}
So that the footer would automatically align at the bottom part of the page even if it has less content on it.
Check it on this codepen link
https://codepen.io/anon/pen/YmexgW
Stickiness cannot be achieved with flexbox or grid. You can do it with position: fixed though, like I've done here, or with position: sticky.
Also: use the footer tag for footers.
footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: teal;
text-align: center;
padding: 60px 0;
}
I found a few answers before but for me only this code was good)
<style>
.content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}
</style>
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
another way to solve it
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-footer {
margin-top: auto;
}
I'm trying to create a footer but when ever I open my console view on Chrome the footer comes up along with the console. I've looked at many other people having the same issue but they fixed it by setting the position of the footer to fixed or absolute, but when I try both I still get the same result.
Threads I've looked at:
Footer goes up whenever i open Chrome Console
How do you get the footer to stay at the bottom of a Web page?
Here is what my CSS looks like currently:
html,
body {
height: 100%;
min-height: 100%;
}
.footer {
width: 100%;
bottom: 0px;
left: 0px;
height: 100px;
position: fixed;
background-color: #727272;
}
.footer p {
color: white;
}
<div class="footer">
<div class="wrapper">
<p>testing</p>
</div>
</div>
the wrapper class only creates margins on the left and the right.
Here's how to make your footer always stay down, without using position:fixed, using your example:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.main {
flex-grow: 1;
}
.footer {
flex-grow: 0;
background-color: #727272;
}
.footer p {
color: white;
}
<body>
<div class="main">
put your content here...
</div>
<div class="footer">
<div class="wrapper">
<p>testing</p>
</div>
</div>
</body>
A complete and semantically correct layout would be:
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
header,
footer {
flex-grow: 0;
}
main {
flex-grow: 1;
}
<html>
<head></head>
<body>
<header>
Your header here
</header>
<main>
Your content here
</main>
<footer>
Your footer here
</footer>
</body>
</html>
The <footer> and <header> will take the space they need but not more. <main> grows in the remaining space. When <main> needs more than the available space, it pushes <footer> down.
I have this situation with Previous/Next Project buttons where I could either have both previous and next project buttons showing, or just one depending on what page the user is on. (First project does not have prev button, last project does not have next button). Same code for all situations.
I used flexbox and justify-content: space-between; to space them normally, and then margin-left: 10px; on the prev button for mobile and it was perfect.
For 1 button case however I added margin-left/right to shove them to the left/right side of page. This overrides margin: auto.
So you see my problem now is with the 2 button situation on mobile. When these buttons collide obviously it looks terrible, I need margin in between but I have margin: auto already on them.
I have added my current state and all 3 situations below:
.project-controls {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.project-controls a {
width: 100%;
max-width: 200px;
padding: 10px 5px;
border: 1px solid #2c2c2c;
font-weight: 600;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #2c2c2c;
transition: all 0.3s ease;
}
.project-controls .prev-proj {
margin-right: auto;
}
.project-controls .next-proj {
margin-left: auto;
}
<h1>Two buttons</h1>
<section class="project-controls">
<a class="prev-proj" href="#">Previous Project</a>
<a class="next-proj" href="#">Next Project</a>
</section>
<h1>One button prev</h1>
<section class="project-controls">
<a class="prev-proj" href="#">Previous Project</a>
</section>
<h1>One button next</h1>
<section class="project-controls">
<a class="next-proj" href="#">Next Project</a>
</section>
How can I keep my existing structure and still get that space in between on mobile? My best guess is having some sort of invisible spacer div that I could display with a media query, but just wondering if anyone has a quicker/cleaner solution I'm not thinking of?
Thanks
No need for margin auto on both. You can set a fixed margin-right for the previous element. You also don't need to use justify-content.
.project-controls {
display: flex;
flex-direction: row;
/* no need this too
justify-content: space-between;
*/
}
.project-controls a {
width: 100%;
max-width: 200px;
padding: 10px 5px;
border: 1px solid #2c2c2c;
font-weight: 600;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #2c2c2c;
transition: all 0.3s ease;
}
.project-controls .prev-proj {
margin-right: 20px; /* Changed this */
}
.project-controls .next-proj {
margin-left: auto;
}
<h1>Two buttons</h1>
<section class="project-controls">
<a class="prev-proj" href="#">Previous Project</a>
<a class="next-proj" href="#">Next Project</a>
</section>
<h1>One button prev</h1>
<section class="project-controls">
<a class="prev-proj" href="#">Previous Project</a>
</section>
<h1>One button next</h1>
<section class="project-controls">
<a class="next-proj" href="#">Next Project</a>
</section>
I also use previous and next buttons on my web pages.
I also use flexbox and justify-content: space-between or an auto margin, depending on the site (I've switched it up just for variety; ultimately they both have the same effect).
I encountered the same problem as you with having only one button on the first and last pages.
My solution was to add a hidden button on the first and last pages. This keeps the layout behavior consistent on all pages, without a lot of extra CSS (just one or two lines for the .hidden class).
Then on smaller screens, to avoid the "collision" issue altogether, a media query kicks in with flex-direction: column.
.hidden {
visibility: hidden;
width: 0;
}
nav {
display: flex;
justify-content: space-between;
border: 1px dashed blue;
}
#media ( max-width: 500px ) {
nav { flex-direction: column; align-items: center; }
}
<h3>first page</h3>
<nav>
next
</nav>
<h3>middle page</h3>
<nav>
previous
next
</nav>
<h3>last page</h3>
<nav>
previous
</nav>
jsFiddle demo