Css div的极限高度

-如您所见，所有div高度都以像素为单位（

diva

和

divb）

。最后一个（c区）有

高度：100%

，所以它和全身一样高。我希望它只是填充它的父对象，而不是像所有文档那样高。（黄色

div

溢出）。

将div c放入块a内，并取出b-

<div id="b"></div>
<div id="a">
     <div id="c"></div>
</div>

---

试试这个，你的diva是父类，它的最高值是300px，所以b和c的总和应该是300px

 #a{background:red; height:300px;}
 #b{background:blue; height:50px;}
 #c{background:yellow; height:250px; width:100px;}

它和车身一样高，包括b部分。用负边距和填充物固定它

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
#a{background:red; height:300px;}
#b{background:blue; height:50px; position:relative; z-index:15;}
#c{background:yellow; height:100%; margin-top:-50px; padding-top: 50px;width:100px; position:relative; z-index:5;}​

---

既然您是按像素编码的，那么您为什么不想设置#c{height:250px；}呢？也就是说，使C区的高度等于A区的高度和B区的高度之差？这将确保黄色div始终以与红色div相同的高度结束

#a{background:red; height:300px;}
#b{background:blue; height:50px;}
#c{background:yellow; height:250px; width:100px;}​

这就是诀窍

---

但我不知道这个50px什么时候会改变，或者有人会使用更大的字体集，然后顶部标题div会变得更高。为什么它不是本地的？宽度：100%。它只需要填满所有的高度。再简单不过了。

高度：100%

继承了父母的高度-

#c

高达

#a

，然后因为

#b

而向下推50px，这将是一些列阅读器，水平网页。这将根据用户屏幕进行调整。它的特性很复杂，但我无法隐藏溢出。

浮动的

元素使父级折叠-在您的情况下，您可以看到它，就好像

#b

不影响容器的高度-几乎就像不占用空间一样；因此，

#c

完全从父对象的顶部延伸到底部<代码>宽度：100%在

#b

上使其填充父级宽度，它自己的内容向下推

#c

的内容（但不是

#c

本身！），这只是一个示例。。。它将是一个反应灵敏、流畅的网站。但谢谢你的努力，这只是个例子。它将是流动的，反应灵敏的设计。

div#b {
    float: left;
    width: 100%;
}