Css 子div未扩展到父div_Css_Html

Css 子div未扩展到父div

css html

Css 子div未扩展到父div,css,html,Css,Html,所以我有三个div 一个父母和两个孩子家长的情况如下： #parent { overflow:auto; margin: 0 auto; margin-top:37px; min-height: 100%; width:875px; } 这两个小div如下所示 #child1 { overflow:auto; min-height:150px; border-bottom:1px solid #bbb; background-color:#eee; o

所以我有三个div

一个父母和两个孩子

家长的情况如下：

#parent {
  overflow:auto;
  margin: 0 auto;
  margin-top:37px;
  min-height: 100%;
  width:875px;
}

这两个小div如下所示

#child1 {
  overflow:auto;
  min-height:150px;
  border-bottom:1px solid #bbb;
  background-color:#eee;
  opacity:0.4;
}

#child2 {
  height:100%;
  background-color:white;
}

父div扩展了100%，因为我可以看到它的边框一直延伸到页面的末尾，但是子div 2没有像父div那样向下延伸到页面的末尾。

高度的行为不像您预期的那样。当您指定

高度：100%

时，通过查找所述元素的第一个父元素的DOM来计算该百分比，该元素的指定高度具有

绝对

或

相对

定位

当涉及到body标签时，您可能会作弊，因此如果您有以下内容：

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

某些浏览器/版本会占据页面的总高度，从而达到您预期的效果。但如果你再深入一点，它就不起作用了

下面是我用来将div扩展到页面底部的方法，它涉及到绝对定位（这一方法的优点是它非常兼容跨浏览器，并且不需要javascript来完成）：


#母公司
{
位置：绝对位置；
宽度：1000px；
底部：0；
排名：0；
保证金：自动；
背景色：黑色；
}
#儿童规范
{
位置：绝对位置；
宽度：1000px；
排名：0；
高度：50px；
背景颜色：蓝色；
颜色：白色；
}
#童谣
{
位置：绝对位置；
宽度：1000px；
顶部：50px；
底部：0；
背景色：红色；
颜色：白色；
}

下面是一个用于演示的JSFIDLE：

诀窍：

当您指定绝对定位，然后放入

bottom:0使元素延伸到页面底部；您只需担心如何将元素定位为一种权衡。
是的，这是css中令人讨厌的事情之一<代码>最小高度

在计算高度时不被视为“高度”。看见您需要在父div上设置

height:100%

，以使子div达到完整高度。或者，如果你能让它完全定位，那么这就行了：。

猜猜看，这就是你想要做的：不，我的第二个子div没有完全延伸到父div的高度，我键入的每一行都会延伸div。除此之外，div不会延伸。

<div id="parent">
   <div id="childNorm"></div>
   <div id="childStrech"></div>
</div>



#parent
  {
      position: absolute;
      width: 1000px;
      bottom: 0;
      top: 0;
      margin: auto;
      background-color: black;
  }

  #childNorm
  {
     position: absolute;
     width: 1000px;
     top: 0;
     height: 50px;
     background-color: blue;
     color: white;
  }

  #childStrech
  {
     position: absolute;
     width: 1000px;
     top: 50px;
     bottom: 0;
     background-color: red;
     color: white;
  }