拉伸儿童DIV到父母的高度（不带硬编码高度） [英] Stretch Child DIV to Height of Parent (Without hardcoding height)

问题描述

我有一个父DIV和一个孩子DIV，我想伸展到父的底部。目前它没有尽管有 height：auto！important; 一个截图说明了这个问题可以看到此处。

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

  .main.top0 
 .infoPanel.koneksa_bg_blue 
 .innerPanel.mtop0.mbottom0 
 .infoCaption.font8em.koneksa_white 404 
 .infoCaption.koneksa_white我们找不到您要查找的页面
 .infoCaption.koneksa_white 
 |别担心。只是尝试返回或
 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; 
} 
  

我知道这是一个很常见的问题，答案总是包括硬编码的高度。我想避免这一点，因为虽然这是一个完美的解决方案，桌面样式这是旨在显示在移动设备上，因此我希望它比一个硬编码的高度一点响应。

$ b

感谢您提供的任何分析。

编辑：

请求生成的HTML：

 <！DOCTYPE html& 
< html lang =enxmlns =http://www.w3.org/1999/html>< / html> 
< head> 
< meta charset =UTF-8> 
< meta name =viewportcontent =width = device-width，initial-scale = 0.8，user-scalable = yes> 
 
 //导入已删除
 
< link href =/ assets / css / mvp.csstype =text / css =stylesheetmedia = screen and（max-width：768px）> 
< link href =/ assets / css / mvp_wide.csstype =text / css =stylesheetmedia =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 =/ loginclass =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>我们找不到您要查找的网页< / div> 
< div class =infoCaption koneksa_white>别担心。只需尝试返回或< a href =/class =koneksa_white下划线>首页< / 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.htmltarget =_ blankclass =konekea_blue_gray mtop2> Terms< / a>< a href = /privacy.htmltarget =_ blankclass =konekea_blue_gray mtop1>隐私权< / a>< a href =/target =_ blankclass =konekea_blue_gray mtop1> Corporate< / a> ; / div> 
< / div> 
< / div> 
< / div> 
< / body> 
  

解决方案

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

  html，body {
 height：100％
} 
 
 .main {
 position：absolute; 
 top：3em; 
 bottom：0; 
 width：100％; 
} 
  

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

您可以对所有子元素执行相同操作，因为position：absolute表示位置：相对，用于定位子元素。

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

  html，body {
 height：100％
} 
 
 .main {
 position：absolute; 
 top：0; 
 height：100％; 
 margin：3em 0 -3em 0; 
 overflow：hidden; 
} 
  

这是一个隐藏边缘技巧，也适用于所有现代浏览器。同样使用这些设置： http://jsfiddle.net/nqt7vqs1/3/

I have a parent DIV with a child DIV that I'd like to have stretch to the bottom of the parent. At present it does not despite having height:auto!important; A screenshot illustrating the issue can be seen here.

The relevant HTML (as a Jade template) is as follows:

    .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.

The corresponding CSS is as follows:

.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:

<!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>

解决方案

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. Here is an example 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.

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/

这篇关于拉伸儿童DIV到父母的高度（不带硬编码高度）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！