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.
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>
image wireframe
I would like to recreate messaging phone app in html and css. So the app must be full frame without any overflow.
The trick is the bottom part (in red) must be resizable according to the child content. So I used flex (with flex-direction: column) to manage my layout.
The problem is : when the content (in yellow) grow up, the core part will compress the red part. My goal is to overflow, with a scrollbar, the content inside the core part and don't change the size of the red div.
index.html
<body>
<div id="header">
</div>
<div id="core">
<div class="conainer" style="">
<div class="row">
<div class="two columns"></div>
<div class="ten columns">
<div class="msgright">
.
</div>
</div>
</div>
<div class="row">
<div class="ten columns">
<div class="msgright">
.
</div>
</div>
<div class="two columns"></div>
</div>
</div>
</div>
<div id="footer">
</div>
index.css
html, body, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
max-height: 100%;
overflow: hidden;
}
body {
display: flex;
flex-direction: column;
}
#header {
height: 50px;
background: #2A9D8F;
flex: 0 0 auto;
}
#core {
background-color: #264653;
flex: 1;
display: flex;
align-items: flex-end;
}
#footer {
height: auto;
background-color: red;
min-height: 50px;
flex: 0 0 auto;
}
.conainer {
flex: 0 0 100%;
}
.row {
margin: 5px;
background-color: yellow;
height: 130px;
}
https://codepen.io/jln_brtn/pen/pobVZBv
Best regards and thank you for your help.
I'm not sure if I understand the problem correctly but since your .row elements have a fixed height: 130px, the element should not be able to grow any further. Overflow styling to .row elements can be added like this:
.row {
overflow-y: scroll;
}
If it is just the #core element, then you can do something like this:
#core {
overflow-y: scroll;
}
For this instance I would suggest to use CSS Grid instead of Flexbox, and giving both <header> and <footer> the space they need, while the <main> gets the rest. This means that both <header> and <footer> stay were they are, even if <main> needs more space for its content, meaning <main> will get a scrollbar.
You can achieve the same by using position: fixed and setting a margin to top and bottom, with fixed heights of <header> and <footer>, and sizing <main> with height: calc(100% - HEIGHT_OF_HEADER - HEIGHT_OF_FOOTER). The problem with this is maintenance, as you would always have to check and revalidate the heights when changing something.
html, body {
margin: 0;
width: 100%;
height: 100%;
}
body {
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
height: 3.125rem;
background: #2A9D8F;
}
main {
padding: 0.3125rem;
display: flex;
flex-flow: column;
gap: 0.3125rem;
background: #264653;
overflow: hidden auto;
}
footer {
height: 3.125rem;
background: red;
}
main > div {
flex-shrink: 0;
height: 8.125rem;
background: yellow;
}
<header></header>
<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
<footer></footer>
I'm trying to create a webapp screen where the header is stuck to the top and the footer stuck to the bottom all the time, and the main content is displayed inbetween with a scroll bar if necessary.
I want to make this possible in multiple devices, so the header and footer can change in height to fit the their content in smaller screens and the main content should use the remaining space.
Is is possible to create this behaviour with css? (maybe using flexbox?)
You are right - flexbox is perfect for this:
html,
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background-color: #0800ff;
}
.content {
background-color: #fff;
flex-grow: 1;
overflow-y: auto;
}
footer {
background-color: #fec11a;
}
<section class="container">
<header>...</header>
<div class="content">
<ol>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ol>
</div>
<footer>...</footer>
</section>
Notice how I use height: 100vh for the .container and flex-grow: 1 for the .content. That does the trick.
So lets say I have 3 components: Header, Intro, and MainContent
if I have something like:
<div className='homepage'>
<div id='top'>
<Header />
<Intro />
</div>
<div id='bottom'>
<MainContent />
</div>
</div>
How would I be able to style this so that the header and the intro take up the entirety of the screen on load, and then you have to scroll to reach the MainContent component?
I could I just set bottom padding of the #top to a percentage but that doesn't work for every device, correct?
We can use vh units with Flexbox to easily achieve this. The basic idea is to give the #top a height of 100vh (the full height of the viewport), and then use Flexbox to have the <Intro /> fill the remaining space not taken up by the <Header />. Like this:
#top {
height: 100vh;
display: flex;
flex-direction: column;
}
.intro {
flex-grow: 1;
}
/* Styling CSS - not relevant to solving the issue */
html,
body {
margin: 0;
font-family: Arial;
}
.header {
background-color: black;
color: white;
}
.intro {
background-color: lightgray;
}
.header,
.intro,
.main {
padding: 0.5rem;
}
#bottom {
min-height: 400px;
}
<div className='homepage'>
<div id='top'>
<div class="header">Header</div>
<div class="intro">Intro</div>
</div>
<div id='bottom'>
<div class="main">Main Content</div>
</div>
</div>
Given the basic HTML structure (which I can't change) below, I know I can expand the main content div with this CSS:
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
#columns {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
<body>
<header>
HEADER CONTENT
</header>
<div id="columns" class="container">
MAIN CONTENT
</div>
<footer class="footer">
<div class="container"> </div>
<div id="footer-content">
FOOTER CONTENT
</div>
</footer>
</body>
But the 'columns' section has styling that I don't really want extending below the content, so I would prefer, if possible, to expand the penultimate empty div (.container) within the footer section.
I've tried everything I can think of, but I'm a css beginner and nothing has worked.
Can this be done?
I figured it out using codepen in SCSS mode so I could nest selectors. That made experimenting a whole lot easier.
It turned out I needed two flexboxes: one to expand the whole footer section to fill the available space, and one within the footer to expand the padding container likewise.
Here's the code with background-color added to each content section for illustration purposes:
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
margin: 0;
}
body header {
background-color: green;
}
body #columns {
background-color: blue;
}
body #footer-content {
background-color: red;
}
body .footer {
flex: 1;
display: flex;
flex-direction: column;
}
body .footer .container {
flex: 1;
}
<body>
<header>
HEADER CONTENT
</header>
<div id="columns" class="container">
MAIN CONTENT
</div>
<footer class="footer">
<div class="container"> </div>
<div id="footer-content">
FOOTER CONTENT
</div>
</footer>
</body>