Menu
I searched a lot but I didn't find a good resource.
I want to calculate a div height as its contents plus a fix size. I tested calc(auto+50px) but unfortunately It doesn't work (the browser does not interpret it as valid code).
468
The auto Value You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.
calc() The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length> , <frequency> , <angle> , <time> , <percentage> , <number> , or <integer> is allowed.
You can use calc() anywhere where you would use numeric values (e.g.: width, max-height, margin-left, …) Can I Use calc? Data on support for the calc feature across the major browsers from caniuse.com.
In this case we use jquery to calculate the height of content div area. But now using CSS we can set height without making header and footer height fixed or using jquery function. We use css property height: calc( 100% - div_height ); Here, Calc is a function.
Does this produce the desired result?
div {
height: auto;
padding-bottom: 50px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
