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

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.

我有一种情况,我有几个具有绝对位置的div(用于3D翻转效果)。因此,父div的高度非常小,绝对内容在较低内容之上溢出。由于反应原因,无法真正设置固定高度。

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?

我打算给孩子div相对位置,然后在jquery的帮助下收集高度并根据它设置高度。但是真的有很多元素和vars用于响应。有没有其他更优雅的方式让孩子适合父母?

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;
}

2 个解决方案

#1

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

如果你不介意.absolute posistion,试着让它相对:

.absolute {
    position:relative;
}

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

工作示例 - http://jsfiddle.net/xyjrLa2p/3/

#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.

好吧,正如我所料,这是“100个答案中的99个”中的另一个。根据经验,请记住,如果你正在考虑响应式设计,使用绝对位置的机会非常小,接近0,因为它与响应性完全相反,除非你打算处理很多媒体查询。

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.

您可以添加一些最小宽度或最大宽度(以像素为单位)或添加媒体查询来更改某些时刻的vh / vw行为,但是你去了,完全响应行为(显然)没有绝对位置。

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.

永远记住:如果你想使用position:absolute,它应该在position:relative的容器里面。虽然有例外,但这是一个简单的规则,可以在定位元素时节省很多麻烦。

See fiddle here

在这里看小提琴

#1