1

I have a panel of content which acts as a viewport for scrollable content. This viewport needs to always stretch to the full width and height of its parent. The layout of the rest of my site is such that I need to set the parent to display:table-cell. This works fine in Firefox and Chrome but IE does not respect the height:100% rule. Here is my code:

<body>
    <div class="wrapper">
            <div class="content">
                <main>
                    <div class="article-wrapper">
                        <article id="home">
                            <h1>This is the home page</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate quae ipsa dolor quidem ipsum, repudiandae maiores ad aliquam in necessitatibus incidunt. Quibusdam alias beatae temporibus culpa, esse ipsam, rem ducimus.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate quae ipsa dolor quidem ipsum, repudiandae maiores ad aliquam in necessitatibus incidunt. Quibusdam alias beatae temporibus culpa, esse ipsam, rem ducimus.</p>
                        </article>                                                  
                    </div>
                </main>
            </div>
    </div>
</body>

CSS:

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
main {
  background-color: rgba(0, 0, 0, 0.85);
}
.content {
  display: table;
}
.wrapper {
  position: relative;
  height: 100%;
}
.content {
  width: 1060px;
  position: absolute;
  padding: 140px 0 200px 0;
  height: 100%;
  top: 0;
  left: 50%;
  margin-left: -530px;
}
main {
  width: 742px;
  padding: 2em;
  position: relative;
  font-size: 1.5em;
  display: table-cell;
  vertical-align: middle;
}
main .article-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: red;
}
main .article-wrapper article {
  background-color: purple;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

JS Fiddle: https://jsfiddle.net/Inigo/r0cujj6x/

This displays correctly in Firefox and Chrome, but in all versions of IE i've tested (from IE9 - IE11 (latest)), the purple box does not fill the red container.

How can I get the purple article to stretch to the correct height? Thanks.

EDIT: I've also tried setting the article to position:absolute and top:0, right:0, bottom:0 left:0, but to no avail; the height is still not displaying correctly.

Inigo
  • 8,110
  • 18
  • 62
  • 110
  • Have you considering adding `display: table-cell;` to the CSS declaration of `main .article-wrapper article`? – Lance Leonard Mar 21 '15 at 15:45
  • 1
    Please read http://stackoverflow.com/a/27384730/1169519 – Teemu Mar 21 '15 at 16:28
  • Thanks, Teemu. That pretty much answers it then; it isn't possible. I must say I can kind of understand the nature of table-cell not playing nicely with percentage heights, but it seems ludicrous that you can effectively use `position:absolute` to pin to top/right/bottom/left, but the moment you try to use all four it all goes to pot. Oh well, I'll have to rethink then. Thanks for the pointer. – Inigo Mar 21 '15 at 18:18

1 Answers1

0

Add position: relative to your main .article-wrapper (only for IE) and remove padding from main element.

Here's a working fiddle: https://jsfiddle.net/gregmatys/r0cujj6x/1/

Community
  • 1
  • 1
gregmatys
  • 2,151
  • 18
  • 19