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%;
}
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 2 years ago.
I have a flex container with flex children inside of it. In every flex-child there are 2 divs on top of each other, first one is with unknown height. I want to make the second div's height to fill the whole remaining height. Everywhere I look I see flex solution, but I don't know how to implement it since parent of the 2 divs is flex-child itself.
The whole case is more complex, but I'll try to simplify code here:
<div class="flex-parent-row">
<div class="flex-child">
<div class="auto-height"></div>
<div class="i-want-this-one-to-fill-remaining-height"></div>
</div>
...more flex children...
</div>
And putting ".auto-height" div inside ".i-want-this-one-to-fill-remaining-height" is not an option at this moment.
Please help :) Thank you!
EDIT: I've made a full Fiddle: https://jsfiddle.net/vanden1976/dLg20x4s/26
EDIT-2: Solved! Thank you for your suggestions! Here's the fiddle with the solution: https://jsfiddle.net/vanden1976/dLg20x4s/29
It would be more helpful when you would of provided your existing CSS to better understand what you are trying to do. However I hope the example below will help you figure out how to solve what you are trying to accomplish.
Html:
<div class="flex-parent-row">
<div class="flex-child">
<div class="auto-height"> auto div</div>
<div class="i-want-this-one-to-fill-remaining-height"> fill remaining div</div>
</div>
</div>
CSS:
.flex-parent-row {
display: flex;
flex-direction: column;
height: 200px;
width: 500px;
border: 1px solid #000;
}
.flex-child {
border: 1px solid #000;
background-color: red;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.auto-height {
background: orange;
}
.i-want-this-one-to-fill-remaining-height {
flex-grow: 1;
background-color: lightblue;
}
If you need additional help please provide more code.
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
Is it possible to contain/limit the height of an image in a column flexbox? In this fiddle, I would like to make the image be displayed in a reduced size in order to make the title underneath it be just inside the bottom of the flex parent.
Ideally, I would like to do this with a 100% CSS solution.
Here is the fiddle: https://jsfiddle.net/brandoncc/czLjoxdu/4/
The basic CSS code is:
div {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid green;
width: 400px;
height: 300px;
}
Just add a new class
img
{
height:50%;
}
Change the percentage as you like.
try this..
<div>
<img src="http://placehold.it/350x350" / class="img-fluid">
<p>Image title</p>
div {
border: 1px solid green;
width: 400px;
height: 300px;
position:relative
}
You may add the following to keep the image from overflowing and use the max space. You can change the percentage to smaller the image. Just tweak it an see what works best for you.
img {
height: 100%;
}
This question already has answers here:
Why doesn't percentage padding / margin work on flex items in Firefox and Edge?
(2 answers)
Percentage padding / margin on grid item ignored in Firefox
(2 answers)
Closed 4 years ago.
I've recently redesigned my website utilizing CSS grid and I've come across a specific problem with FireFox 52. I know FireFox has issues, so I'm looking for some help on how to solve this little layout issue.
https://codepen.io/Krazyhawk/pen/qyJmWQ
Example HTML
<div class="grid">
<div class="item"><div></div></div>
<div class="item">
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
</div>
<div class="item"></div>
</div>
Example CSS
.grid {
width: 1200px;
display: grid;
grid-template-columns: 60% 1fr;
}
.item:first-child {
background-color: blue;
padding-right: 30px;
}
.item:first-child > div {
position: relative;
padding-bottom: 56.25%;
background-color: purple;
}
.item:nth-child(2) {
background-color: yellow;
}
.item:nth-child(3) {
background-color: grey;
grid-column: 1/3;
margin-top: 16px;
height: 50px;
}
I have two columns, and one underneath. The left column has a div in it that is used as an iframe container. To make that iframe responsive, it gets its height using a padding-bottom percentage. The right column is just a column with content, as well as the bottom one.
The issue lies with the padding-bottom percentage. The grid layout isn't recognizes the height of the div with padding-bottom, therefore the bottom bar doesn't allow enough space atop of it.
The solution solves itself if the left column has a height, but that's something I'd like to avoid. Giving it a height and keeping it responsive would likely require some JS and the resize event once the layout got down to tablet size (liquid layout).
As far as I know, this layout issue is specific to FireFox 52 (normally would cut it loose, but there is still a good chunk of user percentage).