Question

我要构建以下布局：

基本上，我需要三个不同高度的div和不同的标题高度，从父母的顶部开始100％定位，减去标题的高度。我可以使用jQuery做到这一点，但这是一个响应式网站，所以我希望尽可能保持基于CSS（否则我将不得不处理$(window).resize()，这在我的经验可能不可靠。）

这可能，可能使用CSS3 calc功能吗？

感谢。

Answer 1

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

您可以将标题（绿色）容器放在橙色容器中，并将其置于绝对顶部-100％（橙色位置必须为absolute或relatve）。

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

JSFIDDLE with an example

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

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

使用内联块来居中对齐结果
使用相对定位将块与蓝色框的底部对齐（需要顶部垂直对齐）
将绿色块移出流量，使其成为绝对位置（这会使流动中的橙色框与蓝色框的底部对齐）

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);

保证金最高100％ - 父母的高度

3 个答案: