I'm trying to make a fixed "floating" footer with variable height, that always appears at the bottom even when the content changes.
I have the following Create React App HTML:
<html>
<body>
<div id="root">
<div class="app">
<div class="header"></div>
<div class="content"></div>
<div class="footer"><div>
</div>
</div>
</body>
</html>
And the following CSS: (According to second answer on Fixed header, footer with scrollable content)
html, body, #root {
height: 100%
}
.app {
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
flex-wrap: nowrap;
}
.header {
flex-shrink: 0;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
overflow: auto;
flex-grow: 1;
}
.footer {
flex-shrink: 0;
}
However, as the content dynamically changes the page gets distorted and elements overlap each other. I've found that setting #root with height: 275% makes the page display properly in the expanded state (and only then).
Setting #root with min-height: 100% makes the footer appear at the middle of the page when there isn't enough content, and it is not floating anymore when the content is scrollable.
I think this is what you are trying to achieve https://codepen.io/anon/pen/bmMrOg
<div id="root">
<div class="app">
<div class="header">
header
</div>
<div class="content">
<div>content</div>
</div>
<div class="footer">
footer
<div>
</div>
</div>
And the CSS
html, body, #root {
height: 100%;
margin: 0
}
.app {
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
flex-wrap: nowrap;
flex-direction: column;
}
.header {
flex-shrink: 0;
background: blue;
}
.content {
overflow: auto;
flex-grow: 1;
background: red;
}
.footer {
flex-shrink: 0;
background:green;
}
Related
This question already has answers here:
Why does height: 100% on a child element not apply when the parent element has a min-height/max-height value but no height value?
(1 answer)
Percentage 'min-height' works only when element has indirect parent with 'display: flex'
(1 answer)
Closed 6 months ago.
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.body {
flex-grow: 1;
flex-shrink: 0;
background-color: #a0a0a0;
}
.content {
height: 100%;
background-color: #c0c0c0;
}
<div class="layout">
Header
<div class="body">
Body
<div class="content">
Content
</div>
</div>
Footer
</div>
Why doesn't div.content occupy 100% of window?
Is there a way to make div.content span 100% vertically while having div.layout flexbox?
If there isn't, how can I make it while having this header-body-footer structure?
Edit 1
div.body should follow default display property. I can't make it flexbox.
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.body {
flex-grow: 1;
flex-shrink: 0;
background-color: #a0a0a0;
display: flex;
flex-direction: column;
}
.content {
height: 100%;
background-color: #c0c0c0;
flex-grow: 1;
flex-shrink: 0;
}
<div class="layout">
Header
<div class="body">
Body
<div class="content">
Content
</div>
</div>
Footer
</div>
.layout {
display: flex;
flex-direction: column;
height: 100vh;
}
edit div.latout code -> min-height change height
I am learning to use flexbox and I am not able to align content vertically inside of the class .headercontent. it seems to honor everything else like justify-content but ignores align-content. I searched and found this thread and this seems to suggest that the parent should have height explicitly set. I have set height by setting flex-basis and flex-grow and a min-height. But still by div containing the h1 is stuck to the top of the header. I want that green div to be in the vertical center of the header. what am I doing wrong?
html {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 100%;
line-height: 1.2em;
}
body {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
height: 100vh;
background-color: #cdc9c1;
}
header {
background-color: #a99879;
flex-basis: 10%;
flex-grow: 1;
min-height: 20px;
}
main {
background-color: #5b431a;
flex-basis: 80%;
flex-grow: 8;
}
footer {
background-color: #77613c;
flex-basis: 10%;
flex-grow: 1;
}
.headercontent {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: green;
min-height: 20px;
}
.navstyle {
list-style-type: none;
}
<html>
<head>
</head>
<body>
<header>
<div class="headercontent">
<h1>This is the header</h1>
</div>
</header>
<nav>
<ul>
<li>section1</li>
<li>section2</li>
<li>section3</li>
</ul>
</nav>
<main>
<p> this is the main body</p>
</main>
<footer>
<p> this is the footer </p>
</footer>
</body>
</html>
Here is the codeine link to my work https://codepen.io/knows_not_much/pen/rNxXoOM
I want that green div to be in the vertical center of the header. what
am I doing wrong?
Your header element is taking up 10% height of body. Your .headercontent does not take up the entire defined height of the header. Therefore, it is going to sit at the top. To address this, you can assign the header element to be a flex container and that is where you assign align-items: center; justify-content: center properties
header {
background-color: #a99879;
flex-basis: 10%;
flex-grow: 1;
display: flex; /* add these */
align-items: center; /* add these */
justify-content: center; /* add these */
}
Assign width: 100% to the .headercontent afterwards (as needed) if you must have the green background take up the space
I have a div with a fixed height, and inside it there is an image. This image is larger than the width and height of the containing div. I want to make the width of the image to match the width of the div, and then make the height of the image automatically generated.
HTML:
<template>
<div class="portfolio">
<div class="header">
Portfolio
</div>
<div class="projects">
<div class="project">
<img src="../assets/projects/charlotte_folke.jpg" />
</div>
</div>
<div class="overview">
</div>
</div>
</template>
SCSS:
.portfolio {
width: 100%;
height: 100%;
}
.header {
height: 10%;
display: flex;
font-size: 24px;
color: #B59762;
align-items: center;
justify-content: center;
}
.projects {
height: 80%;
display: flex;
overflow: auto;
flex-direction: column;
}
.project {
width: 100%;
height: 35%;
overflow: hidden;
img {
width: 100%;
height: auto;
}
}
The problem with this solution, is that the image element still takes up space below the containing div. I want to cut off the image completely, so it only takes up the available space specified by the containing div.
How can i achieve this?
How can I fix the meta class to the bottom left corner of the flex container while keeping the heading element h1 vertically centered?
.container {
height: 200px;
background: red;
display: flex;
align-items: center;
}
<div class="container">
<h1>Hello, world!</h1>
<div class="meta">intro</div>
</div>
Take it out of flow and position it relatively to the container.
.container {
height: 200px;
background: red;
display: flex;
align-items: center;
position: relative;
}
.meta {
position: absolute;
bottom: 0;
left: 0;
}
<div class="container">
<h1>Hello, world!</h1>
<div class="meta">intro</div>
</div>
Switch to flex-direction: column
Apply justify-content: space-between
Insert an invisible "spacer" item to balance out both ends
.container {
height: 200px;
background: red;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.invisible { visibility: hidden; }
<div class="container">
<div class="invisible">intro</div>
<h1>Hello, world!</h1>
<div class="meta">intro</div>
</div>
Note that flex alignment properties work by distributing available space in the container. This means that justify-content: space-between can precisely center the middle item (h1) only if both adjacent items are equal height. For more details see Box #71 here.
This question already has answers here:
HTML5 flexible box model height calculation
(2 answers)
Closed 4 years ago.
I have a container flex with content flexes. How do i make content flex occupy full width and height of container flex.
<div id="main">
<div id="main-nav">
</div>
<div class="container">
<div class="content"></div>
<div class="content"></div>
</div>
</div>
#main{
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
#main-nav{
width: 100%
height: 50px;
}
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
}
.content{
display: flex;
width: 100%;
height: 100%;
}
The above code makes content to occupy 100% width of container but height is based on the text within the content. I tried the solutions mentioned from similar questions but had no luck and it was still the same.
Basically, I want each of the content to occupy the same height as occupied by the container in the viewport height. I also tried jQuery,
var rht = $("#container").height();
$(".content").height(rht);
It changes the height properly but adds a horizontal scroll bar with increase in width.
After several updates to the original question:
* {
box-sizing: borderbox;
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
border: 1px solid red;
min-height: 100vh;
}
#main-nav {
flex: 0 0 50px;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
border: 1px solid green;
}
.content {
flex: 1;
border: 1px solid orange;
}
<div id="main">
<div id="main-nav"></div>
<div class="container">
<div class="content"></div>
<div class="content"></div>
</div>
</div>
JSfiddle Demo
You cannot set width or height of flex's child is bigger (size of flex)/(number of flex's childs) but you can add position: absolute into .content and position: relative into .container then set width and height for .content. First .content is under second .content, you can use propety z-index or display: none to control.
* {
box-sizing: borderbox;
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
background: red;
min-height: 100vh;
}
#main-nav {
flex: 0 0 50px;
}
.container {
position: relative;
display: flex;
flex: 1;
background: green;
}
.content {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
flex: 1;
background: orange;
}
<div id="main">
<div id="main-nav"></div>
<div class="container">
<div class="content">left</div>
<div class="content">right</div>
</div>
</div>