爲什麼父DIV的DIV外面當我使用高度：100％

我把一個div具有定義高度可以說400像素的另一格內的問題。爲什麼父DIV的DIV外面當我使用高度：100％

在i內的div設爲然後100％它的重疊外層div和越過外一個。爲什麼100％的身高調整內部div到外部divs的高度？

body { 
 
    min-width:300px; 
 
} 
 

 
.header { 
 
    background-color:pink; 
 
    width:100%; 
 
    height:400px; 
 
} 
 

 
.menu { 
 
    background-color: red; 
 
} 
 

 
.header-container { 
 
    color:white; 
 
    background-color:gray; 
 
    height:100%; 
 
    max-width:400px; 
 
    margin:auto; 
 
} 
 

 
.headline { 
 
    padding-right:36px; 
 
    padding-left:36px; 
 
    padding-top:54px; 
 
    padding-bottom:54px; 
 
} 
 

 
.clearfix { 
 
    clear:both; 
 
}

<div class="header"> 
 
    <div class="menu"> 
 
    menu 
 
    </div> 
 
    <div class="header-container clearfix"> 
 
    <div class="headline"> 
 
     <span>das ist mein blog</span> 
 
     <span>this is the underline</span> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="blog"> 
 
y 
 
</div> 
 
<div class="footer"> 
 
x 
 
</div>

https://jsfiddle.net/g9ec4nw8/

來源

2017-09-13 STORM

因爲外層div – pokeybit

填充我想像，因爲100％意味着正是... ** **所有的高度。如果你想**剩下的**高度......這是不同的，這裏有很多問題。 –

但我想這些填充沒有菜單上的內部div貼。 – STORM

由於在.header-container的填充引起的溢出。

添加box-sizing: border-box;您.header-container，將解決這個盒子大小的問題。

不僅如此，你還沒有你.menu考慮到高度的18像素。

在充分，通過改變你.header-container下面的代碼：

.header-container { 
     color:white; 
     background-color:gray; 
     height:calc(100% - 18px); 
     max-width:400px; 
     box-sizing: border-box; 
     margin:auto; 
     top:0; 
     bottom:0; 
     padding-right:36px; 
     padding-left:36px; 
     padding-top:54px; 
     padding-bottom:54px; 
}

將解決這個問題。

小提琴Here。

來源

2017-09-13 10:35:11

這將意味着如果我有多個容器與讓比如內部div的高度爲100px + 10px + 50px，那麼我必須從內部div的高度減去160px。好奇，但似乎現在工作。這是一個很好的做法嗎？ – STORM

對於固定高度的佈局，這只是真正的解決方案，因爲通過指定固定的高度，您告訴瀏覽器永遠不會更改大小。您需要爲該場景開發。 'calc（）'是一個CSS3函數，實際上非常有用！ –

無論菜單的高度如何，Flexbox都可以做到這一點。這就是所鏈接的問答解釋。 –

爲什麼父DIV的DIV外面當我使用高度：100％

回答

相關問題