Stretch Child DIV to Height of Parent (Without hardcoding height)

Question

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>

Using `height: 100%` will not work, because the height of the parent element is not pre-defined, it only has a `min-height` attribute — Thijs Riezebeek, Feb 03 '15 at 19:36
Thanks for the help @JPrakash. I changed .infoPanel's height to 100% but unfortunately no visual change takes place. I double checked in the attribute inspector and the height remained unchanged, nor is there another class acting on the DIV's height. As Thijs commented the parent element's height would need to be hard-coded, which is what I would like to avoid. — Myles Barros, Feb 03 '15 at 19:39
hi, it would be helpful if you posted the output HTML instead of the Jade code or make a JS.Fiddle reproducing the issue you are having. — crazymatt, Feb 03 '15 at 19:40
Ever thought about detecting the height via javascript with `onload` or `onresize` events detection or similar? I can't see anything wrong with the CSS code you've posted, so something else must be inherited/conflicting. — JClaspill, Feb 03 '15 at 19:41
@Myles Barros You can follow this link ay be it help you http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks — J Prakash, Feb 03 '15 at 19:51
I've tried rooting around in the attributes inspector but I can't find any indications that there are conflicting rules for the height. Is there a good way to examine the styling inheritance hierarchy for an HTML element? You can tell I've been doing web for a matter of months. — Myles Barros, Feb 03 '15 at 19:58
But you have two infopanel divs. Did you want them both stretched? It's not clear what you're trying to accomplish. You should reduce your HTML to only the relevant / required portions. — Bangkokian, Feb 03 '15 at 20:04
@Bangkokian I've removed the second infoPanel as its only used in the desktop styling (it hard-codes the height so it appears). I've preserved the footer, though, as someone might use it in their comments/solution. — Myles Barros, Feb 03 '15 at 20:15
@Nit you're right, the question is probably amongst the most common on Stack Overflow but I couldn't find one that worked for my situation (no hard-coded height). I'd be thrilled with a link to an answered question that does, though! =) — Myles Barros, Feb 03 '15 at 20:30
@Nit: so vote to close as such. Myles: have you considered hard-coding the height using [relative units](https://developer.mozilla.org/en/docs/Web/CSS/length)? Such as `%`, `em`, `rem`, `ex`, `ch`, `vh`, `vw`, `vmin` or `vmax`? — David Thomas, Feb 03 '15 at 20:30
When you're asking a question you should search for duplicates, not rely on others to do so. — Etheryte, Feb 03 '15 at 20:42
@DavidThomas That's a really good idea, I hadn't thought to do that. It doesn't produce a perfect solution – the page has to have a minimum height of 16em or the problem persists but it nonetheless works quite well. — Myles Barros, Feb 03 '15 at 20:52
@Nit Not to repeat myself but I did. I could not find any that replicated this question even though there are hordes that bear superficial similarities. You clearly feel it's a duplicate, however, so I was asking you to post a link to one – that way we could have this question removed for being redundant or have a permanent link for folks such as myself that couldn't find it. — Myles Barros, Feb 03 '15 at 20:55
@Nit: as the person that stated that this "*is a duplicate of so many questions*" the onus is on *you* to find a duplicate, and vote to close as such, otherwise your comment adds nothing but noise. Myles: that's workable, surely, just `min-height: 16em;` as well as a `height` setting? — David Thomas, Feb 03 '15 at 20:55
@DavidThomas Feel free to disagree if you want, my comment is not noise. It lets the asker know that the answer is out there on this site if they search for it. — Etheryte, Feb 03 '15 at 21:05
@DavidThomas yep, that's exactly what I ended up doing. =) If you'd like to add your suggestion as an answer I'd be happy to mark it as correct. — Myles Barros, Feb 03 '15 at 21:25
@Nit: I've raised the issue over on [meta], if you want to take a look and perhaps correct any perceived slights? http://meta.stackoverflow.com/questions/285279/on-whom-is-the-onus-of-finding-a-duplicate-of-a-question — David Thomas, Feb 03 '15 at 21:37

score -1 · Answer 1 · answered Feb 04 '15 at 21:43

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/

Stretch Child DIV to Height of Parent (Without hardcoding height)

1 Answers1

Linked