div height
01-17-2014, 08:01 PM,
Post: #1
div height
Would like width of a div to be proportional to its container (body in this case)

Would like height of that div to be proportional to that width.

Only solutions I have found involve using javascript to query the width and then set the height. Is there really no CSS way for such a basic concept? Or do I just really suck at google?
Welcome to the dark side. Are you surprised we lied about having cookies?
01-17-2014, 08:05 PM, (This post was last modified: 01-17-2014, 08:07 PM by FuturDreamz.)
Post: #2
RE: div height
Does this help? http://stackoverflow.com/questions/14954...zing-a-div

Quote:Just create a wrapper <div> with a percentage value for padding-bottom, like this:

Code:
div.stretchy-wrapper {
    width: 100%;
    padding-bottom: 75%;
}

This will result in a <div> with the width of its container and a height equal to 75% of its width (a 4:3 aspect ratio).

Now to place contents in your div stretch the wrapper's child div to the edges of the wrapper:

Code:
div.stretchy-wrapper {
    position: relative;
}

div.stretchy-wrapper > div {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

try searching with the terms ratio or "aspect ratio"
My logic is infallible. Resistance is futile.
01-17-2014, 08:11 PM,
Post: #3
RE: div height
Thanks!
Welcome to the dark side. Are you surprised we lied about having cookies?


Forum Jump: