Menu
I have a gradient applied to the background of the body element. Then I have a container (right after body) that has a background .png image applied to it. The gradient always expands to at least 100% window height but the container (#body2) does not.
Any suggestions to why this doesn't work? You can inspect the HTML on my web page here: http://www.savedeth.com/parlours/
950
Height % is based on it's parent (so you have to set every element above the target element to 100%) , there are a few workarounds to this though. For instance you can set it to height: 100vh; This will create the element to be 100% of your window height. Or you can use px instead.
Conversation. CSS tip: To reset a min-height or min-width declaration, set it to "0", not "auto". For max-height/width, the initial value is "none". Also see nimbupani.com/safe-css-defau…
The min-height property defines the minimum height of an element. If the content is smaller than the minimum height, the minimum height will be applied. If the content is larger than the minimum height, the min-height property has no effect.
The min-height property in CSS is used to set the minimum height of a specified element. The min-height property always overrides both height and max-height . Authors may use any of the length values as long as they are a positive value.
Specify height: 100% on the html, body and #body2 elements (line 1358).
html, body, #body2 { height: 100%; min-height: 100%; } Not tested in IE 6, works in 7 though.
89
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
