Html 使用位置：绝对，同时将其保留在文档流中

这是我正在构建的一个页面的截图。我试图确保绿色按钮始终位于容器底部。下面是一段代码：

HTML

<div class="list-product-pat">
  <article>

   <!-- title, image, spec ... -->

   <div class="pricing-pat">

     <!-- the button goes here -->

   </div>
  </article>
</div>

到目前为止没有问题。。。直到产品规格变得太长，并打破了绿色按钮

我希望将绿色按钮保持在最底部位置，但同时，如果产品标题/产品规格过长，我还希望高度延长

在理想世界中，应该是这样的：

因此，我的想法是保持绝对定位，同时仍将其保留在文档流中（这样产品规范知道绿色按钮在那里，并且不会突破它）

如果规格高度太长，我只需要扩展。换句话说，如果规范处于正常高度，它将不会扩展。我想避免

你知道怎么做吗

---

这里有一把小提琴来看看我是如何做到的：

添加

位置：绝对

将其从文档流中移除，无法将其保留在其中。 但您可以在

文章

容器中添加与按钮高度相当的

填充底部

，这将防止长文本溢出按钮

.list-product-pat article {
    position: relative;
    min-height: 260px;
    padding-bottom:80px;
    -moz-box-sizing:border-box;
    box-sizing:border-box; 
}

---

另一个问题是，两个文本量不同的容器大小不同（如果其中一个大于最小高度设置）。CSS定位中没有简单的解决方法，你必须求助于Javascript、Flexbox或

显示：表格单元格

，以保持所有元素的高度不变，但每个元素都有自己的问题。

正如@mikel已经指出的，你不能将元素保持在正常范围内，但是你可以通过模拟来解决这个问题

考虑到下面的例子：

img{
位置：绝对位置；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本

在未来（希望不久的将来），您将能够使用，但是其他浏览器应该很快增加支持

子网格使您能够使用具有非平面结构（例如无序列表）的网格要素。也就是说，您可以将一个元素的子元素与另一个元素的子元素对齐，或者在本例中，将图像、标题、说明和价格按钮对齐

。列出产品目录{
/*创建具有5列175px宽的网格，
每行有5行，其大小基于行中最小的项目*/
显示：内联网格；
网格模板列：重复（5175px）；
网格模板行：重复（5，最小内容）；
/*颜色和间距与设计相匹配*/
背景#f4；
填充：1em；
栅柱间隙：1米；
边框：1px实心#ddd；
}
.列出产品列表pat li{
/*确保此项占据该列*/
网格行：1/-1；
/*生成子网格项*/
显示：网格；
/*将父级网格用于子级*/
网格模板行：子网格；
/*与设计相匹配的样式*/
文本对齐：居中；
证明项目：中心；
边框：1px实心#ddd；
背景：#fff；
}
/*样式与下面的设计相匹配*/
.列出产品pat>li>img{
边缘顶部：1米；
}
.列出产品pat>li>h1{
边缘：.8em0；
字号：1em；
}
.列出产品pat>li>p{
保证金：0；
颜色：#bbb；
字体大小：.8em；
边缘：0.5em1em；
}
.列出产品pat>li>a{
文字装饰：无；
颜色：白色；
字体大小：粗体；
背景：线性梯度（#60bb76，#48b161）；
边界半径：.5em；
盒影：1px1px2pRGBA（0,0,0,5）；
填充：.5em；
最小宽度：钙（100%-1米）；
边缘底部：.5em；
框大小：边框框；
}
.列出产品pat>li>a>small{
显示：块；
字体大小：正常；
字体大小：.7em；
边缘顶部：.2米；
}

手机
GSM、GPS、WiFi、kamera 5MP、蓝牙、Android、触摸屏、600MHz



三星19300 Galaxy S III
GSM、GPS、WiFi、kamera 8MP、蓝牙、Android、触摸屏、1.4GHz



三星Galaxy Grand i9082
GSM、GPS、WiFi、触摸屏、1.2GHz



苹果iphone5 16GB
GSM、GPS、WiFi、kamera 8MP、蓝牙、iOS 6、触摸屏、1.2GHz



黑莓曲线9360（阿波罗）
GSM、GPS、WiFi、kamera 5MP、蓝牙、800MHz

我想到了这一点；我还想用按钮的高度添加

文章

的

minheight

。但是，当规格处于正常高度时（规格和绿色按钮之间会有一个巨大的间隙），这样做看起来很奇怪（太长）/这就是“框大小：边框框；”位的作用；）它在最小高度内包含了填充，因此如果文本较短，按钮和文本之间的距离是正常的-没有大的空间。您可以在我的JSFIDLE上看到它-即使使用填充底部，最左边的一篇“文章”与你的jsFoDeld:米克尔没有添加<代码>框大小< /代码>属性在你的小提琴演示：“米克尔，因为你的回答很好，我不会张贴另一个，但是你可能也想考虑这一点：OMG！我的广告拦截器怎么了。。。啊，屏幕截图。重复：

.list-product-pat article {
    position: relative;
    min-height: 260px;
    padding-bottom:80px;
    -moz-box-sizing:border-box;
    box-sizing:border-box; 
}