Menu
The webpage in question looks like this:
// The Header // /* */ /* CONTENT */ /* */ // The footer // Both the header and the footer have fixed heights. Lets say for example that both have a height of 20px. I need to set the content's height to 100% minus 40px (header + footer heights). I know I can do this easily with JavaScript, but it would be cool to learn how to do it with plain CSS, if it's possible.
297
4 Answers. Show activity on this post. height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.
height() It returns the current height of the element. It does not include the padding, border or margin. It always returns a unit-less pixel value. Note: The height() will always return the content height, regardless of the value of CSS box-sizing property.
Fortunately, it's easy to fix - although this is an Explorer-only solution! Place both DIVs into a container DIV that's set to 100% of page height and set both interior DIVS to 100%. They will fill up the container DIV and the height of both will be equal.
If your browser supports CSS3, try using the CSS element Calc()
height: calc(100% - 65px); you might also want to adding browser compatibility options:
height: -o-calc(100% - 65px); /* opera */ height: -webkit-calc(100% - 65px); /* google, safari */ height: -moz-calc(100% - 65px); /* firefox */ 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
