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;
}
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:
Image inside div has extra space below the image
(10 answers)
Closed 1 year ago.
[Duplicate]
answer here Image inside div has extra space below the image
I display some images with different sizes along multiple rows.
Example here
But there are gaps between the rows. I've tried a lot, but couldn't find why.
<div class="muralBox">
<div class="wrapper">
<div v-for="(topAlbum, i) in topAlbumInfo.value" :key="topAlbum.name" class="albums">
<Album :info="topAlbum" :width="layoutConfig[i].width"/>
</div>
</div>
</div>
And in Album.vue
<img :src="img" :width="width" :height="width" alt=""/>
And css:
.muralBox {
margin: auto;
max-width: 400px;
min-width: 400px;
}
.wrapper {
background: #1f1c2c;
display: flex;
flex-wrap: wrap;
}
I'm not sure if this is exactly what you wanted since I can't see how you styled them, but I just gave images 100% height and width and that basically did it in a codepen.
CodePen link
.albums img{
height: 100%;
width: 100%;
}
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 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>
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>