Creating a webpage with a full-page layout using a content session that spans the entire height of its container is my current project. To achieve this, I have implemented the following:
- The content's container (
div.inner) is set to be absolute-positioned withdisplay: flex; flex-flow: column; min-height: 100%; - The content-session (
div.content) has propertiesflex-grow: 1;
In order to create a full-paged effect and enable fading content-switching, it was necessary for me to position the content's container absolutely. However, I am encountering an issue as this implementation works only in Chrome and not in IE11. Does anyone know of any workaround or solution for this problem?
Thank you in advance.
html, body {
height: 100vh;
}
.outer {
position: relative;
height: 100%;
}
.inner {
display: flex;
flex-flow: column;
position: absolute;
top: 0;
right: 0;
left: 0;
min-height: 100%;
background-color: lightgreen;
}
.no-span-content-upper {
background-color: lightpink;
}
.span-content {
flex-grow: 1;
background-color: lightblue;
}
.no-span-content-lower {
background-color: lightyellow;
} <html>
<head></head>
<body>
<div class="outer">
<div class="inner">
<div class="no-span-content-upper">
some dummy content without specific height
</div>
<div class="span-content">
span content here
</div>
<div class="no-span-content-lower">
some dummy content without specific height
</div>
</div>
</div>
</body>
</html>