Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/42.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 高度灵活的div容器内的绝对定位_Html_Css_Position_Height - Fatal编程技术网

Html 高度灵活的div容器内的绝对定位

Html 高度灵活的div容器内的绝对定位,html,css,position,height,Html,Css,Position,Height,下面是一个示例我想用HTML和CSS做什么: 解释 我依赖于WordPress中的一个插件,该插件可以为每一列生成一列。我希望整个表的高度(目前是div表)取决于最高的列(在我的示例列2中)。每个列的顶部都有一个灵活的div容器,底部有一个固定高度的div容器(在上面的示例中命名为sticky) 有没有办法实现这一点?我尝试了不同的方法,但没能得到我想要的。这是我正在使用的当前代码: 说明1 粘性的 说明2 粘性的 说明3 粘性的 我能想到的唯一方法是,如果父most元素(.multiinl

下面是一个示例我想用HTML和CSS做什么:

解释 我依赖于WordPress中的一个插件,该插件可以为每一列生成一列。我希望整个表的高度(目前是div表)取决于最高的列(在我的示例列2中)。每个列的顶部都有一个灵活的div容器,底部有一个固定高度的div容器(在上面的示例中命名为sticky)

有没有办法实现这一点?我尝试了不同的方法,但没能得到我想要的。这是我正在使用的当前代码:


说明1
粘性的
说明2
粘性的
说明3
粘性的

我能想到的唯一方法是,如果父most元素(.multiinline)具有固定高度。然后您可以将
.multiline cell
设置为position:relative,将
设置为position:absolute,并将
.multiline cell bottom
设置为position:absolute,bottom:0。


查看:

感谢您的快速回答,但在您的示例中,.multiline单元格底部现在位于页面底部,而不是.multiline单元格元素的底部。如果我尝试为.multiline单元格设置一个高度,它不会改变任何东西。在小提琴中,它对我来说很好。你用的是什么浏览器?别忘了在.multiline-cel中添加
position:relative
。它在FF 28中不起作用,但在Safari 7中起作用。这不是一个好交易。你对如何解决这个具体问题或如何用另一种方式解决这个问题有什么想法吗?
<div class="multiinline">
  <div class="multiinline-row">
    <div class="multiinline-cell">
     <div class="multiinline-cell-top">
       <div>Description 1</div>
     </div>
     <div class="multiinline-cell-bottom">
      <div>Sticky</div>
     </div>
    </div>
    <div class="multiinline-row">
    <div class="multiinline-cell">
     <div class="multiinline-cell-top">
       <div>Description 2</div>
     </div>
     <div class="multiinline-cell-bottom">
      <div>Sticky</div>
     </div>
    </div>
    </div>
    <div class="multiinline-row">
    <div class="multiinline-cell">
     <div class="multiinline-cell-top">
       <div>Description 3</div>
     </div>
     <div class="multiinline-cell-bottom">
      <div>Sticky</div>
     </div>
    </div>
 </div>
</div>