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>
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 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>
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Css height in percent not working [duplicate]
(8 answers)
Closed 5 years ago.
I am trying to use Flexbox to create a simple two column webpage that occupies the full width and height. The left column is a fixed width of 200px while the right column in takes up the remaining space.
So far I have:
:root {
overflow-x: hidden;
height: 100%;
}
body {
min-height: 100%
}
.flexbox {
height: 100%;
display: flex;
}
.left {
flex: 0 0 200px;
height: 100%
}
.right {
flex: 1
}
and:
<div class="flexbox">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
Width is working as expected with right occupying all the remaining space other than the 200px that left takes up. However, they are not full height?
This is not a duplicate as it uses Flexbox
Try using viewport height. This will make the divs the full height of the viewport.
.flexbox {
height: 100vh;
display: flex;
}
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 5 years ago.
I have an element and I want it to occupy all the space below it up to the bottom of the browser window.
can I somehow get the y offset of the element for this? I don't know how to define y:
.occupy-space-below {
max-height: calc(100vh - y);
}
Instead of using calc (since your upper element is of unknown height)...
you can easily achieve this using flexbox
/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
.flex-column {
height: 100%;
display: flex;
flex-direction: column;
}
.grow{
flex: 1;
background: gold;
}
<div class="flex-column">
<div>
I<br>have <br>unknown<br>height
</div>
<div class="grow">
occupy space below
</div>
</div>