Question

我有一个顶级div，其高度配置为一个屏幕高度（height:100vh）。在这个div中，有一个固定高度（60px）的子div和另一个我希望增长的子div来填充剩余的高度（以便响应不同的屏幕尺寸）。

这个子div有一个图像和一些文本。目前，其宽度是硬编码的，否则图像会填满整个屏幕（并超过其父级的长度）。设置height:100%（甚至calc(100% - 60px)）并不会像我希望的那样扩展div。

＆＃13;

.one-page {
  min-height: 100vh;
  max-height: 100vh;
  background-color: #FF5555;
}

.fixed-size {
  height: 60px;
  border-style: solid;
}

.main-container {
  background-color: #55FF55;
  width: 300px;
  margin: auto;
}

.subtitle {
  text-align: center
}

.other {
  background-color: blue;
}

img {
  vertical-align: middle;
  width: 100%;
  height: auto;
}

＆＃13;

<body>
  <div class="one-page">
    <div class="fixed-size">
      this div is a fixed size
    </div>
    <div class="main-container">
      <p>
        <img src="http://images.clipartpanda.com/square-clip-art-clipart-square-shield-256x256-e296.png">
      </p>
      <div class="subtitle">
        subtitle text
      </div>
    </div>
  </div>
  <div class="other">
    something else
  </div>
</body>

＆＃13;

Answer 1

尝试使用clear_cache()。

height:calc(100vh - 60px)

DEMO

Answer 2

使用flexbox解决问题。运行以下代码段，您就会明白。 flex-grow: 1基本上会给第二个孩子留下所有剩余的身高。

＆＃13;

.p {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.c1 {
  height: 60px;
  background-color: green;
}

.c2 {
  flex-grow: 1;
  background-color: red;
}

＆＃13;

<div class="p">
  <div class="c1"></div>
  <div class="c2"></div>
</div>

＆＃13;

div的样式高度与图像填充父级的高度

2 个答案: