css - 边距前 100% - 父 Div 的高度

Question

我有以下布局要构建：

基本上，我需要三个高度不同且标题高度不同的 div 以 100% 的位置从其父级顶部定位，减去标题的高度。我可以使用 jQuery 来做到这一点，但这是一个响应式站点，所以我希望它尽可能基于 CSS（否则我将不得不处理$(window).resize()，根据我的经验，这可能是不可靠的）。

这可能吗，也许使用 CSS3calc功能？

谢谢。

Answer 1

因此，您可以尝试将内容（橙色容器）添加到蓝色容器的底部（取决于您可以使用的 html 结构position: absolute，或者margin-top在橙色容器中）。

比您可以将标题（绿色）容器放在橙色容器内并将其放在绝对顶部 -100% 的位置（橙色位置必须是absoluteor relatve）。

如果您将添加您的 html，那么将很容易找到更精确的解决方案。

JSFIDDLE 与示例

CSS：

.box{
   background: #f00;
   height: 150px;
   width: 100%;
   position: relative;
   padding: 20px;
   padding-bottom: 0;
}
.column{
    background: #0f0;
    width: 30%;
    position: relative;
    top: 100%
}
.header{
    position: absolute;
    bottom: 100%;
    width: 100%;
    background: #00f;
 }

HTML：

<div class="box">
    <div class="column">
        <div class="header">
           header 
        </div>
        aaaaaaa<br/>
        aaaaaa
    </div>    
</div>

Answer 2

我有这个解决方案（适用于任意数量的列，只要它们适合）：

1. 使用内联块将结果居中对齐
2. 使用相对定位将块与蓝色框的底部对齐（需要顶部垂直对齐）
3. 通过使它们成为绝对位置将绿色块移出流（这使流中的橙色框与蓝色框的底部对齐）

body {
  font: medium monospace;
}
.blue {
  background: #AAF;
  height: 12em;
  text-align: center;
}
.helper {
  display: inline-block;
  width: 10em;
  vertical-align: top;
  position: relative;
  top: 100%;
}
.green {
  background: #CFC;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
}
.orange {
  background: #FCA;
}

<div class="blue">
  <div class="helper">
    <div class="green">
      1<br/>2
    </div>
    <div class="orange">
      1<br/>2<br/>3
    </div>
  </div>
  <div class="helper">
    <div class="green">
      1<br/>2<br/>3
    </div>
    <div class="orange">
      1<br/>2<br/>3<br/>4<br/>5
    </div>
  </div>
  <div class="helper">
    <div class="green">
      1
    </div>
    <div class="orange">
      1<br/>2<br/>3<br/>4
    </div>
  </div>
</div>

Answer 3

尝试以下 CSS 规则：height: calc(100% - header_height);