2行，第一行在父级的顶部，第二行在父级的底部
2行，第一行在父级的顶部，第二行在父级的底部
提问于 2015-10-02 17:20:50
我有一个绝对容器(必须保持绝对高度)，有固定的高度，我需要在里面放2里，一个在顶部，第二个在底部。两个li的高度都是可变的，我不能对底部的li使用绝对位置(这会打碎菜单中的某些东西)。
其结构是
<div id="container">
<div id="top">
top variable height
</div>
<div id="bottom">bottom variable height</div>
您可以看到olso a jsfiddle here
你知道怎么做吗？谢谢
回答 3
Stack Overflow用户
发布于 2015-10-02 17:27:41
您可以使用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;
}Stack Overflow用户
发布于 2015-10-02 17:41:44
如果可以更改HTML，可以对容器使用display: table，对其他容器使用display: table-cell，然后可以垂直对齐内容。为了使第一里保持在顶端，可以使用绝对定位。
#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;
}<div id="container">
<div class="table-cell">
<div id="top">top variable height</div>
<div id="bottom">bottom variable height</div>
</div>
</div>
Stack Overflow用户
发布于 2015-10-02 17:50:29
你写过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
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32912524
复制相关文章
点击加载更多
相似问题
滚动到父级的父级的顶部
覆盖父级的边框底部
父级的jQuery父级
关闭父级的父级的子级
子级与父级之间的边缘顶部
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
