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

Question

I have a parent DIV with a child DIV that I'd like to have stretch to the bottom of the parent. 我有一个带有孩子DIV的父DIV，我想将其延伸到父母的底部。 At present it does not despite having height:auto!important; 目前它没有尽管有height:auto!important; A screenshot illustrating the issue can be seen here . 可以在此处看到说明该问题的屏幕截图。

The relevant HTML (as a Jade template) is as follows: 相关的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

The main DIV is the parent and the infoPanel is the child (colored in blue in the image above) that I am struggling to stretch. main DIV是父级，而infoPanel是我正在努力伸展的孩子（上图中用蓝色显示）。

The corresponding CSS is as follows: 相应的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;
}

I'm aware that this is a fairly common question but it seems like the answer is always to include a hard-coded height. 我知道这是一个相当普遍的问题，但似乎答案总是包含一个硬编码的高度。 I would like to avoid this because while that was a perfectly fine solution for the desktop styling this is intended to be displayed on mobile devices and as such I'd like it to be a bit more responsive than a hard-coded height. 我想避免这种情况，因为虽然这对于桌面样式来说是一个非常好的解决方案，但它可以在移动设备上显示，因此我希望它比硬编码高度更具响应性。

Thanks for any insights that you can provide. 感谢您提供的任何见解。

EDIT: 编辑：

The generated HTML as requested: 生成的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

One solution that works in all modern browsers is to do the following: 适用于所有现代浏览器的一种解决方案是执行以下操作：

html, body {
    height: 100%
}

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

This seems an unusual solution but modern browsers will actually respect all 4 sides being defined at the same time and stretch the element to match. 这似乎是一个不寻常的解决方案，但现代浏览器实际上会同时尊重所有4个边，并拉伸元素以匹配。 Here is an example jsFiddle: http://jsfiddle.net/nqt7vqs1/2/ 这是jsFiddle的一个例子： http ： //jsfiddle.net/nqt7vqs1/2/

You can do the same with all child elements as well because position: absolute implies position: relative for the purposes of positioning child elements. 您也可以对所有子元素执行相同操作，因为position：absolute意味着position：relative用于定位子元素。

If this solution doesn't work, another option is to do the following: 如果此解决方案不起作用，则另一个选项是执行以下操作：

html, body {
    height: 100%
}

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

This is a "hidden margin" trick that also works in all modern browsers. 这是一个“隐藏边距”技巧，也适用于所有现代浏览器。 Same Fiddle with these settings: http://jsfiddle.net/nqt7vqs1/3/ 与这些设置相同的小提琴： http ： //jsfiddle.net/nqt7vqs1/3/

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

问题描述

1 个解决方案

解决方案1
-1 2015-02-04 21:43:38

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

问题描述

1 个解决方案

解决方案1 -1 2015-02-04 21:43:38

解决方案1
-1 2015-02-04 21:43:38