Question

使用CSS属性＆＃39; position＆＃39;，如何在另一个div中创建一个div总是父div的100％高度，顶部和底部的边距为40px？它需要进行调整，这样如果父div的高度为700px，则子div将为620px（距离边距为700px - 80px）。这是我的意思的一个例子：

Here父div（绿色）很高，所以孩子（橙色）必须伸展以适应空间。

here父母（绿色）被压扁，所以孩子（橙色）必须通过挤压自己来适应。

提前谢谢。

修改

这是我正在使用的html：

<div id="center-page">
    <p id="center-page-title">Blog</h1>
    <div id="content">

    </div>
</div>

Answer 1

您可以使用top和bottom值尝试绝对定位。像这样：

#child{
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 0;
  right: 0;
  background: blue;
}

这是一个例子： https://jsfiddle.net/Lys72mgy/

Answer 2

试试这个：

#center-page {
  position: relative;
  background: green;
  height: 700px;
}

#content {
  position: absolute;
  background: orange;
  top: 40px;
  bottom: 40px;
  left: 0;
  right: 0;
}

<div id="center-page">
    <p id="center-page-title">Blog</h1>
    <div id="content">

    </div>
</div>

CSS如何在div中定位div，使其始终为100％

2 个答案: