容器内部的CSS多个div使得页面延伸出高度100％

Question

I m googling, coding but can t为我的问题寻找解决方案。我有容器设置为100％的高度，其中包含另一个100％的容器，也有两个固定高度的div，混淆了将所有内容放在一个屏幕中而不需要滚动的整个想法。 https://jsfiddle.net/6jk91tnq/

Answer 1

看来你的印象是height: 100%意味着填补空间下，然而，它的意思是“高度设置为其父容器的100％”。

在你的例子中，你有两个100％高度的容器div。外面的那个身高为其父（身体）的100％。内部容器具有其父级的100％高度，这是之前的容器 - 实质上，您有一个内部div，可以告诉您“匹配整个页面的高度”。

如果你想要的东西坚持页面的底部（并忽略其他所有元素），你可以把它拿出来流动的，有力使用position: absolute; bottom: 0;

Answer 2

外面的容器应该是它定位只有一个具有100％的孩子的div应小于

<div style="height:100%"> 
<div style="height:90%;"/*or any value <100%, that is appropriate for your design */></div> 
<div> 

这意味着该外层div将是屏幕尺寸，并且内DIV将是90％的任何的父DIV是，

如果你会写这样的事情

<div style="height:50%"> 
<div style="height:100%"></div> 
<div> 

的div容器只能覆盖一半的网页，但内股利将覆盖外层div的所有高度，其母公司的大小，其100％。

通过这个我的意思是你应该降低第一个子div的高度尺寸来实现你的小提琴中的一个传呼机，