Question

所以我.cont以使用绝对位置为中心，高度为身体的80％。

里面有两个div。一个是固定高度。其他人需要扩展到其他父母.cont。

那我如何让它扩展为父母。

另一个要求是这两者中的内容需要垂直和水平居中。

body
   .cont
      .top
      .fillRest

这是jsfiddle：http://jsfiddle.net/24jocwu5/

make .fillRest扩展为.cont。
垂直和水平居中两个div中的h1标题。

不要使用calc（）

可以使用显示表，流量，位置和其他技巧。

enter image description here

Answer 1

你走了。绝对定位白色容器的顶部衬垫等于固定高度顶部div的高度。然后给顶部div一个z-index，使它超过你的白框：

小提琴 - http://jsfiddle.net/24jocwu5/2/

* {margin: 0; padding: 0;}

html, body {
    height: 100%;
    background-color: #3dd;
    color: #aaa;
    font-family: helvetica;
}
.cont {
    position: absolute;
    top: 0; bottom: 0;
    right: 0; left: 0;
    background-color: #1af;
    width: 400px;
    margin: auto;
    height: 80%;
}
.top {
    height: 100px;
    background-color: pink;
    position: relative;
    z-index: 1;
}
.fillRest {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 100px;
    height: 100%;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
h1 {
    text-align: center;
    width: 200px;
    margin: auto;
    background-color: #eee;
}

Answer 2

您可以将flexbox用于此

.cont {
  display: flex;
  flex-direction: column;
}

.cont > div {
  display: flex;
}

.fillRest {
  flex: 1;
}

Working Fiddle

Answer 3

这是你想要的？只有位置固定，左右0

http://jsfiddle.net/pabliiitoo/24jocwu5/1/

.fillRest {
    position: fixed;
    left: 0;
    right: 0;
    background-color: red;
    min-height: 80px;
}

Answer 4

为了将.fillRest扩展到其父.cont的其余部分，您需要将其高度设置为百分比。我估计大约20％~30％是你想要的，以保持与你在这里提供的图像类似的外观。

要测试它，请抓住一个非常大的字母和任何你想要的内容，并将其放在“内容”的位置。文本就是这样，您将能够以响应的方式看到它的扩展。我将给你的另一个建议是使你的宽度百分比也是如此，这样它们就会根据屏幕的宽度进行扩展。

如果这有助于你，请告诉我，否则我可以再看一下：）

CSS

.cont {
    position: absolute;
    top: 0; 
    bottom: 0;
    right: 0; 
    left: 0;
    background-color: #1af;
    width: 400px;
    margin: auto;
    height: 80%;
}

Answer 5

就我个人而言，我认为你这样做的方式都是错的。但也许这样的事情会起作用。

http://jsfiddle.net/24jocwu5/5/

我改变了CSS选择器：

.cont {
    position: absolute;
    top: 0; bottom: 0;
    right: 0; left: 0;
    background-color: #1af;
    width: 400px;
    margin: 10% auto;
    overflow: hidden;
}

.top {
    height: 20%;
    background-color: rgba(255,255,255,.8);
}

.fillRest {
    background-color: white;
    position: relative;
    width: 100%;
    height: 80%;
}

h1 {
    text-align: center;
    width: 100%;
    margin: auto;
    background-color: #eee;
}

Answer 6

这是方法摘要..前两种方式发布在这里 -

FlexBox Method 100％工作
Padding Method 80％工作。有用但不完全。
Css表格单元格和表格行100％工作量。来自我。
使用Calcs Simplest One。 100％工作。从我。

Css表格单元格：http://jsfiddle.net/24jocwu5/7/ .cont 是表格。 顶部＆amp; fillRest 是表格行，单元格可以有垂直对齐中间。

计算方法：http://jsfiddle.net/24jocwu5/9/ 工作但如果内容增加则不能很好地扩展，所以需要使用另一个可以包含内容的div。像这样http://jsfiddle.net/24jocwu5/10/

默认代码：

* {margin: 0; padding: 0; }

html, body {
    height: 100%;
    background-color: #3dd;
    color: #aaa;
    font-family: helvetica;
}

.cont {
    position: absolute;
    top: 0; bottom: 0;
    right: 0; left: 0;
    background-color: #1af;
    width: 400px;
    margin: auto;
    height: 80%;
}

我怎么得到最后一个div来扩大父母的身高？

6 个答案: