Can I use overflow:hidden without an explicit height somehow?
In my opinion using overflow: hidden without setting dimensions doesn't make sense. If you don't want to specify the height of the container and if your images have a fixed width you could use this solution: http://jsfiddle.net/ZA5Lm/11/
The image is positioned with absolute, taking it out of the text-flow. However - and I'm aware that this may be ugly - you need to specify a padding-left to move the text away from the image.
Print CSS not respecting explicit height/overflow: none?
note: somewhat blind answer as I can't see your pictures.
Try using max-height
instead of height
. This worked for me.
edit
The problem is compatibility mode : It behave like IE6 : height is treated like min-height (ie "can grow bigger").
Full test case :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>test</title>
<style type="text/css" media="screen">
div {
border: 1px solid red; overflow:hidden;
float:left;
width:100%;
height:50pt
}
</style>
<style type="text/css" media="print">
div {
border: 1px solid blue; overflow:hidden;
float:left;
width:100%;
height: 50pt
}
</style>
</head>
<body>
<div>
test<br />test<br />test<br />test<br />test<br />test<br />test<br />
test<br />test<br />test<br />test<br />test<br />test<br />test<br />
</div>
</body></html>
Does CSS max-height Only Work 1 Level Deep? How to Automatically Scroll Nested Web Layouts if so?
I need elements to only take up the space required
Setting widths relative to the parent will not make elements take up only the space required. By default height
is set to auto
which only makes elements as tall as they need to be.
Stop levelTwo from overflowing levelOne & universally tell all elements to never expand beyond their parent
Decide what your children will do when they are too large to fit within their explicit height parent:
- Visibly overflow (Default)
- Hide (Bad practice)
- Scroll
- Why does
max-height: 100%
not top out at the grandparent's height, whileheight: 100%
does? I would have expected similar behavior.
Why setting
height: 100%
on each works, butmax-height: 100%
does not
MDN - The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.
So because your levelOne container has a max-height and not a height, the max height is seen as 100% of auto - and 100% of "as much as you need" is a max-height of none.
- Is there a better method to not allow elements to spill out of their parent sizes?
Please let me know if this example is in the direction you want.
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
height: 95vh;
background-color: red;
}
.levelOne {
background-color: blue;
max-height: 100%;
/* Correctly gets parent height*/
overflow: auto;
}
.levelTwo {
background-color: green;
}
<div class="levelOne">
<div class=levelTwo>
<p>Lorem</p>
<p>Lorem</p>
</div>
</div>
Height not being respected in absolutely positioned table
It is the table cell that doesn't honor its parent's height for the same reason i doesn't honor max-height
, hence pushing the table's size.
Here is 2 ways to make this to work, either set position: absolute
on the child
#main { width: 100px; height: 29px; position: absolute; top: 20px; left: 200px; border: 1px red dashed; display: table; table-layout: fixed; border-spacing: 0; border-collapse: separate;}#child { position: absolute; display: table-cell;}
<div id="main"> <div id="child">Custom Text With Validation: </div></div>
IE8 Bug with min-height and overflow:hidden?
How about http://jsfiddle.net/thirtydot/NDa6U/22/?
#innerContainer {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
Here's some (relatively) old background information about this technique: http://www.positioniseverything.net/articles/onetruelayout/combined
From personal experience, it works in all modern browsers with no problems.
Hide scroll bar, but while still being able to scroll
Just a test which is working fine.
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
Working Fiddle
JavaScript:
Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth
, the exact scrollbar width will show up.
JavaScript Working Fiddle
Or
Using Position: absolute
,
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
Working Fiddle
JavaScript Working Fiddle
Information:
Based on this answer, I created a simple scroll plugin.
CSS height 100% of its parent
Don't use float on .in_left
and .in_right
, use display:table-cell;
on those and, most importantly, use display:table;
on their container:
.inner {
display: table;
}
.in_left {
width: 229px;
/* other style */
display: table-cell;
}
.in_left {
width: 721px;
/* other style */
display: table-cell;
}
Image elements do not have explicit width and height
Short Answer
Add the image's native width and height in pixels as attributes on the image. This lets the browser calculate the aspect ratio for the image.
<img width="600" height="400" src="some-image.webp"/>
Long Answer
width: 100%
does not give an element an explicit width.
What it does is define the width relative to it's parent container.
height:auto
also does not give an image an explicit height, you are instructing the browser to make the image height whatever it thinks is appropriate based on the image proportions or the size of the container.
The biggest problem with this is the height of an image (as although the width of 100% is not explicit, it will be easy to calculate the actual width purely from the CSS).
When the page is requested the browser does not know the proportions of the image until it starts downloading.
For this reason the page renders (assuming you have inlined your critical CSS) then it requests the image and finds out how tall the image is. The container for the image will then change size to accommodate this image and you will get a layout shift, contributing to cumulative layout shift.
How to fix it
Option 1 - define the width and height using attributes
Option one is to define the image height and width as integers representing pixels by using attributes:
<img width="600" height="400" src="some-image.webp"/>
In modern browsers this will then be used to calculate an aspect ratio for the image and sufficient space will then be allocated on the page before the image starts downloading.
You can then use width:100%; height: auto;
as you do now and it will all work as expected.
Using width
and height
attributes is the recommended best practice.
please note - the width and height values only have to be the correct aspect ratio if you are using CSS to override the dimensions (so width=200 height=100
would give the same result as width=400 height=200
assuming you set the width in the CSS).
Option 2 - use "Aspect Ratio Boxes"
In this technique you define the image height as a proportion of the width within your CSS.
In essence we give the image a zero height and then use padding to allocate the correct amount of space.
.image-div {
overflow: hidden;
height: 0;
padding-top: 56.25%; /*aspect ratio of 16:9 is 100% width and 56.25% height*/
background: url(/images-one.webp);
}
If you don't need to support Internet Explorer (as it is a little temperamental) you can use calc()
.
padding-top: calc(900 / 1600 * 100%);
This padding technique is explained in detail in this article from css-tricks.
Although this is a bit of a hack, the advantage is no inline attributes on your images, so it is useful for people who like to keep their HTML clean (and for certain scenarios such as if you want make all images the same aspect ratio)
The problem with both
There is only one issue with both techniques, you need to know the image width and height before they are rendered in order to calculate the aspect ratio.
There isn't much you can do to avoid this unless you are willing to make a fixed height and width container for the image.
Then if the image is a different aspect ratio to your container you will have some white space around the image but the page will not have a layout shift (which would be preferable in most circumstances) - assuming you use overflow:hidden
etc. on the container.
.container{
width:50vw;
height:28.125vw; /*fixed height, doesn't have to be aspect ratio correct, see example 2 */
overflow:hidden;
margin: 20px;
}
.container2{
width:50vw;
height:40vw; /*fixed height, but this time there is extra white space (shown as dark grey for the example) below the image.*/
overflow:hidden;
background: #333;
margin: 20px;
}
img{
width: 100%;
height: auto;
}
<div class="container">
<img src="https://placehold.it/1600x900"/>
</div>
<div class="container2">
<img src="https://placehold.it/1600x900"/>
</div>
Maintain the aspect ratio of a div with CSS
Just create a wrapper <div>
with a percentage value for padding-bottom
, like this:
.demoWrapper {
padding: 10px;
background: white;
box-sizing: border-box;
resize: horizontal;
border: 1px dashed;
overflow: auto;
max-width: 100%;
height: calc(100vh - 16px);
}
div {
width: 100%;
padding-bottom: 75%;
background: gold; /** <-- For the demo **/
}
<div class="demoWrapper">
<div></div>
</div>
Related Topics
CSS Color Rendering Different in Safari
Using CSS Clip with Percentage
Font-Awesome Class with Multiple Different Icons
How to Output HTML Form Data to Pdf
How to Make Body Background Image Transparent in CSS
Right-Align The Contents of a Facebook Like-Button Iframe
How to Control Height of Ellipse in Radial Gradient
Border-Radius on <Th>. No Border Rounding
Actionview::Template::Error (Variable @Fontawesomeeotpath_Iefix Is Undefined)
How to Implement Rtl Bootstrap 4 Navbar
Placing a Div in Front of a Flash Embed
iPhone Viewport Height Too Large in Landscape Mode
Load Different CSS Rule Depending on The Browser in an Angular 4 Component
How to Fix Inconsistent Rendering of Adjacent Td Borders When They Are Collapsed
Firefox Displaying Table-Cell Incorrectly (Chrome Working Good)