I'm trying to make a div that fills all available height of its parent, while maintaining a 16/9 aspect ratio. However, it's filling the width and thus not keeping the aspect ratio I've set. Any advice on how to fix this?
<div class="outer">
<div class="problem"></div>
<div class="inner"></div>
</div>
.outer {
height: 100vh;
display: flex;
flex-direction: column;
}
.problem {
height: 200px;
}
.inner {
aspect-ratio: 16/9;
background-color: blue;
}
html,body {
margin: 0;
font-family: sans-serif;
}
JSFiddle: https://jsfiddle.net/cqhtb8sw/
It's due to flexbox, you can add this in your inner styles:
height:100%;
width: min-content;
Related
I want to put three images next together by using flexbox and responsive units in this case percentage(%). I have 2 issues: (1) justify-content does not work because I use % for flex items. (2) The tall of my images are getting bigger than the wide, in other word width and height of my images are not relative together because I used auto keyword for the height of images so I can have width and height relative. I would be very grateful if you could help me. I will include my code below.
.services h2 {
margin: 3.125rem 0 2rem;
}
#services-container {
display: flex;
width: 100%;
}
.service-item {
width: 90%;
height: 65%;
overflow: hidden;
}
.service-item img {
width: 100%;
height: auto;
display: block;
}
<section class="services">
<h2>our services</h2>
<div id="services-container">
<div class="service-item hotel">
<img src="./resources/pictures/hotel.jpg" alt="hotel">
<h4>The best hotels</h4>
</div>
<div class="service-item air-plane">
<img src="./resources/pictures/airplane.jpg" alt="airplane">
<h4>The best airline services</h4>
</div>
<div class="service-item food">
<img src="./resources/pictures/food.jpg" alt="food">
<h4>The highest quality foods</h4>
</div>
</div>
</section>
First, you can set the height to 100% and width to auto and use justify-content on parent like so :
.services h2 {
margin: 3.125rem 0 2rem;
}
#services-container {
display: flex;
width: 100%;
justify-content: space-between;
}
.service-item {
width: 30%;
height: 100%;
overflow: hidden;
}
.service-item img {
width: auto;
height: 100%;
display: block;
}
Hope it helps
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Make a div fill the height of the remaining screen space
(42 answers)
Closed 1 year ago.
I am trying to use flexbox to have fixed height container ( two ) to be stuck to the bottom of the page and then have the other container take up the available space (flex-grow) . This is not giving me the desired effect so I'm not sure what I'm missing
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
</div>
.container {
height: 100%;
display: flex;
flex-direction: column;
background: black;
}
.one {
flex-grow: 1;
background: green
}
.two {
height: 90px;
background:pink;
}
Your block is limited to the place it occupies. You have to use the entire viewport in this case. Add this in your CSS :
html, body {
height: 100%;
}
The main thing that would help is height:100vh. Apart from that, to avoid scrollbar, you'll need to remove default margin and padding from html & body.
The vh unit is pretty convenient when you want the container tag to fill the available screen space without introducing vertical scrollbar.
html,
body {
margin: 0;
padding: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
background: black;
}
.one {
flex-grow: 1;
background: green;
}
.two {
height: 90px;
background: pink;
}
<html>
<body>
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
</div>
</body>
</html>
Height (%) is used to define a height relative to parent's height. It depends on parent element height so you also need to set height:100% to html/body.
body, html{
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
background: black;
}
.one {
flex-grow: 1;
background: green
}
.two {
height: 90px;
background:pink;
}
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
</div>
Please look at my code here: http://codepen.io/CrazySynthax/pen/NdJbmB
<table>
<div id="table-header">
<div class=header-square>SUN</div>
<div class=header-square>MON</div>
<div class=header-square>TUE</div>
<div class=header-square>WED</div>
<div class=header-square>THU</div>
<div class=header-square>FRI</div>
<div class=header-square>SAT</div>
</div>
</table>
html, body {
width: 100%
}
#table-header {
flex-direction: row;
display: flex;
width: 100%;
flex-wrap: wrap;
}
.header-square {
background-color: aqua;
border: solid;
height:100px;
display:flex;
}
I want that the elements of class header-square will be spread on the entire width of the container, meaning that the total width of header-squares will be 100% of the page.
How can I do it without explicitly defining a width for header-square class in css?
Just apply flex: 1 to your .header-square elements to occupy entire width.
.header-square {
background-color: aqua;
border: solid;
height: 100px;
display: flex;
flex: 1;
}
EDIT
To occupy entire height, add the following:
html, body {
width: 100%;
height: 100%;
}
#table-header {
height: 100%;
}
And remove fixed height: 100px from .header-square.
Result should be something like this:
Add flex: 1 to class '.header-square'
.header-square {
background-color: aqua;
height: 100px;
width: calc(100% / 7);
}
The .header-square is missing width attribute. Therefore you should expand to 100% by doing width: calc(100% / 7); to achieve your desired result.
I thought that IE 11 had full support for flexbox properties but I get a different behavior than on Chrome/Firefox
I simplified it to this simple example: I'm trying to have a 100% height div with a flex child inside that also grows to 100% height. It works in chrome and Firefox but on IE the flex child doesn't grow in height...
Fiddle: https://jsfiddle.net/7qgbkj0o/
body, html {
background-color: red;
min-height: 100%;
height: 100%;
padding: 0;
margin:0;
}
.p{
display: flex;
min-height: 100%;
}
.c1 {
flex-grow: 1;
background-color: gray;
}
<div class="p">
<div class="c1">
asdasd
</div>
</div>
On IE11: http://imgur.com/a/eNKIJ
On Chrome: http://imgur.com/a/xYmJW
I know there are probably alternatives to achieve this without using flexbox but in my real world case I really need to use flexbox here so what's wrong and how can I achieve this on IE11 using flexbox?
Seems IE11 has an issue with only having min-height.
Try adding a base height.
.p{
display: flex;
min-height:100%;
height: 100%;
}
body,
html {
background-color: red;
min-height: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.p {
display: flex;
min-height: 100%;
height: 100%;
}
.c1 {
flex: 1;
background-color: gray;
}
<div class="p">
<div class="c1">
asdasd
</div>
</div>
I had a similar case where this:
.container {min-height: 500px; height: auto;}
didn't work, but this:
.container {height: 500px;}
was perfectly aligned in IE.
Declaring specific height instead of auto should work..
Having 2 images with different width and height.
Is it possible to use CSS to create a column where both images (one above the other) fit 100% of column height, and make the images appear with the same width?
So far I'm using a server side equation to determine ideal width of a cotainer div, and using width 100% for the images, but I would prefer a solution 100% css to spare server processing.
here is my fiddle: fiddle
css:
#container { height: 300px; background-color: black; overflow: hidden; }
#container .col { float: left; font-size: 0; }
#container .col img { width: 100%; }
html:
<div id="container">
<div class="col" style="width:174px">
<img src="http://acasa.org.br/ensaio/grande/380.JPG">
<img src="http://www.acasa.org.br/midia/thumb/MF-00002.jpg">
</div>
</div>
You mean like this?
CSS
#container {
height: 300px;
background-color: black;
}
#container .col {
width: 174px;
background: red;
float:left;
}
#container .col img {
width: 174px;
max-width: 100%;
display: block;
}
FIDDLE