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>
Related
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;
}
I have a problem with Flex for Google Charts. Div with charts is not using available height. Am I missing something? (colors and blue borders are for development purpose so I'm sorry for that...)
CSS
.pc-metrics-chart {
display: flex;
flex-direction: column;
width: 100%;
height: 65%;
overflow: hidden;
background-color: var(--yellow);
}
.metric-ch{
height: auto;
flex : 1;
justify-content: stretch;
align-items: flex-end;
position: relative;
background-color: var(--success);
}
.ManagementCharts {
flex: 1;
overflow: hidden;
}
HTML
<div class="pc-metrics-chart" id="pc-metrics-chart-proj">
<div class="metric-ch">
<div id="totalProjectChart1" class="ManagementCharts">
</div>
</div>
</div>
I was trying to play with the position, alignments, height of the chart as well, but I'm using it's auto height and I thought that Flex will fill available space under the chart:
It is possible to use height property and set it to 100% to fill the remain space:
body {
margin: 0;
}
.pc-metrics-chart {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
overflow: hidden;
background-color: yellow;
}
.metric-ch{
height: auto;
flex : 1;
justify-content: stretch;
align-items: flex-end;
position: relative;
background-color: lightgreen;
}
.ManagementCharts {
flex: 1;
overflow: hidden;
background-color: red;
height: 100%;
}
<div class="pc-metrics-chart" id="pc-metrics-chart-proj">
<div class="metric-ch">
<div id="totalProjectChart1" class="ManagementCharts">
Here should be chart placed
</div>
</div>
</div>
This question already has answers here:
CSS: Width in percentage and Borders
(5 answers)
Closed 3 years ago.
I want to create a bar to go along the top of a box on a website that I am working on.
This is the desired outcome
Here's my code, I keep getting this overlap
.page {
display: flex;
flex-wrap: wrap;
position: relative;
}
.section {
border: 2px solid #FBA7FF;
width: 85%;
height: 30%;
margin: 1vw;
padding: 1vw;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.section h1 {
position: relative;
}
.section_header {
border: 4px solid #FBA7FF;
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 95%;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
So far I've got the parent div with position: relative and the child element with position: absolute then setting top and left to 0 width to 100% and bottom to 95% to attempt the desired effect yet it creates an overlap.
I can see that 0 is within the div and doesn't take into account the border which is perhaps why this is happening.
* {
box-sizing: border-box;
margin: 0;
}
.page {
display: flex;
flex-wrap: wrap;
position: relative;
}
.section {
width: 100%;
display: inline-block;
text-align: center;
}
.section_header {
width: 100%;
background: #FBA7FF;
display: block;
height: 70px;
margin-bottom: 20px;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
Remove the position:absolute and use flex-direction:column;
* {
margin: 0;
padding: 0;
}
.page {
display: flex;
flex-wrap: wrap;
flex-direction: column;
min-height: 100vh;
background: lightgrey;
position: relative;
}
.section {
border: 2px solid #FBA7FF;
width: 85%;
margin: 1vh auto;
height: 30%;
background: lightgreen;
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
}
.section_header {
height: 50px;
width: 100%;
background: orange;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</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/