html – 2行,首先在父级的底部,第二个在底部

概述我有一个绝对容器(必须保持绝对),固定高度,我需要放置2里面,一个在顶部,第二个在底部.两个li都有可变的高度,我不能使用绝对位置作为底部(将破坏菜单中的东西). 结构是 <div id="container"><div id="top"> top variable height</div><div id="bottom">bottom variable height</div> 你 我有一个绝对容器(必须保持绝对),固定高度,我需要放置2里面,一个在顶部,第二个在底部.两个li都有可变的高度,我不能使用绝对位置作为底部(将破坏菜单中的东西).

结构是

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

你可以看到一个Jsfiddle here

知道怎么做吗？谢谢

解决方法 您可以使用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;}

总结

以上是内存溢出为你收集整理的html – 2行,首先在父级的底部,第二个在底部全部内容，希望文章能够帮你解决html – 2行,首先在父级的底部,第二个在底部所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。