The content between header and footer is going under them. I've tried setting flex-start and flex-end to header and footer but they don't go to the absolute top. They are stacked above and below the content.
The style of the header is
.Header {
width: 100%;
position: absolute;
top: 0;
flex-wrap: wrap;
}
The style of the Footer is
.Footer {
width: 100%;
position: absolute;
bottom: 0;
flex-wrap: wrap;
}
The style of the content(if it helps) is
.Content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Absolutely-positioned elements are taken out of the normal flow of the document.
You can either add margins to the top and bottom of the content to add space for the header and footer, or switch to using "sticky" positioning.
.Header {
position: sticky;
top: 0;
}
.Footer {
position: sticky;
bottom: 0;
}
Your header is using position: absolute so its out of flow. Use position: relative or add a top padding/margin with the height of your header for your content.
.header {
width: 100%;
position: absolute;
top: 0;
flex-wrap: wrap;
background: #707070;
height: 100px;
}
.footer {
width: 100%;
position: absolute;
bottom: 0;
flex-wrap: wrap;
background: #e9e;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: blue;
margin-top: 100px;
}
<body>
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<h2>Content</h2>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
try this demo
HTML
<body>
<div class="Header">Header</div>
<div class="Content">Content</div>
<div class="Footer">Footer</div>
</body>
CSS
body{
margin:0;
padding:0;
}
.Content {
background-color:red;
height:90vh;
width: 100vw;
}
.Footer {
background-color:green;
width: 100vw;
bottom: 0;
height:5vh
}
.Header {
background-color:blue;
width: 100vw;
top: 0;
height:5vh
}
for more information about The position Property visit :
https://www.w3schools.com/css/css_positioning.asp
you can give top and bottom padding to the content equal to the height of header and footer
.Content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 40px;
padding-bottom:40px ;
overflow-y:auto;
}
Related
I'm trying to create a fixed header with a flex design. But when I add the property position: fixed the next div is no more after the header but goes under the header (I don't want to add a margin-top to it)
Here's my code:
.wrapper{
display: flex;
background-color: red;
padding: 5px;
flex-direction: column;
min-height: 100vh;
}
.header_container{
background-color: grey;
position: fixed;
width: 100%;
}
.main_container{
display: flex;
background-color: #CB6115;
flex-grow: 1; //to use all the space of the screen
}
<div class="wrapper">
<div class="header_container">header</div>
<div class="main_container">main</div>
</div>
What should I add to have it proper?
I updated the fixed to sticky and this will make it fixed when you scroll until then it will behave normal.
look at the code it is working fine without the margin-top;
.wrapper{
display: flex;
background-color: red;
padding: 5px;
flex-direction: column;
min-height: 100vh;
}
.header_container{
background-color: grey;
position: sticky;
top: 0;
left: 0;
width: 100%;
}
.main_container{
display: flex;
background-color: #CB6115;
flex-grow: 1; //to use all the space of the screen
}
<div class="wrapper">
<div class="header_container">header</div>
<div class="main_container">main</div>
</div>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
Lets say I have this simple html page:
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
My header is fixed and the content should be beneath it and with height 100% of what ever left of the body.
I've already done that with this style:
*{
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.header {
background-color: red;
text-align: center;
position: fixed;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex: 1;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
Here's how the page looks for now: https://elbargho.github.io/sudoku/centerdiv.html
now I'm trying to center the box div horizontally and vertically in relative to the full body - the header size
what I've tried to do:
margin-top: 50% - for some reason the box went all the way down to the bottom
setting the position of content div to relative, and of box div to absolute - the content div overlapped the fixed header
You can set content class as
.content {
/* flex: 1; */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
*{
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.header {
background-color: red;
text-align: center;
position: fixed;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
/*flex: 1; */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
This is probably what you need. Documented in the code.
* {
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
/* Modified */
.header {
background-color: red;
text-align: center;
/* position: fixed; */
position: sticky;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
/* Modified */
.main {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
}
/* Modified */
.content {
/*flex: 1;*/
display: flex;
align-items: center;
height: inherit;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
Here solution:
.content {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
One way is to use CSS Transform.
.box {
position: relative;
top: 50%;
transform: translateY(-50%);
/* horizontal center */
margin: 0 auto;
}
Check out this website for all CSS centering help:
http://howtocenterincss.com/
I'm trying to put one link to each corner (left, top, right, bottom) using Flexbox
I tried top: 0 or setting flex-direction to column
.container {
position: relative;
}
.top {
display: flex;
justify-content: space-between;
}
.bottom {
display: flex;
justify-content: space-between;
flex-direction: row;
}
<div class="container">
<div class="top">
ONE
TWO
</div>
<div class="bottom">
THREE
FOUR
</div>
</div>
I expect to get one link to each corner like this screenshot:
but I got this instead
Clean and simple flexbox solution (no hacks or absolute positioning):
.container {
height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* horizontal spacing */
align-content: space-between; /* vertical spacing */
}
.top, .bottom {
flex-basis: 100%; /* to force .bottom to wrap */
display: flex;
justify-content: space-between;
}
a {
background-color: orange;
}
body {
margin: 0;
background-color: lightgray;
}
<div class="container">
<div class="top">
ONE
TWO
</div>
<div class="bottom">
THREE
FOUR
</div>
</div>
For something like this, position: absolute; might be better.
.container { position: relative; }
.top-left { position: absolute; top: 0; left: 0 }
.top-right { position: absolute; top: 0; right: 0 }
.bottom-left { position: absolute; bottom: 0; left: 0 }
.bottom-right { position: absolute; bottom: 0; right: 0 }
it's because of the height on your bottom and top divs it will only occupy min-content height as default also the same for the wrapper container
this is one way how you can fix it using only flexbox :
.container {
height: 95vh;
display: flex;
flex-direction : column;
justify-content: space-between;
}
.top {
display: flex;
justify-content: space-between;
}
.bottom {
display: flex;
justify-content: space-between;
flex-direction: row;
}
<div class="container">
<div class="top">
ONE
TWO
</div>
<div class="bottom">
THREE
FOUR
</div>
</div>
You don't need to use .top & .bottom for flexbox. Flexbox can handle with less HTML code.
<style>
.container {
position: relative;
display: flex;
flex-flow: row wrap;
height: 100%;
}
.container a {
flex: 1 1 50%;
}
.container a:nth-child(2n) {
text-align: right;
}
.container a:nth-child(3),
.container a:nth-child(4) {
align-self: flex-end;
}
<div class="container">
ONE
TWO
THREE
FOUR
</div>
I created a layout using css and Flexbox, the issue is the footer div displays at the bottom of the page on load, but content shoots past it, so when you scroll the footer is just floating in the middle of the page. I'm not sure what to change.
I have changed the footer to be sticky, and bottom to be 0px. It kinda worked with adjusting the margin of the other divs, but its not very clean. I was hoping to keep using the flexbox attributes and just have them stack, but that doesn't seem to work? I've also adjusted the min-max heights of the other divs, but as soon as the window shrinks past the min height the footer just floats over the rest of the content.
Link to code JSFiddle
.footer{
height:40px;
display:flex;
align-items:center;
justify-content:center;
width:100%;
background-color:purple;
}
I would suspect that the footer would obey the stacking order and just display under the rest of the content, like the main body does under the header.
It's the height set on your '.content' class. Change height: calc(100vh - 100px) to min-height: calc(100vh - 100px)
Unless you want the footer and header always visible, then you can just add overflow: auto to make the content scroll
Remove height: calc(100vh - 100px); from .content class
body,
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.bodywrap {
display: flex;
flex-wrap: wrap;
align-content: space-between;
background-color: black;
}
.header {
display: flex;
justify-content: space-between;
width: 100%;
height: 60px;
background-color: brown;
}
.hleft {
display: flex;
align-items: center;
justify-content: center;
width: 250px;
background-color: lightgreen;
}
.hmid {
display: flex;
align-items: center;
justify-content: center;
flex-grow:1;
font-size: calc(1.5vw);
background-color: orange;
}
.hright {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
background-color: pink;
}
.content {
display: flex;
justify-content: space-between;
background-color: darkblue;
}
.lmenu {
display: flex;
width: 250px;
flex-wrap: wrap;
align-content: space-between;
height: 100%;
min-height: 600px;
background-color: lightgrey;
overflow: hidden;
}
.ltop {
display: flex;
align-items: center;
justify-content: center;
height: 150px;
width: 100%;
background-color: blue;
}
.lmid {
height: 50px;
width: 100%;
background-color: green;
}
.lbot {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 100%;
background-color: yellow;
}
.rmaincont {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: calc(100vw - 250px);
background-color: grey;
}
.note {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
height: 50px;
}
.main {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
height: calc(100vh - 50px);
min-height: 550px;
width: 100%;
padding-left: 20px;
background-color: red;
}
.footer {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: purple;
}
<!DOCTYPE html>
<html>
<head>
<title>Mid-Valley Intranet</title>
<link rel="stylesheet" type="text/css" href="css/cstyle.css">
</head>
<body>
<div class="bodywrap">
<header class="header">
<div class="hleft">Left</div>
<div class="hmid">Mid</div>
<div class="hright">Right</div>
</header>
<div class="content">
<div class="lmenu">
<div class="ltop">
Top
</div>
<div class="lmid">
Mid
</div>
<div class="lbot">
Bot
</div>
</div>
<div class="rmaincont">
<div class="note">
Notice
</div>
<div class="main">
Main Content
</div>
</div>
</div>
<footer class="footer">
Footer Text
</footer>
</div>
</body>
</html>
There are a few things did to do to make this work:
Originally the scrolling was happening on the body. I added overflow: hidden on the body and overflow-y: auto to the div with the "bodywrap" class.
I added the position sticky and bottom 0, but with vendor prefixes:
bottom: 0;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
I also made the div with class "bodywrap" have a height equal to 100vh minus the height of the footer (so that the scrolling content doesn't get cutoff at the bottom). You may want to set a sass variable or something for this 40px height.
height: calc(100vh - 40px);
Here's a demo of the new version:
jsfiddle.net/webwhizjim/6f84b7su/3/
I have a <section> element with a title, that contains a <div> which holds some text. I need the <div> to appear in the middle of the <section> tag, and the <section> should take up the rest of the space under the header. To the user, the <div> should appear in the centre of the space under the header.
My following code does that to some degree, but it appears off-centre. I think thats's because I applied height: 100vh to the <section>, which makes that element longer than the rest of the page.
How do I achieve this? I'm trying to create a generic set of styles for the div.message so that I can drop it in when needed and it will appear in the centre of the area below the header.
header {}
.content {
height: 100vh;
}
.message {
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
align-items: center;
}
.message .text {
font-size: 20px;
order: 0;
flex: 0 1 auto;
align-self: auto;
}
<header>
<h1>Header area</h1>
</header>
<section class="content">
<h2>This is a section</h2>
<div class="message">
<p class="text">This section is empty</p>
</div>
</section>
JSFiddle
Here is how I recommend you do, and get a good responsive layout:
Add a wrapper, the container (could also use the body)
Make the container a flex column container so the header and content will stack vertically
Set flex-grow: 1 on content so if take the remaining space of its parent
Make the content a flex column container
Set flex-grow: 1 on message so if take the remaining space of its parent
Make the message a flex row container (the default)
Set justify-content: center; align-items: center; on message so its content centers
Finally, we need to take the h2 out of flow or else the message won't fill its entire parent's height, and if not, the message won't center vertically in the section
Note, as the h2 is positioned absolute the content could also be set as a flex row container, though I choose to use "column" to make it move obvious compared with the markup structure
Updated fiddle
Stack snippet
html, body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
header {}
.content {
position: relative;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.content h2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
.message {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
.message .text {
font-size: 20px;
}
/* styles for this demo */
html, body {
margin: 0;
}
.container {
}
header {
border: 1px dotted red;
}
.content {
border: 1px dotted red;
}
.message,
.message .text {
border: 1px dotted red;
}
<div class="container">
<header>
<h1>Header area</h1>
</header>
<section class="content">
<h2>This is a section</h2>
<div class="message">
<p class="text">This section is empty</p>
</div>
</section>
</div>
Based on how you intend to use message, you could also set the justify-content: center; align-items: center; to the content (and drop the flex properties on the message)
Fiddle demo 2
Stack snippet
html, body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
header {}
.content {
position: relative;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.content h2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
.message {
}
.message .text {
font-size: 20px;
}
/* styles for this demo */
html, body {
margin: 0;
}
.container {
}
header {
border: 1px dotted red;
}
.content {
border: 1px dotted red;
}
.message,
.text {
border: 1px dotted red;
}
<div class="container">
<header>
<h1>Header area</h1>
</header>
<section class="content">
<h2>This is a section</h2>
<div class="message">
<p class="text">This section is empty</p>
</div>
</section>
</div>
If the message is only a wrapper for the p, you could drop it all together.
Fiddle demo 3
If I understood you well, this is what you're looking for :
header {
}
.content {
align-content: center;
align-items: center;
top: 50%;
left: 50%;
height: 100%;
width: 100%;
}
.message {
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 200px;
height: 100px;
margin: auto;
}
.message .text {
font-size: 20px;
order: 0;
flex: 0 1 auto;
align-self: auto;
}
The JSFiddle link
You have two main ways of solving this:
1) If you assign a fixed height to the header, you can then give the section the remaining height with calc:
.header {
height: 50px;
}
.content {
height: calc(100vh - 50px);
}
You will need to make sure it works even with smaller windows (you might need to add some media queries)
2) If you instead don't want to assign a fixed height to the header, you can wrap header and section into a common parent that is using a flexbox, and allow the section to grow. I wrote this solution here: https://jsfiddle.net/annc8w4j/1/