Question

我有一个带有孩子DIV的父DIV，我想要伸展到父母的底部。目前它没有尽管height:auto!important;屏幕截图显示了问题here。

相关的HTML（作为Jade模板）如下：

    .main.top0
    .infoPanel.koneksa_bg_blue
        .innerPanel.mtop0.mbottom0
            .infoCaption.font8em.koneksa_white 404
            .infoCaption.koneksa_white We can't find the page you are looking for
            .infoCaption.koneksa_white
                | Don't worry. Just try to go back or  
                a.koneksa_white.underline(href='/') home
    .footer.stickyBottom.koneksa_bg_gray.koneksa_fg_light_gray

main DIV是父母，而infoPanel是孩子（上图中的蓝色），我正在努力伸展。

相应的CSS如下：

.main {
    width:100%;
    min-height:700px;
    height:auto!important;
    overflow: hidden;
    z-index: 1;
    top:3em;
    position: relative;
}
.infoPanel {
    width:100%;
    height:auto!important;
    display: block;
    padding:0;
}
.innerPanel {
    width:90%;
    padding:40px 0;
    height:auto!important;
    margin:0 5%;
    display: block;
}

我知道这是一个相当常见的问题，但似乎答案总是包含一个硬编码的高度。我想避免这种情况，因为虽然这对于桌面样式来说是一个非常好的解决方案，但它应该在移动设备上显示，因此我希望它比硬编码高度更具响应性。

感谢您提供的任何见解。

编辑：

按要求生成的HTML：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"></html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale = 0.8, user-scalable = yes">

   // Imports removed

   <link href="/assets/css/mvp.css" type="text/css" rel="stylesheet" media="screen and (max-width: 768px)">
   <link href="/assets/css/mvp_wide.css" type="text/css" rel="stylesheet" media="screen and (min-width: 769px)">
</head>
<body class="tk-futura-pt koneksa_gray">
   <div class="fullNav koneksa_bg_white boxShadow">
      <div class="centerPanel">
         <div class="mleft2 left khmoniker"></div>
         <div class="menu right"><a href="/login" class="right mright2 menuItem">customer login</a></div>
      </div>
   </div>
   <div class="main top0">
      <div class="infoPanel koneksa_bg_blue">
         <div class="innerPanel mtop0 mbottom0">
            <div class="infoCaption font8em koneksa_white">404</div>
            <div class="infoCaption koneksa_white">We can't find the page you are looking for</div>
            <div class="infoCaption koneksa_white">Don't worry. Just try to go back or  <a href="/" class="koneksa_white underline">home</a></div>
         </div>
      </div>
      <div class="footer stickyBottom koneksa_bg_gray koneksa_fg_light_gray">
         <div class="innerPanel">
            <div class="caption left">
               <h5 class="konekea_blue_gray mtop2">&copy; template-filler</h5>
               <div class="kh_reverse_logo mtop2"></div>
            </div>
            <div class="caption right"><a href="/terms.html" target="_blank" class="konekea_blue_gray mtop2">Terms</a><a href="/privacy.html" target="_blank" class="konekea_blue_gray mtop1">Privacy</a><a href="/" target="_blank" class="konekea_blue_gray mtop1">Corporate</a></div>
         </div>
      </div>
   </div>
</body>

Answer 1

适用于所有现代浏览器的一种解决方案是执行以下操作：

html, body {
    height: 100%
}

.main {
    position: absolute;
    top: 3em;
    bottom: 0;
    width: 100%;
}

这似乎是一个不寻常的解决方案，但现代浏览器实际上会同时尊重所有4个边，并拉伸元素以匹配。以下是jsFiddle的示例：http://jsfiddle.net/nqt7vqs1/2/

您也可以对所有子元素执行相同的操作，因为position：absolute意味着position：relative用于定位子元素。

如果此解决方案不起作用，则另一个选项是执行以下操作：

html, body {
    height: 100%
}

.main {
    position: absolute;
    top: 0;
    height: 100%;
    margin: 3em 0 -3em 0;
    overflow: hidden;
}

这是一个“隐藏边距”技巧，也适用于所有现代浏览器。与这些设置相同的小提琴：http://jsfiddle.net/nqt7vqs1/3/

伸展儿童DIV到父母的身高（没有硬编码高度）

1 个答案: