Question

我有一个div，我希望在父母的基础上以100vh最大化它的大小。

问题是我有两个p div，它们也可以根据窗口的宽度改变它们的高度，从而导致不同的大小。

现在快速而肮脏的解决方案可能只是运行一个jQuery片段来检测父div和p div的大小，并根据这些div设置div的高度，在{上运行函数{1}}和doc.ready。

但这感觉不必要了，我想知道是否有一个更简洁的解决方案只使用我不知道的CSS？

我在下面设置了一个简化但不起作用的问题版本，看看你是否能比我所说的更清楚。

任何提示都会很棒，谢谢！

window.onresize

*{
  margin: 0;
  padding: 0;
  font-family: Arial, san-serif;
}

#parent{
  height: 100vh;
  background: lightblue;
}

p{
  font-size: 40px; 
  background: yellow;
 }

#p1{
  top: 0;
}

#p2{
  bottom: 0;
  position: absolute;
}

div{
  background-color: red;
  height: 100%;
}

Answer 1

您可以使用flexbox达到您想要的效果。

由于有很多关于如何使用flexbox的资源，因此它不会包含在本答案的范围内。但是，我将解释基础知识，以便您了解这里发生了什么。

您可以使用属性定义容器，在本例中为#parent display: flex;，这使它成为一个弹性容器。
此容器的子元素现在是flex-items，在您的情况下是 <p>元素和中间的<div>。
然后我们让中间<div>增长以填充可用空间具有速记属性flex: 1;。

代码段：

* {
  margin: 0;
  padding: 0;
  font-family: Arial, san-serif;
}
#parent {
  height: 100vh;
  background: lightblue;
  display: flex;
  flex-direction: column;
}
p {
  font-size: 40px;
  background: yellow;
}
div > div {
  background-color: red;
  flex: 1;
}

<div id="parent">
  <p id="p1">Long block that only appears on the top</p>
  <div>Maximising Div</div>
  <p id="p2">Long block that only appears on the bottom</p>
</div>

注意：

检查Michael的 answer 以获取当前的浏览器支持。

Answer 2

＆＃13;

*{
  margin: 0;
  padding: 0;
  font-family: Arial, san-serif;
}

#parent{
  height: 100vh;
  display: flex;              /* establish flex container */
  flex-direction: column;     /* stack child elements ("flex items") vertically */
  background: lightblue;
}

p{
  font-size: 40px; 
  background: yellow;
 }

#p1 { /* can be variable height */}

#p2 { /* can be variable height */ }

div {
  background-color: red;
  flex: 1;                    /* consume free space in container;
                                 will force p elements to top and bottom */
}

＆＃13;

<div id="parent">
  <p id="p1">Long block that only appears on the top</p>
  <div>Maximising Div</div>
  <p id="p2">Long block that only appears on the bottom</p>
</div>

＆＃13;

浏览器支持： 所有主流浏览器except IE < 10都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。 this answer。

中的更多详细信息

Answer 3

将width: 100%添加到<p>元素并将body { overflow: hidden }设置为当前代码可提供您想要的功能，如果您不能使用flexbox。

body{
  overflow: hidden;
}
*{
  margin: 0;
  padding: 0;
  font-family: Arial, san-serif;
}
#parent{
  height: 100vh;
  background: lightblue;
}
p{
  font-size: 40px; 
  background: yellow;
  width: 100%;
}
#p1{
  top: 0;
}
#p2{
  bottom: 0;
  position: absolute;
}
div{
  background-color: red;
  height: 100%;
}

<div id="parent">
  <p id="p1">Long block that only appears on the top</p>
  <div class="maximising">Maximising Div</div>
  <p id="p2">Long block that only appears on the bottom</p>
</div>

使用可变高度

3 个答案: