I have set up a jsfiddle to demonstrate the scenario I am facing: There is a basic header, content, footer layout.
Within the content-container is a messenger that should expand to a maximum of 100% height. Beyond 100% height, it should become scrollable.
UPDATE: When I say 100% content-height, I mean that the content-container stretches between the header and footer. The header and footer are always visible, while the content-container and the messenger inside it stretch in between. However, the messenger starts scrolling when its content (the messages) exceeds the available space.
One exception is the footer: It has a unique behavior where it remains sticky until it reaches the content inside the content-container. Once the content surpasses 100% height, the footer stays at the bottom.
Unfortunately, I cannot provide a direct link to my fiddle due to restrictions on stackoverflow regarding "jusfiddle links must be accomplished by code."
/*BASIC STRUCTURE*/
* {
padding: 0;
margin: 0;
}
html {
height: 100%
}
body {
min-height: 100%;
position: relative;
font-family: arial;
color: #FFF;
}
.wrapper {
height: 100%; /*not working without set position absolute*/
width: 100%;
}
.header {
background: #2980b9;
text-align: left;
min-height: 70px; /*Height must be flexible*/
width: 100%;
border-bottom: 1px solid #f0f0f0;
}
.content-container {
background: #336E7B;
max-width: 1010px;
text-align: left;
margin: 0 auto;
padding: 40px 10px 40px 10px;
}
.footer {
background: #2980b9;
padding: 10px 0 10px 0;
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
p {
padding: 10px;
}
/*END BASIC STRUCTURE*/
/*MESSENGER STRUCTURE*/
.messenger-container {
display: flex;
}
.my-contacts {
flex: 1 1 0;
min-width: 275px;
background: #FFF;
color: #000;
overflow-y: auto;
height:100%; /*not working yet */
}
.message-window {
background: #333;
overflow-y: auto;
flex-grow: 1;
height:100%; /*not working yet*/
}
.single-message {
background: #FFF;
color: #000;
margin: 10px;
height: 200px;
}
.input-field-dummy{
background: #F00;
}
https://jsfiddle.net/25vrsr2m/
/*END MESSENGER STRUCTURE*/<div class="wrapper"> <!--maybe remove the wrapper?-->
<div class="header">HEADER - flexible height</div>
<div class="content-container">
MESSAGE CONTAINER
<div class="messenger-container">
<div class="my-contacts">
<p>CONTACT 1</p>
<p>CONTACT 2</p>
<p>CONTACT 3</p>
<p>CONTACT 4</p>
<p>CONTACT 5</p>
<p>CONTACT 6</p>
</div>
<div class="message-window">
<div class="single-message">Single message</div>
<div class="single-message">Remove me and resize window from large to small multiple times to see footer behavior</div>
<div class="single-message">Remove me and resize window from large to small multiple times to see footer behavior</div>
<p class="input-field-dummy">
INPUT FIELD GOES HERE - always sticky at the bottom of message window.
</p>
</div>
</div>
</div>
<div class="footer">FOOTER - always at the bottom, sticky until it reaches content of content-container, then it stays below</div>
</div>
<!--
Here goes my js and css before body ends
-->