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>
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 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:
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:
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>