拉伸（垂直）其他两个中间的div [英] Stretch (vertically) middle div between the other two

问题描述

有没有办法拉伸中间的div，使其填充剩余的空间，在有限高度的另外两个（页眉，页脚）之间。所有这三个元素都放置在涵盖视口空间100％的父元素中。条件是所有三个div必须相对于它的内容，但是有限制（ max-height ）（除了中间的那个），所以没有绝对的定位。他们必须具有相同的父元素。我确实发现虽然类似的解决了问题，但是使用了表格结构，这不是我想要的，但是具有完全相同的行为，我想应用于我的概念。

这里 codepen ，但我没有弄清楚如何解决它。还有一个，我不想使用JS。

更新
也没有使用 flexbox ， calc（），表;


解决方案

CSS表格（不是实际表格）



body {margin：0;} .parent {height：100vh;显示：表格; width：100％;} header，footer {max-height：25vh;显示：表格行;背景：lightblue;} main {height：100％;背景：粉红色; display：table-row;}

< div class = 亲本 > <报头GT; < p> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Ea delectus quod，odit minus doloremque nesciunt voluptates veniam possimus voluptate sapiente provident，magnam sed，ipsam pariatur。< / p> < /报头> <主> < P>内容< / p为H. < /主> <页脚> < p> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Vel sed eligendi quibusdam voluptatibus consequatur cum，velit illo。 Aperiam similique laudantium praesentium v​​eniam repellat consequuntur et！< / p> < / footer>< / div>

$ b

支持 至少可以达到IE8。

然而，我不能推荐这个解决方案，但考虑到OP对此有不同的限制，这是唯一剩下的CSS解决方案AFAIK。

Is there a way to stretch middle div, make it fill the remaining space between the other two (header, footer) with limited heights. All three are placed within parent element which cover 100% of a viewport space. The conditions are all three divs have to be relative to it's content but with limits (max-height) (except the middle one), so no absolute positioning; they must have the same parent element. I did find though the similar solved problem, but there was used a table structure, which is not what I looking for, but have exactly the same behavior that I want to apply to my concept.

Here the codepen, but I didn't figure out how to solve it yet. And one more, I don't want to use JS.

UPDATE Also without using flexbox, calc(), tables;

解决方案

CSS Tables (not actual tables)

body {
  margin: 0;
}
.parent {
  height: 100vh;
  display: table;
  width: 100%;
}
header,
footer {
  max-height: 25vh;
  display: table-row;
  background: lightblue;
}
main {
  height: 100%;
  background: pink;
  display: table-row;
}

<div class="parent">
  <header>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea delectus quod, odit minus doloremque nesciunt voluptates veniam possimus voluptate sapiente provident, magnam sed, ipsam pariatur.</p>
  </header>
  <main>
    <p>content</p>
  </main>
  <footer>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel sed eligendi quibusdam voluptatibus consequatur cum, velit illo. Aperiam similique laudantium praesentium veniam repellat consequuntur et!</p>
  </footer>
</div>

Support is good down to IE8 at least.

However, I can't recommend this solution but given the unusual restrictions placed on this by the OP, this is the only remaining CSS solution AFAIK.

这篇关于拉伸（垂直）其他两个中间的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！