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>
Related
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Setting Element Width Based on Height Via CSS
(10 answers)
Closed last year.
This post was edited and submitted for review last year and failed to reopen the post:
Original close reason(s) were not resolved
I have already read Maintain the aspect ratio of a div with CSS (not a duplicate, please read further) and the other ways to do it, but here I'm asking something more specific:
Is there a way to use the width of the current element (self) in a CSS calc rule?
Or if not, is it possible to use the width of the parent element in a height: calc(...)?
Something like:
#container {
display: flex;
width: 500px;
flex-direction: row;
}
#a {
background-color: red;
width: 50%;
}
#b {
background-color: blue;
width: 50%;
height: calc(100% of self current width); /* <------- pseudo code here - does this exist? */
}
<div id="container">
<div id="a">
Hello
</div>
<div id="b">
World
</div>
</div>
You can use padding-top: 100%; to make width:height = 1:1.
Reference: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
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:
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:
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>