html – 当我使用高度时,为什么div在父div之外：100％

概述我在将div放在另一个div中时遇到问题,该div具有400px的定义高度. 当我将内部div设置为100％然后它与外部div重叠并越过外部div.为什么100％的高度不会将内部div调整为外部div高度？ body { min-width:300px;}.header { background-color:pink; width:100%; height:400px;} 我在将div放在另一个div中时遇到问题,该div具有400px的定义高度.

当我将内部div设置为100％然后它与外部div重叠并越过外部div.为什么100％的高度不会将内部div调整为外部div高度？

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 >  <div >  menu  </div>  <div >    <div >      <span>das ist mein blog</span>      <span>this is the underline</span>    </div>  </div></div><div >y</div><div >x</div>

https://jsfiddle.net/g9ec4nw8/

解决方法 因为.header-container上的填充导致溢出.

添加Box-sizing：border-Box;到你的.header-container,将修复Box-sizing问题.

但不仅如此,你还没有考虑到.menu的18px高度.

完整地,通过将​​.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.

总结

以上是内存溢出为你收集整理的html – 当我使用高度时,为什么div在父div之外：100％全部内容，希望文章能够帮你解决html – 当我使用高度时,为什么div在父div之外：100％所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。