自动为绝对孩子的父div设置高度

Question

I've got a situation, where i have a few divs with absolute position (for 3d flipping effect ). As a result, parent div's height is very small and absolute content overflows on top of lower content. Can't really set a fixed height for responsive reasons.

I'm planning to give children divs relative position, and then gather height with a help of jquery and set the height based on it. But there really is a lot of elements and vars for responsive. Is there any other, more elegant way to make children fit the parent?

http://jsfiddle.net/xyjrLa2p/

html

<div class="parent">
<div class="title">Title</div>
<div class="absolute">
    <p>Absolute</p>
    <p>Absolute</p>
    <p>Absolute</p>
</div>
<div class="clearboth"></div>
</div>

css

.parent {
position:relative;
background-color:yellow;
}
.absolute {
position:absolute;
}
.absolute p {
padding:5px;
}
.clearboth {
clear:both;
}

Answer 1

If you don't mind .absolute posistion, try to make it relative :

.absolute {
    position:relative;
}

Working example -- http://jsfiddle.net/xyjrLa2p/3/

Answer 2

OK, as I expected, this is another of those " 99 out of 100 answers ". As a rule of thumb, remember that if you're thinking of responsive design , chances of using absolute position are really slim, close to 0, because it's the absolute opposite to responsiveness , unless you're planning to deal with LOTS of media queries.

So, in your case and your sample, here you have:

body {
    background: #ccc;
}
.flip {
    -webkit-perspective: 800;
    width: 20vw;
    height: 20vh;
    position: relative;
    margin: 50px auto;
    display:inline-block;
}
.flip .card.flipped {
    -webkit-transform: rotatex(-180deg);
}
.flip .card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
}
.flip .card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    z-index: 2;
    font-family: Georgia;
    font-size: 3em;
    text-align: center;
    line-height: 200px;
}
.flip .card .front {
    position: absolute;
    z-index: 1;
    background: black;
    color: white;
    cursor: pointer;
}
.flip .card .back {
    -webkit-transform: rotatex(-180deg);
    background: blue;
    background: white;
    color: black;
    cursor: pointer;
}

You can add some min-width or max-width in pixels or add a media-query to change the vh/vw behavior at some point, but there you go, fully responsive behavior with (obviously) no absolute position.

Always remember: if you want to use position:absolute , it should be inside a container with position:relative . While there are exceptions to this, it's an easy rule that will save you a lot of trouble at the time of positioning elements.

See fiddle here