拉伸（垂直）其他两个之间的中间div

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

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

UPDATE 而且不使用flexbox，calc()，tables;

来源

2016-04-25 Sébastien

在你的CSS是很多东西......我不明白你想要做什么，如果你的父母div是100vh，那么如果你给第一个高度，最后一个高度，你只需要给中间一个100％没有？ – DanyCode

@DanyCode如果我给中间的一个100％，它将覆盖到视口底部的所有空间，但它也会将页脚div从屏幕上移开。 –

和高度：calc（100％ - ... px）; ... px是高度页眉+页脚 – DanyCode

CSS表（而不是实际的表）

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好到IE8至少。

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

来源

2016-04-25 19:18:11

Flexbox是为此而构建的。支持IE10及以上，真的不错。 –

拉伸（垂直）其他两个之间的中间div

回答

相关问题