Question

我有一个绝对容器（必须保持绝对），固定高度，我需要放置2里面，一个放在顶部，第二个放在底部。两个都有可变的高度，我不能使用绝对位置作为底部（将破坏菜单中的东西）。

结构是

<div id="container">
<div id="top">
    top variable height
</div>
<div id="bottom">bottom variable height</div>

你可以看到一个jsfiddle here

知道怎么做吗？感谢

Answer 1

您可以使用Flex属性执行此操作。

小提琴：https://jsfiddle.net/9vq8nkpc/

<强> HTML

<div id="container">
    <div id="top">
        top variable height
    </div>
    <div id="bottom">bottom variable heighbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightt</div>
</div>

<强> CSS

#container {
    border: 1px solid red;
    height: 200px;
    position: absolute;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
#top, #bottom {
    border: 2px solid red;
    background: #ccc;
    width:80%;
    display: inline-block;
}

Answer 2

如果可以更改HTML，则可以使用display：table表示容器并显示：table-cell表示其他容器，然后可以垂直对齐内容。为了使第一个李保持在最顶层，可以使用绝对定位。

＆＃13;

#container {
    border: 1px solid red;
    height: 200px;
    width: 90%;
    position: absolute;
    display: table;
}
#top, #bottom {
    border: 2px solid red;
    background: #ccc;
    width:80%;
    display: inline-block;
}

#top{
    position: absolute;
    top: 0;
    left: 0;
}

.table-cell{
    display: table-cell;
    vertical-align: bottom;
}

＆＃13;

<div id="container">
    <div class="table-cell">
            <div id="top">top variable height</div>
            <div id="bottom">bottom variable height</div>
    </div>
</div>

＆＃13;

小提琴演示：http://jsfiddle.net/3bsa7hco/1/

Answer 3

你写道bottom不能有绝对定位，但你对top没有说同样的内容。

在这种情况下，您可以使用以下样式：

#top {
  position: absolute;            //so top won't affect bottom's placement
}

#bottom {
  position: relative;            //relative to container
  top: 100%;                     //height of container ...
  transform: translateY(-100%);  //... minus height of bottom element
}

Fiddle

父级的第2行，第一行和第二行

3 个答案: