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..
Related
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;
This question already has answers here:
Chrome / Safari not filling 100% height of flex parent
(5 answers)
Closed 6 years ago.
I try to have a div to fill its parent, which has been positioned with flexbox layout.
As you can see in the following jsfiddle, the div's height doesn't fill the parent's height.
Why doesn't it work?
(update from #mrmcgreg: it doesn't work on Chrome but works on FF)
https://jsfiddle.net/z73pjtox/1/
html:
<header id="header">
header
</header>
<div id="content">
<div>
height: 100%
</div>
</div>
css:
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-flow: column;
}
#header {
flex: 0 1 auto;
background-color: green;
}
#content {
flex: 1 1 auto;
background-color: blue;
}
#content div {
height: 100%;
background-color: red;
}
I checked your fiddle. Seems to be working here in Firefox 47 on Mac. What browser are you using?
I forked the fiddle and changed a few settings to make sure it was doing what was expected, but it worked just the same. However in an older version of Safari it doesn't work here. Maybe try adding the vendor prefixes and see if that helps?
Check this link on CSS Tricks for all the prefixes.
fiddle
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
}
#header {
height:30px;
background-color: green;
}
#content {
display:flex;
flex-direction:column;
flex:1;
background-color: blue;
}
#content div {
flex:1;
height: 100%;
background-color: red;
}
Here is my code to stick the footer to bottom of the page:
#footer {
background-color: #0F2157;
width: 100%;
bottom: 0px;
min-height: 35px;
padding-top: 5px;
}
When I'm doing it with height it works perfectly fine, but when I'm trying to set the minimum height it leaves a little space under the footer. Any guess how to fix that?
First of all, the height of body, html and container (see element with class 'container') has to have height: 100%;
In this solution I have used flex box. It is supported by all modern browsers and IE11.
It's necessary to add the following properties to container:
display: flex;
flex-direction: column; /*the flex items are placed in column, by default it is in row*/
To move footer to bottom, just add to flex item
margin-top: auto; /* it grabs all free space between flex items and put it before this flex item */
html, body {
height: 100%;
}
.container {
height: 100%;
background-color: green;
display: flex;
flex-direction: column;
}
.header {
height: 20%;
background-color: yellow;
}
.content {
background-color: white;
}
.footer {
min-height: 20%;
background-color: blue;
margin-top: auto;
}
<div class="container">
<div class="header">Header</div>
<div class="content">It's content</div>
<div class="footer">Footer in bottom</div>
</div>
What about using Flexbox? It is supported by IE>=10.
To use that, you have to split your page at least in two separated elements: The "upper"-one (.content) with the whole content of your page and the footer.
The "upper"-one gets the value flex: 1, which is a shorthand for:
flex-grow: 1
flex-shrink: 1
flex-basis: auto
This means, that the "upper"-element could grow to the maximum, while the footer reserves only it's actually required space.
Code snippet
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
<!doctype html>
<html>
<head>
</head>
<body>
<div class="content"></div>
<footer class="footer">
Hey footer!
</footer>
</body>
</html>
You used min height 35 px. I think your content's height inside of footer is more than 35px. So check the margin or padding of all footer elements.
It will be better, if you can make a jsfiddle demo.
[SOLVED]
I found this to be working for my example:
#footer {
position: absolute;
bottom: 0;
width: 100%;
}
Here's a JsFiddle.
HTML :
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1">
<div data-role="page" >
<div id="contentwrap">
<div id="content" data-role="content">
<img width="300" src="http://upload.wikimedia.org/wikipedia/commons/f/f1/Ski_trail_rating_symbol_red_circle.png" />
asdad asd asd asd sadadada ad sad asd asd asd asd sadasdaad adsa dasd sa
</div>
</div>
</div>
CSS :
html, body {
height: 100%;
}
#contentwrap {
display: table;
height: 100%;
max-width: 500px;
margin: 0 auto;
position: relative;
}
#contentwrap img {
margin-left: auto;
margin-right: auto;
display:block;
margin-bottom: 10px;
max-width:100%;
}
#content {
height: 100%;
display: table-cell;
text-align:center;
vertical-align:middle;
}
As you can see if you test it, the "max-width: 100%" attribute only works on Google Chrome. With Firefox and IE, the image width stay the same... With Chrome, the image adapt to the window... :
How can I fix it ? (at least with IE11)
I found other posts with the same problem but none gave a good solution...
There's actually a really simple solution to this -- you need to set the table-layout property to fixed on the element that is set to display: table.
#contentwrap {
display: table;
table-layout: fixed;
height: 100%;
max-width: 500px;
margin: 0 auto;
position: relative;
}
Here is one way of achieving the desired layout.
I left out some of the jQuery Mobile classes and just used native CSS/CSS3.
For this HTML:
<div id="contentwrap">
<div id="content">
<img width="300" src="http://upload.wikimedia.org/wikipedia/commons/f/f1/Ski_trail_rating_symbol_red_circle.png" />
asdad asd asd asd sadadada ad sad asd asd asd asd sadasdaad adsa dasd sa
</div>
</div>
modify your CSS as follows:
html, body {
height: 100%;
}
#contentwrap {
background-color: beige;
margin: 0 auto;
max-width: 500px;
height: 100%;
display: table;
}
#content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#content img {
display: block;
margin: 0 auto;
width: 100%;
max-width: 300px;
}
I applied CSS tables to #contentwrap and #content similarly to your original CSS, that way you get the vertical alignment in the middle as required.
You hard coded the image width to 300px by setting the width value in the img tag.
To get the image to scale with the width of #content as it narrows in width, set the width: 100% that way the image will fill the width of #content, and to prevent the image from getting too wide, set a max-width value as needed, 300px in my exammple.
You may run into conflicts with CSS rules in jQuery Mobile, but perhaps someone else can help with any issues is they arise (not my area of expertise).
See demo: http://jsfiddle.net/audetwebdesign/ZMLDD/
Note: If you set the max-width value for the image, then you may not need to set the width attribute in the img tag.
I checked this in the latest versions of Firefox, Chrome, IE and Opera and this solution appears to work.
Always remember, max-width does not inherit from other parent
elements. As the width of 300px has been defined with a max-width of
100%, the initial width value will always override the max-width value
of 100%
So instead use min-width: 300px and max-width: 100% which will make it to work in all the browsers
Responsive images for Firefox, IE, Chrome. Simple solution that works in Firefox
<div class="article"><img></div>
.article {background: transparent 0% 0% / 100% auto;}
.article img {max-width: 100%;}
I'm trying to understand what appears to be unexpected behaviour to me:
I have an element with a max-height of 100% inside a container that also uses a max-height but, unexpectedly, the child overflows the parent:
.container {
background: blue;
padding: 10px;
max-height: 200px;
max-width: 200px;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
}
<div class="container">
<img src="http://placekitten.com/400/500" />
</div>
This is fixed, however, if the parent is given an explicit height:
.container {
background: blue;
padding: 10px;
max-height: 200px;
max-width: 200px;
height: 200px;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
}
<div class="container">
<img src="http://placekitten.com/400/500" />
</div>
Does anyone know why the child would not honour the max-height of its parent in the first example? Why is an explicit height required?
When you specify a percentage for max-height on a child, it is a percentage of the parent's actual height, not the parent's max-height, oddly enough. The same applies to max-width.
So, when you don't specify an explicit height on the parent, then there's no base height for the child's max-height to be calculated from, so max-height computes to none, allowing the child to be as tall as possible. The only other constraint acting on the child now is the max-width of its parent, and since the image itself is taller than it is wide, it overflows the container's height downwards, in order to maintain its aspect ratio while still being as large as possible overall.
When you do specify an explicit height for the parent, then the child knows it has to be at most 100% of that explicit height. That allows it to be constrained to the parent's height (while still maintaining its aspect ratio).
.container {
background: blue;
padding: 10px;
max-height: 200px;
max-width: 200px;
float: left;
margin-right: 20px;
}
.img1 {
display: block;
max-height: 100%;
max-width: 100%;
}
.img2 {
display: block;
max-height: inherit;
max-width: inherit;
}
<!-- example 1 -->
<div class="container">
<img class='img1' src="http://via.placeholder.com/350x450" />
</div>
<!-- example 2 -->
<div class="container">
<img class='img2' src="http://via.placeholder.com/350x450" />
</div>
I played around a little. On a larger image in firefox, I got a good result with using the inherit property value. Will this help you?
.container {
background: blue;
padding: 10px;
max-height: 100px;
max-width: 100px;
text-align:center;
}
img {
max-height: inherit;
max-width: inherit;
}
Instead of going with max-height: 100%/100%, an alternative approach of filling up all the space would be using position: absolute with top/bottom/left/right set to 0.
In other words, the HTML would look like the following:
<div class="flex-content">
<div class="scrollable-content-wrapper">
<div class="scrollable-content">
1, 2, 3
</div>
</div>
</div>
.flex-content {
flex-grow: 1;
position: relative;
width: 100%;
height: 100%;
}
.scrollable-content-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
.scrollable-content {
/* Add styling here */
}
Try it below:
.flex-content {
flex-grow: 1;
position: relative;
width: 100%;
height: 100%;
}
.scrollable-content-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
html {
height: 50%;
width: 50%;
}
body {
height: 100%;
width: 100%;
}
.parent {
height: 100%;
outline: 1px solid red;
}
<html>
<body>
<div class="parent">
<div class="flex-content">
<div class="scrollable-content-wrapper">
<div class="scrollable-content" id="scrollable">
1, 2, 3
</div>
</div>
</div>
</div>
<button onClick="scrollable.innerText += '\nSome more text'" style="margin-top: 1rem;">Add Line</button>
<p>
The red outline represents the parent. Click above to add a line until overflow occurs to see that the size of the parent is not increased.
</p>
</body>
</html>
I found a solution here:
http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
The trick is possible because it exists a relation between WIDTH and PADDING-BOTTOM of an element. So:
parent:
container {
height: 0;
padding-bottom: 66%; /* for a 4:3 container size */
}
child (remove all css related to width, i.e. width:100%):
img {
max-height: 100%;
max-width: 100%;
position: absolute;
display:block;
margin:0 auto; /* center */
left:0; /* center */
right:0; /* center */
}
You can use the property object-fit
.cover {
object-fit: cover;
width: 150px;
height: 100px;
}
Like suggested here
A full explanation of this property by Chris Mills in Dev.Opera
And an even better one in CSS-Tricks
It's supported in
Chrome 31+
Safari 7.1+
Firefox 36+
Opera 26+
Android 4.4.4+
iOS 8+
I just checked that vivaldi and chromium support it as well (no surprise here)
It's currently not supported on IE, but... who cares ? Also, iOS supports object-fit, but not object-position, but it will soon.
Here is a solution for a recently opened question marked as a duplicate of this question. The <img> tag was exceeding the max-height of the parent <div>.
Broken: Fiddle
Working: Fiddle
In this case, adding display:flex to the 2 parent <div> tags was the answer
Maybe someone else can explain the reasons behind your problem but you can solve it by specifying the height of the container and then setting the height of the image to be 100%. It is important that the width of the image appears before the height.
<html>
<head>
<style>
.container {
background: blue;
padding: 10px;
height: 100%;
max-height: 200px;
max-width: 300px;
}
.container img {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<div class="container">
<img src="http://placekitten.com/400/500" />
</div>
</body>
</html>
The closest I can get to this is this example:
http://jsfiddle.net/YRFJQ/1/
or
.container {
background: blue;
border: 10px solid blue;
max-height: 200px;
max-width: 200px;
overflow:hidden;
box-sizing:border-box;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
}
The main problem is that the height takes the percentage of the containers height, so it is looking for an explicitly set height in the parent container, not it's max-height.
The only way round this to some extent I can see is the fiddle above where you can hide the overflow, but then the padding still acts as visible space for the image to flow into, and so replacing with a solid border works instead (and then adding border-box to make it 200px if that's the width you need)
Not sure if this would fit with what you need it for, but the best I can seem to get to.
A good solution is to not use height on the parent and use it just on the child with View Port :
Fiddle Example: https://jsfiddle.net/voan3v13/1/
body, html {
width: 100%;
height: 100%;
}
.parent {
width: 400px;
background: green;
}
.child {
max-height: 40vh;
background: blue;
overflow-y: scroll;
}
Containers will already generally wrap their content nicely. It often doesn't work as well the other way around: children don't fill their ancestors nicely. So, set your width/height values on the inner-most element rather than the outer-most element, and let the outer elements wrap their contents.
.container {
background: blue;
padding: 10px;
}
img {
display: block;
max-height: 200px;
max-width: 200px;
}
http://jsfiddle.net/mpalpha/71Lhcb5q/
.container {
display: flex;
background: blue;
padding: 10px;
max-height: 200px;
max-width: 200px;
}
img {
object-fit: contain;
max-height: 100%;
max-width: 100%;
}
<div class="container">
<img src="http://placekitten.com/400/500" />
</div>