This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 4 years ago.
I am trying to design the web page with the following document tree (as to avoid the appearance of the scroll as much as possible):
html
head
body
div (flex-box - height 100%)
header (flex-child - fixed height)
main (flex-child - consumes all the remainig space/height)
footer (flex-child - fixed height)
Apparently, flex-box is the best solution, but I am reading this nice guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and it appears that there are only limited options how to distribute the space (how to distribute the height of elements) - there are some "growth" properties but nothing else. How can I make the structure I am aiming to achieve? I have no code because I don't see the necessary CSS properties for making even a starter example.
I suppose this is what you're looking for. If you want to use flex you would set its direction to column, and set the height of the container as 100vh, then you set the flex-grow property to the body of the page so it uses the remaining space.
Better see it in full screen
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background: red;
height: 40px;
}
.body {
flex-grow: 1;
background: green;
}
footer {
background: blue;
height: 40px;
}
<div class="container">
<header>
</header>
<div class="body">
</div>
<footer>
</footer>
</div>
Related
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 7 months ago.
I have 3 divs:
<div>
<div id="div1">Title</div>
<div id="div2">Some text</div>
<div id="div3">Footer</div>
</div>
Every div have a width: 100%.
The title div height depends on its content so it can evoluate a little bit, and it has a fixed position.
The Footer div has a fixed size (its content cannot change) and a fixed position.
The goal is to have the text div between this two divs, having its size exactly matches the remaining places between title and text div so I can apply a scroll on it.
Can somebody explain to me how to do that ?
Thanks
I assume you want something like this:
#div1 {
background: rgba(0,0,250,0.2)
}
#div2 {
flex-grow: 1;
background: rgba(0,250,0,0.2);
overflow: scroll;
}
#div3 {
height: 10vh;
background: rgba(250,0,0,0.2);
}
.container {
height: 100vh;
flex-direction: column;
display: flex;
}
<div class="container">
<div id="div1">Title</div>
<div id="div2">Some text</div>
<div id="div3">Footer</div>
</div>
Judging by the clarification in your comment what you're trying to achieve is a basic layout which should be done using the <header> and <footer> tags rather than reinventing the wheel with divs.
However if you're set on using divs you should use position: absolute; or position: fixed; on the #div1 and #div3 depending on what you need the to do. Using this method you should add apropriate margins to make sure div1 and 3 dont cover div2.
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 2 years ago.
When I have a navbar as seperate div, how can I make the header full height of the screen? When I add 100vh it's too big, when users lands on website he can scroll. I need to add like 95.5vh instead to fit it perfectly, but I do not want to add custom height. How can I make it to be full height all time no matter the size of navbar? Is there something else than vh I could use?
header {
background: red;
height: 100vh;
}
body {
margin: 0;
}
<div class="navbar">
<div class="navbar__logo">Brand.</div>
</div>
<header>
Hello
</header>
Using flex, flex-direction and flex-grow does the job well.
Guide to Flexbox would be a good reading to have. Then seach MDN for more detail of each property.
body{
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
header {
background: red;
flex-grow: 1;
}
<div class="navbar">
<div class="navbar__logo">Brand.</div>
</div>
<header>
Hello
</header>
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
I'm trying to achieve the flex layout as per the image below. In my code examples, I've not been successful, yet so I can't provide any useful code snippets.
Box 1 would be fixed width and 100% height
Box 2 and 3 would be 50% height and 100% width
Box 4 would be fixed width and 100% height
It would be wrapped in a container DIV (not shown).
Is this correct usage for Flex, or should a grid be used for something like this? I've found an example that manages to get either box 1 or box 4 in position (such as here: Mozilla Flex Example, but not with both.
For layouts with such requirements CSS Grid is a much better choice than Flexbox.
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
Here's a working codepen. You can modify the fixed columns width by changing the grid-template-columns definitions.
Yes, you can do this with flexbox - you will need a container div for box 2 and box 3. You can use something like this:
#layout {
display: flex;
resize: both;
overflow: scroll;
}
#box1, #box4 {
width: 100px;
}
#box2-3 {
flex-grow: 1;
display: flex;
flex-direction: column;
}
#box2, #box3 {
flex-grow: 1;
}
#box1, #box2, #box3, #box4 {
border: 1px solid red;
}
<div id="layout">
<div id="box1">Box 1</div>
<div id="box2-3">
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
<div id="box4">Box 4</div>
</div>
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 7 years ago.
I am try to apply flex box to my layout, but i am bit lost on how to achieve the following. How would i achieve this so the 3 panel always take the full screen with 5% 90% and 5%.
Note: at the moment i have top and bottom position fixed, and javascript calculate the height with the middle panel but it's not ideal.
Possible duplicate of : Fill remaining vertical space with CSS using display:flex
however:
html,
body {
height: 100%;
margin:0;
}
body {
display: flex;
flex-direction: column;
background: turquoise;
}
header {
height:15%;
}
footer {
height:5%;
}
main {
flex:1;
background: tomato;
}
<header>
header 15%
</header>
<main>
main room left
</main>
<footer>
footer 5%
</footer>
I'm trying to accomplish a toolbar layout that includes 3 components. The left and center are flexible in size to the point where I don't think standard responsive breakpoints will do the job. The flexible center should be centered relative to the viewport when space allows. However, if the center and left would be overlapping, the center section is permitted to become off-center in order to avoid having to hide content.
Toolbar with wide viewport:
Toolbar with narrow viewport. Note the Section Title is not perfectly centered. This is desireable because it would overlap the breadcrumb:
I thought maybe flexbox could do this, but I'm struggling to make it work. Below is an attempt I have made to do this using flexbox.
HTML:
<div class="toolbar">
<div>Site / Section A / Section A1 / Section A1b</div>
<div class="section-title">This Section Title</div>
<div>Site Search</div>
</div>
CSS:
.toolbar {
display: flex;
background-color: #3F51B5;
color: white;
padding: 10px 0;
}
.section-title {
flex-grow: 1;
text-align: center;
}
http://plnkr.co/edit/YoD0yLWliXhu191jUrv4?p=preview
As you're using flexbox, you can use justify-content declaration instead of text-align.
Like this:
.section-title {
justify-content:space-between;
}
There's a great article about it here.