We use the percentage trick on paddings to keep aspect ratio to a div when the user scales his window. Like this:
.div {
background: red;
width: 80%;
margin: 0 auto 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 20%;
}
Now we would like to be able to set a maximum height to this div. Because the height of the div is determined by the padding on the div we would need the div to be border-boxed. So far so good. When trying to use a min-height on the div, this works. The max-height on this div however does not work for some reason.
.div {
max-height: 60px;
}
I created a fiddle to show you what i mean: http://jsfiddle.net/UxuEB/3/.
Tested this on Chrome, FF and IE. Can somebody tell me what I'm doing wrong or why this doesn't work as expected?
I realize this answer comes incredibly late to the party but I was trying to solve this exact same thing today and this question is the first result in Google. I ended up solving it with the below code so hopefully that will help someone out in the future.
First, add an extra inner div:
<div class="control control-max-height">
<div class="control-max-height-inner">
Max-height
</div>
</div>
And set the padding on that while hiding the overflow on the outer div:
.control {
background: red;
width: 80%;
margin: 0 auto 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.control-max-height {
max-height: 120px;
overflow: hidden;
}
.control-max-height-inner {
padding-bottom: 20%;
}
This obviously assumes you're fine with hiding part of the inner element when it overflows. In my case that wasn't a problem because the inner element is just an empty link element to make the whole thing clickable and the outer element just has a centered background image and a border set.
See fiddle: http://jsfiddle.net/UxuEB/7/
The property max-height works on the height of the element and you want to use it on the height and padding-bottom.
I think you are confused by the box-sizing property that it changes the element height to the overal height including the padding top and bottom (also me). But this is not the case as you will see in the jsFiddle example.
An example:
The element with content is 100px in height.
The max-height is set to 50px (element is now 50px in height).
Now we apply the padding-bottom of 100px (more then the height of the element). The padding of 100px is added to the total height of the element making it 150px.
JsFiddle example: clicky
Extending from Mike's answer, the same can be achieved with a single DOM element & a pseudo element, eg.
html:
<div class="le-div"></div>
css:
div.le-div {
max-height: 200px;
/* 👇 only necessary if applying any styles to the pseudo element
other than padding:
overflow: hidden;
*/
}
div.le-div::before {
content: '';
display: block;
padding-bottom: 60%;
}
Min-height property defines the height when height is solely dependent on padding only but max-height does not.
Not sure why but now in 2020, min and max css units does nice job as we need.
.classthatshoulddefineheight {
padding-bottom: min(20%, 60px);
}
So when 20% becomes greater than 60px then it will be limited to 60px (minimum of them).
The limitation to Mike's answer (and this Brad's answer - although Brad's technique can be incorporated to reduce the number of levels of containers) is that it requires overflow: hidden - which in my use-case (and in many others) a significant limitation.
I've reworked his example to work without overflow: hidden; using an additional level and absolute positioning.
http://jsfiddle.net/2ksh56cr/2/
The trick is to add another container inside the inner box, make it absolute positioned and then add the max-height to that container as well:
.inner-inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-height: 120px;
}
As long as your fine with having some additional DOM-elements, this should work in all scenarios for more or less all browsers.
Try display: flow-root; on the parent container.
i'm writing my little css framework but i got a strange problem, check this jsfiddle please: http://jsfiddle.net/76y8B/
as you can see the red div has 1px margin right but i setted all to margin:0;
Any help please?
Your making a calculation error. You've sized your div to 96% of the body. Say the body is 1000 pixels wide, that means the div is now 960 pixels. You then give it a padding of 2% on both left and right side, meaning 2% of 960 pixels, or 19.2 pixels on both ends. 960+19.2+19.2 = 998.4 pixels total width. That's where the minor gap comes from.
The only way to fix this without fixing other markup is to correct for the calculation origin of the padding, ie. set the paddings not to (100-96)/2 but ((100/96)-1)/2 or 2.08333%. The following thus solves the gap:
.heading {
padding: 13px 2.08333% 8px;
}
Alternatively you can use border-box to change how these values are calculated, see this other answer here.
Another solution is to set 100% width and a cooler box-sizing: border-box.
.heading {
/* new stuff */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
/* end of new stuff */
clear: both;
color: #FFFFFF;
line-height: 25px;
margin: 0;
min-height: 28px;
padding: 13px 2% 8px;
}
Running demo
Read more on Box-sizing, and on the differences between the W3C Box model and the Traditional Box Model:
Box models
In the W3C box model, the width of an element gives the width of the content of the box, excluding padding and border.
In the traditional box model, the width of an element gives the width between the borders of the box, including padding and border.
The element has the display property inline-table. Is the per design? That, in combination with the 2%+2%+96% logic is what is causing the margin, change it to inline-block and you’ll see.
display:inline-table in .row-fluid is causing problem.
Remove it or write display:block.
Updated fiddle here.
I'm looking to position a Google Maps div with a sidebar on the right that displays listings. I want to make it so the window doesn't scroll, and the contents on the page are fluid when resizing the screen.
I have previously attempted to use box-sizing like the following:
#map-wrapper * {
box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-khtml-box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
}
#map-container {
position: absolute;
width: 100%; height: 100%;
margin: 0;
overflow: hidden;
border-top: 50px solid transparent !important; border-right: 350px solid transparent !important;
}
This starts to become a nightmare when trying to have a scrolling list in the sidebar. Does anyone have a good solution, or am I on the right track with box-sizing?
Box-sizing is purely optional for something like this. There are many ways to go about it, but I have one favored method that is simple and works well in old browsers like IE6.
For the various frames you are trying to create (sidebar and Gmaps/content frame) create a css rule that sets position:absolute; overflow:auto;. Now you can take advantage of a cool trick in CSS absolute positioning. If you set both top and bottom in CSS, the height is automatically calculated. Same goes for widths using left/right. So to make our two divs 100% height set top: 0; bottom:0;.
If you want the sidebar to be 300px wide and anchored to the right, then set width:300px; right:0;. For the content div, set right:300px; left:0;.
Now you need to prevent the body scrollbars from appearing. First of all, you will need to remove the default margin/padding from body by setting them to 0. Also, you need to set html & body to height:100%; (100% equals the viewing area height), other wise they default to auto which is the content's height. It is also wise to add overflow:hidden to body, since some browsers think `body{height:100%;} means they need to show scrollbars.
Here is a quick mockup on JS fiddle showing you how this works.
Elimn's suggestion did not work for me, but the following did (I created a header bar above the Google Map):
body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
#map-canvas { height: 100%; overflow: auto; }
In the body:
<div id="topmenubar" style="position:relative;background:olive;height:40px;top:0;"></div>
<div id="map-canvas"></div>
I have a problem using a given CSS file I don't want to change. In this file there is a format for inputs:
input {
display:inline-block;
width:60%;
}
Now I want to use an additional CSS file and change this formatting to a normal block element width full width:
input {
display:block !important;
width:auto !important;
}
Unfortunately, this doesn't work. Unlike normal block elements, the input does not take all the available horizontal space with this setting. It is only as long as it would be as inline element. Additionally, I cannot use width:100%; due to padding, borders and margin. In my desperation I already tried something like width:none;, but I couldn't find a way to reset the width to a block element's default value.
I really hope that somebody can help me. Thank you in advance.
You must use width: 100%, so my answer shows how to fix the problems you're having with it.
https://developer.mozilla.org/en/CSS/box-sizing
input {
width: 100%;
margin: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
If margin is required, then wrap the input in another element and apply the margin to that.
With HTML/CSS, how can I make an element that has a width and/or height that is 100% of it's parent element and still has proper padding or margins?
By "proper" I mean that if my parent element is 200px tall and I specify height = 100% with padding = 5px I would expect that I should get a 190px high element with border = 5px on all sides, nicely centered in the parent element.
Now, I know that that's not how the standard box model specifies it should work (although I'd like to know why, exactly...), so the obvious answer doesn't work:
#myDiv {
width: 100%
height: 100%;
padding: 5px;
}
But it would seem to me that there must be SOME way of reliably producing this effect for a parent of arbitrary size. Does anyone know of a way of accomplishing this (seemingly simple) task?
Oh, and for the record I'm not terribly interested in IE compatibility so that should (hopefully) make things a bit easier.
EDIT: Since an example was asked for, here's the simplest one I can think of:
<html style="height: 100%">
<body style="height: 100%">
<div style="background-color: black; height: 100%; padding: 25px"></div>
</body>
</html>
The challenge is then to get the black box to show up with a 25 pixel padding on all edges without the page growing big enough to require scrollbars.
I learned how to do these sort of things reading "PRO HTML and CSS Design Patterns". The display:block is the default display value for the div, but I like to make it explicit. The container has to be the right type; position attribute is fixed, relative, or absolute.
.stretchedToMargin {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
margin-bottom:20px;
margin-right:80px;
margin-left:80px;
background-color: green;
}
<div class="stretchedToMargin">
Hello, world
</div>
Fiddle by Nooshu's comment
There is a new property in CSS3 that you can use to change the way the box model calculates width/height, it's called box-sizing.
By setting this property with the value "border-box" it makes whichever element you apply it to not stretch when you add a padding or border. If you define something with 100px width, and 10px padding, it will still be 100px wide.
box-sizing: border-box;
See here for browser support. It does not work for IE7 and lower, however, I believe that Dean Edward's IE7.js adds support for it. Enjoy :)
The solution is to NOT use height and width at all! Attach the inner box using top, left, right, bottom and then add margin.
.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}
<div class="box" style="background:black">
<div class="box" style="background:green">
<div class="box" style="background:lightblue">
This will show three nested boxes. Try resizing browser to see they remain nested properly.
</div>
</div>
</div>
The better way is with the calc() property. So, your case would look like:
#myDiv {
width: calc(100% - 10px);
height: calc(100% - 10px);
padding: 5px;
}
Simple, clean, no workarounds. Just make sure you don't forget the space between the values and the operator (eg (100%-5px) that will break the syntax. Enjoy!
According the w3c spec height refers to the height of the viewable area e.g. on a 1280x1024 pixel resolution monitor 100% height = 1024 pixels.
min-height refers to the total height of the page including content so on a page where the content is bigger than 1024px min-height:100% will stretch to include all of the content.
The other problem then is that padding and border are added to the height and width in most modern browsers except ie6(ie6 is actually quite logical but does not conform to the spec). This is called the box model. So if you specify
min-height: 100%;
padding: 5px;
It will actually give you 100% + 5px + 5px for the height. To get around this you need a wrapper container.
<style>
.FullHeight {
height: auto !important; /* ie 6 will ignore this */
height: 100%; /* ie 6 will use this instead of min-height */
min-height: 100%; /* ie 6 will ignore this */
}
.Padded {
padding: 5px;
}
</style>
<div class="FullHeight">
<div class="Padded">
Hello i am padded.
</div
</div>
1. Full height with padding
body {
margin: 0;
}
.container {
min-height: 100vh;
padding: 50px;
box-sizing: border-box;
background: silver;
}
<div class="container">Hello world.</div>
2. Full height with margin
body {
margin: 0;
}
.container {
min-height: calc(100vh - 100px);
margin: 50px;
background: silver;
}
<div class="container">Hello world.</div>
3. Full height with border
body {
margin: 0;
}
.container {
min-height: 100vh;
border: 50px solid pink;
box-sizing: border-box;
background: silver;
}
<div class="container">Hello world.</div>
This is one of the outright idiocies of CSS - I have yet to understand the reasoning (if someone knows, pls. explain).
100% means 100% of the container height - to which any margins, borders and padding are added. So it is effectively impossible to get a container which fills it's parent and which has a margin, border, or padding.
Note also, setting height is notoriously inconsistent between browsers, too.
Another thing I've learned since I posted this is that the percentage is relative the container's length, that is, it's width, making a percentage even more worthless for height.
Nowadays, the vh and vw viewport units are more useful, but still not especially useful for anything other than the top-level containers.
Another solution is to use display:table which has a different box model behaviour.
You can set a height and width to the parent and add padding without expanding it. The child has 100% height and width minus the paddings.
JSBIN
Another option would be to use box-sizing propperty. Only problem with both would be they dont work in IE7.
Another solution: You can use percentage units for margins as well as sizes. For example:
.fullWidthPlusMargin {
width: 98%;
margin: 1%;
}
The main issue here is that the margins will increase/decrease slightly with the size of the parent element. Presumably the functionality you would prefer is for the margins to stay constant and the child element to grow/shrink to fill changes in spacing. So, depending on how tight you need your display to be, that could be problematic. (I'd also go for a smaller margin, like 0.3%).
A solution with flexbox (working on IE11): (or view on jsfiddle)
<html>
<style>
html, body {
height: 100%; /* fix for IE11, not needed for chrome/ff */
margin: 0; /* CSS-reset for chrome */
}
</style>
<body style="display: flex;">
<div style="background-color: black; flex: 1; margin: 25px;"></div>
</body>
</html>
(The CSS-reset is not necessarily important for the actual problem.)
The important part is flex: 1 (In combination with display: flex at the parent). Funnily enough, the most plausible explanation I know for how the Flex property works comes from a react-native documentation, so I refer to it anyway:
(...) flex: 1, which tells a component to fill all available space, shared evenly amongst other components with the same parent
To add -webkit and -moz would be more appropriate
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Frank's example confused me a bit - it didn't work in my case because I didn't understand positioning well enough yet. It's important to note that the parent container element needs to have a non-static position (he mentioned this but I overlooked it, and it wasn't in his example).
Here's an example where the child - given padding and a border - uses absolute positioning to fill the parent 100%. The parent uses relative positioning in order to provide a point of reference for the child's position while remaining in the normal flow - the next element "more-content" is not affected:
#box {
position: relative;
height: 300px;
width: 600px;
}
#box p {
position: absolute;
border-style: dashed;
padding: 1em;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div id="box">
<p>100% height and width!</p>
</div>
<div id="more-content">
</div>
A useful link for quickly learning CSS positioning
This is the default behavior of display: block The fastest way that you can fix it in 2020 is to set display: 'flex' of parent element and padding e.g. 20px then all its children will have 100% height relative to its height.
Border around div, rather than page body margin
Another solution - I just wanted a simple border around the edge of my page, and I wanted 100% height when the content was smaller than that.
Border-box didn't work, and the fixed positioning seemed wrong for such a simple need.
I ended up adding a border to my container, instead of relying on the margin of the body of the page - it looks like this :
body, html {
height: 100%;
margin: 0;
}
.container {
width: 100%;
min-height: 100%;
border: 8px solid #564333;
}
<style type="text/css">
.stretchedToMargin {
position:absolute;
width:100%;
height:100%;
}
</style>