This question already has an answer here:
CSS Height working but min-height doesn't work
(1 answer)
Closed 5 years ago.
I would like a flex-element with a min-height of 100%.
There is a child element always at the bottom.
If the content in the first flex child is longer than the screen the site should be normal scrollable.
Here is a pen I made.
Why is it working with height but not min-height?
height: 100%; // works
min-height: 100%; // doesn't works
As answered here: CSS Height working but min-height doesn't work
Height can be inherited from positioned parents but not when these have a min-height property.
Which means that .flexbox doesn't inherit height from wrapper because .wrapper has min-height set. When you set height to .wrapper, .flebox and with it .grower can figure out what 100% actually means, and then they grow to fit the screen.
Note: I would say position part of the linked answer is not correct, but the quoted part is.
min-height : Height of the element or css class in question should not be less than specified value, even if height is less that specified value of min-height. It does not specify what the height is going to be, it specifies that it cannot be smaller than its value.
So, if height is 200px, max-height is 230px, min-height is 250px, height of the page component will be 250px. Between height and max-height, max-height can override height.
So, if I change your wrapper class to as shown below, it's height will remain 80%.
.wrapper {
background-color: pink;
min-height: 80%;
height:50px;
}
Related
The max-height property value seems to be ignored when the inner padding is greater than the max-height value. For example, setting this class on an element causes the max-height to be ignored.
.max-height-ignored {
height: 0; /* or auto, makes no difference */
max-height: 40px;
padding: 0 0 50% 50%;
}
demo here
In my situation, It would be a pain to wrap the element to prevent overflow and was just wondering if there was a reason behind this not working.
The min/max width/height properties never take any other box dimensions into account, neither borders nor padding. They only constrain the used values of the width and height properties respectively. Section 10 of CSS2.1 does not explicitly mention borders or padding in the prose for the min/max properties, but it does refer to the width and height properties, both of which refer to content dimensions.
If you set height: 50px, the element will still be constrained to a content height of 40px. The padding then extends from the content area.
Unfortunately, it appears box-sizing: border-box does not address this fully, at least not when the borders and/or padding are in excess of width and height.
While I can infer that this happens as a result of browsers following the spec, why the spec was written this way I cannot answer objectively. Given that padding and overflow clipping can work together, I don't think the reason for this behavior has anything to do with overflow.
It might be obvious, but as a work around, you might be able to limit the width of the wrapper using max-width. In my particular case, this required a max-width: 50vh (vh: percentage of viewport height).
In my jsp, I have a div whose width is determined by a javabean value. Basically it is being used to fill a bar. Some times the values are greater than 100, so the width becomes 300% (for example), thus going out of the parent's boundary.
I need to know, how I can limit the child div's width so that it doesn't exceed the parent boundary.
Thank you.
I just used a combination of the previous responses and it worked for me.
In my case I din't want to hardcode any pixel values but leave my child element fluid to grow and shrink to its parent element width.
Used for parent overflow: hidden; and for the child width: 100% !important;
Also noticed that the child doesn't have to be the direct child of the parent for this to work. For the record, my parent element is a Flex Container with flex-basis: 66%; which translates to a relative width in the Flexbox concept.
Apply the following CSS to the parent div:
overflow: hidden;
Or you might want to try the CSS max-width property on the child-div.
You can use width:100% !important on child div.This means it will fill only the parent div space only.
Alternatively you can also go for max-width and min-width concept.
Is there any way to get the following effect using CSS?
When container's width is less than image's original width, set image's width to 100% of container's width.
When container's width is larger than image's original width, set image's width to it's original wdith.
May be you can do like this:
for example:
img{
width:100%;
height:auto;
max-width:400px;
}
check this http://jsfiddle.net/aqh2r/
I found that the following CSS code could achieve the goal. But according to CSS Standard, when the value of max-width is percentage, it is "calculated with respect to the width of the generated box's containing block". According to my understanding, set max-width to 100% should take no effect, but it seems wrong.
img{
width: auto;
max-width: 100%;
}
The code is tested in Firefox 12 and IE 9. See http://jsfiddle.net/EnZEP/
This question already has answers here:
How to set the margin or padding as percentage of height of parent container?
(9 answers)
Closed 8 years ago.
I am working on a project in which the client wants the navigation <div> to align according to the screen height, similar to how margin-left as a percentage works when screen width is decreased.
So, I gave margin-top: 20% and navigation <div> displays that margin, but when I decrease the height of the window it does not adjust according the screen height although it works when I decrease the screen width.
My question is not how can I achieve that, but why does the percentage work horizontally and not vertically?
Here is an example: http://jsfiddle.net/sandeep/5VReY/
The percentage works on the width of the container block, according to the css specifications
The percentage is calculated with respect to the width of the
generated box's containing block. Note that this is true for
'margin-top' and 'margin-bottom' as well.
See w3.org for more information.
You can play width top/bottom properties having margin prop in "auto";
If you have a block like this:
<div class="centered"></div>
It may be centered verticaly like this:
.centered {
width: 100px; height: 100px; /* must be present. No matter the value */
position: absolute; /* to props top/bottom take effect */
margin: auto; /* here's the magic. */
bottom: 0px; top: 0px; /* This is how you center a block verticaly */
}
The same can be achieved for horizontal alignment width left/right properties. You can also have an offset in order to ubicate other point than the center of the block.
Here I leave you some examples of what and how can be done combining these properties.
http://jsfiddle.net/SQDJ6/
Is there a way to set a minimum height for a div, but still allow it to be expandable?
For example, I want a div to have an exact height of 300px when my page loads. However, if more content is added to the div with javascript, I want it to expand after that.
If I specify a height and the content expands past the div, it either clips or adds scrollbars, depending on the value of overflow.
If I don't specify a height, it only expands as far as the content.
Thanks
Here's the solution I used to fix this on ie6, courtesy of Dustin Diaz
selector {
min-height: 300px;
height: auto !important;
height: 300px;
}
The CSS property min-height does exactly this. Note that it does not work properly in IE6, however IE6 treats the height property as min-height, so you can use IE conditional comments to set a height property in a style sheet that is only loaded by IE6.