Related
The problem: The main-container shows a scrollbar when the content-container overflows. Also the width and height of the content-container can't be hardcoded because it should expand with the remaining space of the main-container.
Expectation: Only the content-container shows the scrollbar when the contents overflows and the width and height of main-container doesn't change.
The below code snippet is what I have tried
.main-container {
background: #364f6b;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
color: white;
}
.container__top {
min-height: 27px;
background: #43dde6;
}
.container__bottom {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.sidebar {
min-width: 80px;
width: 80px;
height: 100%;
background: #fc5185;
}
.right-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.tabbar {
height: 27px;
min-height: 27px;
background: #f0f0f0;
}
.content-container {
height: 100%;
overflow: auto;
}
<div class="main-container">
<diV class="container__top">
</div>
<div class="container__bottom">
<div class="sidebar">
</div>
<div class="right-container">
<div class="tabbar"></div>
<div class="content-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et neque eros. Cras nec nunc nec lectus facilisis varius sed ut arcu. Nulla semper consequat ex sed iaculis. Praesent elementum ante vel tincidunt vulputate. Mauris eleifend nisi ante, egestas
vulputate enim tincidunt sit amet. Cras nec augue sed felis eleifend blandit non eget ex. Maecenas at lacinia libero. Aliquam semper turpis eget mi blandit faucibus. Sed felis tellus, porttitor vitae tincidunt vel, volutpat et lectus. Morbi
blandit arcu id pulvinar convallis. Nulla vehicula ultrices metus, sit amet eleifend nibh rhoncus eu. Aenean gravida lobortis dignissim. Proin tempor mi vel libero vestibulum lacinia. Praesent a tempus quam. Nunc feugiat suscipit nibh eu cursus.
Cras quis nisl suscipit, pharetra dolor suscipit, aliquam arcu. Aenean venenatis, elit in congue mattis, elit urna convallis augue, eu sollicitudin ante tortor eget enim. Nam vitae urna non lacus finibus sagittis vestibulum vitae massa. Vestibulum
nec erat ac nisi ornare aliquet eu eu lectus. Nunc dictum turpis nec sagittis semper. Cras facilisis elit id blandit luctus. Donec at cursus velit. Donec scelerisque tristique orci vitae hendrerit. Nulla facilisi. Nunc sit amet finibus nibh.
Morbi dapibus viverra ante sit amet egestas. Maecenas bibendum tellus in nibh convallis consequat. Sed ac venenatis odio, sit amet sodales arcu. Cras metus ipsum, blandit nec luctus eget, egestas et justo. Aenean accumsan massa sed auctor elementum.
Duis eget elementum dolor. Nunc leo felis, interdum sed condimentum non, ultricies tempus risus. Maecenas at ornare leo. Praesent tristique nec nisl id accumsan. Praesent aliquet diam nec arcu molestie ornare. Nam ut gravida augue, non posuere
lorem. Nulla lacinia ex at felis condimentum convallis. Morbi a eleifend ipsum. Nulla sed magna scelerisque erat lacinia viverra vel ut elit. In molestie, urna vel sodales tristique, risus dui placerat elit, nec dictum lorem orci at nulla. Vestibulum
bibendum cursus tincidunt. Nullam hendrerit tristique diam ut rutrum. Cras vel dui porttitor, faucibus arcu a, volutpat nisi. Pellentesque pretium, orci id luctus egestas, orci quam scelerisque mi, sit amet euismod felis sem et nisi. Sed sodales,
ex vitae rhoncus mattis, massa neque faucibus mi, at egestas dui turpis et metus.
</p>
</div>
</div>
</div>
</div>
This is what I want to achieve
You are almost there - instead of using width and height, just use flex-grow and then for your scroll bar, you can absolutely position a div inside the content container to make it have a height of 100%
body,
html {
height: 100%;
margin: 0;
}
.main-container {
background: #364f6b;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
color: white;
}
.container__top {
min-height: 27px;
background: #43dde6;
}
.container__bottom {
flex-grow: 1;
display: flex;
flex-direction: row;
}
.sidebar {
min-width: 80px;
width: 80px;
background: #fc5185;
}
.right-container {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.tabbar {
height: 27px;
min-height: 27px;
background: #f0f0f0;
}
.content-container {
flex-grow: 1;
position: relative;
}
.overflow-container {
position: absolute;
top: 0;
left: 0;
height: 100%;
overflow: auto;
}
<div class="main-container">
<diV class="container__top">
</div>
<div class="container__bottom">
<div class="sidebar">
</div>
<div class="right-container">
<div class="tabbar"></div>
<div class="content-container">
<div class="overflow-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et neque eros. Cras nec nunc nec lectus facilisis varius sed ut arcu. Nulla semper consequat ex sed iaculis. Praesent elementum ante vel tincidunt vulputate. Mauris eleifend nisi ante, egestas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et neque eros. Cras nec nunc nec lectus facilisis varius sed ut arcu. Nulla semper consequat ex sed iaculis. Praesent elementum ante vel tincidunt vulputate. Mauris eleifend nisi
ante, egestas Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et neque eros. Cras nec nunc nec lectus facilisis varius sed ut arcu. Nulla semper consequat ex sed iaculis. Praesent elementum ante vel tincidunt vulputate. Mauris
eleifend nisi ante, egestas vulputate enim tincidunt sit amet. Cras nec augue sed felis eleifend blandit non eget ex. Maecenas at lacinia libero. Aliquam semper turpis eget mi blandit faucibus. Sed felis tellus, porttitor vitae tincidunt vel,
volutpat et lectus. Morbi blandit arcu id pulvinar convallis. Nulla vehicula ultrices metus, sit amet eleifend nibh rhoncus eu. Aenean gravida lobortis dignissim. Proin tempor mi vel libero vestibulum lacinia. Praesent a tempus quam. Nunc
feugiat suscipit nibh eu cursus. Cras quis nisl suscipit, pharetra dolor suscipit, aliquam arcu. Aenean venenatis, elit in congue mattis, elit urna convallis augue, eu sollicitudin ante tortor eget enim. Nam vitae urna non lacus finibus sagittis
vestibulum vitae massa. Vestibulum nec erat ac nisi ornare aliquet eu eu lectus. Nunc dictum turpis nec sagittis semper. Cras facilisis elit id blandit luctus. Donec at cursus velit. Donec scelerisque tristique orci vitae hendrerit. Nulla
facilisi. Nunc sit amet finibus nibh. Morbi dapibus viverra ante sit amet egestas. Maecenas bibendum tellus in nibh convallis consequat. Sed ac venenatis odio, sit amet sodales arcu. Cras metus ipsum, blandit nec luctus eget, egestas et justo.
Aenean accumsan massa sed auctor elementum. Duis eget elementum dolor. Nunc leo felis, interdum sed condimentum non, ultricies tempus risus. Maecenas at ornare leo. Praesent tristique nec nisl id accumsan. Praesent aliquet diam nec arcu molestie
ornare. Nam ut gravida augue, non posuere lorem. Nulla lacinia ex at felis condimentum convallis. Morbi a eleifend ipsum. Nulla sed magna scelerisque erat lacinia viverra vel ut elit. In molestie, urna vel sodales tristique, risus dui placerat
elit, nec dictum lorem orci at nulla. Vestibulum bibendum cursus tincidunt. Nullam hendrerit tristique diam ut rutrum. Cras vel dui porttitor, faucibus arcu a, volutpat nisi. Pellentesque pretium, orci id luctus egestas, orci quam scelerisque
mi, sit amet euismod felis sem et nisi. Sed sodales, ex vitae rhoncus mattis, massa neque faucibus mi, at egestas dui turpis et metus.
</p>
</div>
</div>
</div>
</div>
</div>
Alternative way to make the layout
The solution given by #pete works perfectly for what I asked using flexbox.
Another way to make the layout is by using grids. With grid I was able to get rid of extra container divs.
Below code snippet uses grid for the layout. The first column of the grid is set to auto so that I can animate the sidebar. If we hover on the sidebar the grid automatically adjusts with the width of the sidebar.
body {
margin: 0;
height: 100vh;
width: 100vw
}
#root {
height: 100%;
width: 100%;
display: grid;
grid-template-rows: 29px auto 1fr;
grid-template-columns: auto 1fr 300px;
grid-template-areas:
"topbar topbar topbar"
"sidebar tabbar tabbar"
"sidebar content content";
}
#topbar {
grid-area: topbar;
background: #ba53de;
}
#sidebar {
width: 80px;
grid-area: sidebar;
background: #f469a9;
transition: 100ms ease;
}
#sidebar:hover {
width: 150px;
}
#tabbar {
height: 25px;
grid-area: tabbar;
background: #f4fa9c;
}
#content {
grid-area: content;
background: #88bef5;
height: 100%;
width: 100%;
overflow: auto;
}
.story{ padding: 10px; }
<div id="root">
<div id="topbar"></div>
<div id="sidebar"></div>
<div id="tabbar"></div>
<div id="content">
<div class="story">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin tincidunt ex ut rutrum. Ut quis sagittis odio. Integer magna orci, facilisis a porttitor sed, gravida vel tortor. Nulla scelerisque faucibus vehicula. Donec in libero dignissim,
placerat velit a, pretium ante. Donec sed eros orci. Praesent quis neque at mauris facilisis eleifend eget elementum sem. Nam pulvinar mauris odio, sit amet scelerisque mauris porta non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia curae; Maecenas eget tristique lectus. Quisque sed quam felis. Vestibulum sit amet semper dui. Mauris sit amet consectetur nibh. Sed cursus viverra elit quis accumsan. Proin pharetra lorem nec nisl tempus pretium. Cras vel suscipit
odio, in mattis sem. Vivamus finibus odio eu nisl egestas tristique. Mauris posuere gravida pulvinar. Suspendisse a lacus purus. Morbi imperdiet arcu et aliquet cursus. Ut condimentum magna at eleifend vehicula. Nullam interdum fermentum lectus.
Ut vitae molestie dolor. Etiam mollis ut purus vitae tempor. Mauris aliquet ex sit amet vestibulum ultrices. Quisque id leo nec mauris feugiat volutpat non ac diam. Praesent ac eros sed lorem tempor commodo. Donec quam urna, congue nec metus vitae,
vulputate semper ligula. Nunc eleifend pharetra dolor, eget congue nisl mattis non. Integer ultrices ex in dapibus pharetra. Nullam viverra non eros in congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin eu ante malesuada,
pharetra est eget, placerat neque. Quisque et leo cursus, fringilla velit in, posuere nulla. Donec tincidunt augue et arcu lobortis volutpat. Phasellus eu vulputate est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc diam eros,
consectetur id urna id, ullamcorper semper ipsum. Quisque diam mi, condimentum at gravida at, fermentum a velit. Aenean a turpis nec eros imperdiet luctus eget eget erat. Aenean non viverra nisi. Aliquam ligula erat, eleifend vel lacus varius, tincidunt
tristique turpis. Aenean suscipit risus sed diam euismod, sit amet gravida tortor condimentum. Morbi auctor luctus quam, quis vestibulum leo auctor a. Sed convallis, tellus eget lacinia fringilla, massa justo consequat ante, sed aliquam enim felis
ac est. Fusce rutrum ipsum quis imperdiet gravida. Vestibulum facilisis vel est in ultrices. Maecenas rhoncus nisl vitae consectetur pulvinar. Praesent imperdiet, lorem sed dapibus bibendum, velit tortor molestie elit, et ornare mi nisl ut lacus.
Morbi quis vestibulum elit. Donec sed aliquam purus, vitae porta enim. Vivamus finibus dui sed faucibus eleifend. Praesent ac ligula arcu. Aliquam et cursus quam. Aliquam tempor neque leo, ac tincidunt ipsum gravida sit amet. Phasellus ac turpis
sit amet ex gravida auctor. Donec non imperdiet nisl. Donec facilisis mi at diam euismod, eu finibus lacus tincidunt. In cursus scelerisque urna molestie ullamcorper. Sed varius ornare lectus, nec ultricies leo facilisis non. Nulla facilisi. In
hac habitasse platea dictumst. Proin et leo dignissim, tristique libero vitae, lacinia metus. In pulvinar metus vitae arcu consectetur, facilisis pellentesque sem consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Vivamus quis volutpat justo. Praesent ipsum orci, blandit id dignissim in, mattis eget felis. Aenean rutrum est urna, ut laoreet nisi scelerisque quis. Nam augue risus, fermentum venenatis lectus a, malesuada condimentum odio.
</div>
</div>
</div>
I am trying to get my layout aligned properly, but I am having trouble dialing in the "last mile".
In my example below, everything works just fine if the message_data <span> elements contain a single line of data. However, if one of those lines expands to multiple lines, it throws off the alignment of the rows within columns.
How can I get the message_labels and message_data to all align at the top of each row? Like in a data table.
FLEXBOX NO DATA:
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
color: #313131;
}
#content {
margin: 2em;
}
#messages {
position: absolute;
width: 50%;
margin: 0 auto;
}
.message_container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-evenly;
background-color: #ffc0cb;
font-size: smaller;
padding: 0.5em;
}
.message_controls {
display: flex;
justify-content: flex-start;
background-color: #dcdcdc;
padding: 0.5em;
}
.message {
display: flex;
flex-direction: column;
background-color: #87ceeb;
padding: 0.5em;
}
.message_headers {
display: flex;
flex-direction: row;
}
.message_labels {
display: flex;
flex-direction: column;
padding: 0.5em;
font-weight: 800;
}
.message_labels span {
margin: 0.5em;
}
.message_data {
display: flex;
flex-direction: column;
padding: 0.5em;
}
.message_data span {
margin: 0.5em;
}
.message_body {
font-family: monospace;
}
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div id="content">
<div id="messages">
<div class="message_container">
<div class="message_controls">
<input type="checkbox" checked>
</div> <!-- end message_controls div -->
<div class="message">
<div class="message_headers">
<div class="message_labels">
<span>Label 01</span>
<span>Label 02</span>
<span>Label 03</span>
<span>Label 04</span>
<span>Label 05</span>
</div>
<div class="message_data">
<span>Data 01 ...</span>
<span>Data 02 ...</span>
<span>Data 03 ...</span>
<span>Data 04 ...</span>
<span>Data 05 ...</span>
</div>
</div> <!-- end message_headers div -->
<div class="message_body">
<span>
Text here ...
[More]
</span>
</div> <!-- end message_body div -->
</div> <!-- end message div -->
</div> <!-- end message_container div -->
</div>
</div>
</body>
</html>
FLEXBOX WITH DATA:
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
color: #313131;
}
#content {
margin: 2em;
}
#messages {
position: absolute;
width: 50%;
margin: 0 auto;
}
.message_container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-evenly;
background-color: #ffc0cb;
font-size: smaller;
padding: 0.5em;
}
.message_controls {
display: flex;
justify-content: flex-start;
background-color: #dcdcdc;
padding: 0.5em;
}
.message {
display: flex;
flex-direction: column;
background-color: #87ceeb;
padding: 0.5em;
}
.message_headers {
display: flex;
flex-direction: row;
}
.message_labels {
display: flex;
flex-direction: column;
padding: 0.5em;
font-weight: 800;
}
.message_labels span {
margin: 0.5em;
}
.message_data {
display: flex;
flex-direction: column;
padding: 0.5em;
}
.message_data span {
margin: 0.5em;
}
.message_body {
font-family: monospace;
}
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div id="content">
<div id="messages">
<div class="message_container">
<div class="message_controls">
<input type="checkbox" checked>
</div> <!-- end message_controls div -->
<div class="message">
<div class="message_headers">
<div class="message_labels">
<span>Label 01</span>
<span>Label 02</span>
<span>Label 03</span>
<span>Label 04</span>
<span>Label 05</span>
</div>
<div class="message_data">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit ex ac luctus blandit. Nulla dignissim turpis ac eros ultrices porttitor. Etiam efficitur neque urna, sit amet sodales lorem ultrices non. Quisque risus lorem, posuere et malesuada ac, malesuada id felis. Aliquam viverra libero eu dapibus blandit. Vivamus molestie vel nisl iaculis sodales. Fusce porttitor ultrices nisi at imperdiet. Curabitur sem neque, lobortis venenatis sagittis eu, interdum at quam. Duis vestibulum nulla sit amet neque aliquet, eget accumsan enim feugiat. In hac habitasse platea dictumst. Nullam efficitur nec magna et molestie. Suspendisse elementum vel libero tristique varius. Donec dignissim tempor sagittis. Praesent nec rhoncus elit. Fusce ut leo urna.<br><br>Nullam luctus fringilla fringilla. Aliquam vehicula luctus nisi, rhoncus ultrices diam. Proin tempus pulvinar felis, eget ultrices nunc elementum in. Sed gravida felis vitae iaculis euismod. Sed dignissim luctus vulputate. Etiam ullamcorper lobortis lectus eu volutpat. Aliquam erat volutpat. Sed pellentesque augue eu sodales gravida. Duis dapibus elit arcu, quis placerat ligula posuere vel.<br><br>Morbi tempor sagittis nibh non suscipit. Vivamus eu massa egestas, eleifend nisl eget, efficitur mauris. Aliquam commodo congue sodales. Nulla ornare nulla eu porttitor rutrum. Nullam lacinia sem ut lacinia fringilla. Fusce arcu diam, dictum lacinia eleifend quis, volutpat sed sapien. Sed imperdiet convallis libero, sed dapibus mauris lobortis nec. Mauris rhoncus tellus id tellus tempus, sed blandit tellus ullamcorper. Cras ultrices, ligula nec sagittis vestibulum, magna velit vehicula orci, ut dictum justo quam eget ipsum. Morbi accumsan libero eu dolor rhoncus condimentum. Vestibulum nec cursus nunc, eu mattis tellus. Duis tempor nisi dolor, id pretium ex tincidunt vel. Vivamus placerat augue interdum felis efficitur, vitae tempor lacus luctus. Maecenas placerat eros a velit condimentum, sed feugiat tellus tincidunt. Suspendisse a volutpat mauris. Nulla in feugiat diam, a ultricies ante.<br><br>Mauris tempus ut sem sed ultrices. Praesent in lobortis sem, eu pharetra ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec feugiat urna nec vestibulum consequat. Quisque vel ipsum a felis accumsan scelerisque nec nec magna. Maecenas sed neque imperdiet, convallis ligula non, rutrum libero. Nullam ultricies ex sed vulputate pretium. In id nisl orci. Sed imperdiet enim vestibulum, consequat lorem vel, accumsan justo.<br><br>In hac habitasse platea dictumst. Vivamus hendrerit sed ipsum vitae ultricies. Aliquam sit amet erat a sem vulputate malesuada at at est. Nam hendrerit ultricies arcu, sed ultrices nulla egestas in. Cras eu mi iaculis, ornare sapien ut, placerat mi. Cras sed tellus pretium, tempus ex eget, congue purus. Nulla dignissim, sem quis fringilla varius, leo magna fringilla elit, vel placerat felis metus nec augue. Nullam eu ultrices tortor, sed vestibulum eros. Aliquam tincidunt placerat arcu. Proin vel scelerisque nisi. Vestibulum dictum auctor tristique. Etiam interdum a ligula sit amet maximus. Proin blandit pharetra diam, sit amet blandit ex euismod at. Quisque vel ex risus.</span>
<span>Data 02 ...</span>
<span>Data 03 ...</span>
<span>Data 04 ...</span>
<span>Data 06 ...</span>
</div>
</div> <!-- end message_headers div -->
<div class="message_body">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean faucibus ante id augue malesuada feugiat. Vivamus vel ullamcorper velit. Pellentesque non lacinia risus. Ut efficitur orci id varius elementum. Morbi bibendum nisl purus, a molestie purus molestie vitae. Phasellus dignissim, est et cursus gravida, mauris urna hendrerit mauris, a maximus tortor lacus sit amet quam. Curabitur ac dolor vel sapien lacinia volutpat nec non massa. Ut tempor urna sed lacus fermentum, in ultrices dui luctus. Vivamus condimentum posuere velit iaculis gravida. Suspendisse ullamcorper tortor risus, sit amet lobortis arcu auctor vel. Aliquam blandit est quam, id cursus sapien varius eleifend.
[More]
</span>
</div> <!-- end message_body div -->
</div> <!-- end message div -->
</div> <!-- end message_container div -->
</div>
</div>
</body>
</html>
TABLE WITH DATA:
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
color: #313131;
}
#content {
margin: 2em;
}
#messages {
position: absolute;
width: 50%;
margin: 0 auto;
}
.label {
font-weight: 900;
vertical-align: top;
}
.data {
vertical-align: top;
}
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div id="content">
<div id="messages">
<div class="message_container">
<table>
<tr>
<td class="label">Label 01</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit ex ac luctus blandit. Nulla dignissim turpis ac eros ultrices porttitor. Etiam efficitur neque urna, sit amet sodales lorem ultrices non. Quisque risus lorem, posuere et malesuada ac, malesuada id felis. Aliquam viverra libero eu dapibus blandit. Vivamus molestie vel nisl iaculis sodales. Fusce porttitor ultrices nisi at imperdiet. Curabitur sem neque, lobortis venenatis sagittis eu, interdum at quam. Duis vestibulum nulla sit amet neque aliquet, eget accumsan enim feugiat. In hac habitasse platea dictumst. Nullam efficitur nec magna et molestie. Suspendisse elementum vel libero tristique varius. Donec dignissim tempor sagittis. Praesent nec rhoncus elit. Fusce ut leo urna.<br><br>Nullam luctus fringilla fringilla. Aliquam vehicula luctus nisi, rhoncus ultrices diam. Proin tempus pulvinar felis, eget ultrices nunc elementum in. Sed gravida felis vitae iaculis euismod. Sed dignissim luctus vulputate. Etiam ullamcorper lobortis lectus eu volutpat. Aliquam erat volutpat. Sed pellentesque augue eu sodales gravida. Duis dapibus elit arcu, quis placerat ligula posuere vel.<br><br>Morbi tempor sagittis nibh non suscipit. Vivamus eu massa egestas, eleifend nisl eget, efficitur mauris. Aliquam commodo congue sodales. Nulla ornare nulla eu porttitor rutrum. Nullam lacinia sem ut lacinia fringilla. Fusce arcu diam, dictum lacinia eleifend quis, volutpat sed sapien. Sed imperdiet convallis libero, sed dapibus mauris lobortis nec. Mauris rhoncus tellus id tellus tempus, sed blandit tellus ullamcorper. Cras ultrices, ligula nec sagittis vestibulum, magna velit vehicula orci, ut dictum justo quam eget ipsum. Morbi accumsan libero eu dolor rhoncus condimentum. Vestibulum nec cursus nunc, eu mattis tellus. Duis tempor nisi dolor, id pretium ex tincidunt vel. Vivamus placerat augue interdum felis efficitur, vitae tempor lacus luctus. Maecenas placerat eros a velit condimentum, sed feugiat tellus tincidunt. Suspendisse a volutpat mauris. Nulla in feugiat diam, a ultricies ante.<br><br>Mauris tempus ut sem sed ultrices. Praesent in lobortis sem, eu pharetra ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec feugiat urna nec vestibulum consequat. Quisque vel ipsum a felis accumsan scelerisque nec nec magna. Maecenas sed neque imperdiet, convallis ligula non, rutrum libero. Nullam ultricies ex sed vulputate pretium. In id nisl orci. Sed imperdiet enim vestibulum, consequat lorem vel, accumsan justo.<br><br>In hac habitasse platea dictumst. Vivamus hendrerit sed ipsum vitae ultricies. Aliquam sit amet erat a sem vulputate malesuada at at est. Nam hendrerit ultricies arcu, sed ultrices nulla egestas in. Cras eu mi iaculis, ornare sapien ut, placerat mi. Cras sed tellus pretium, tempus ex eget, congue purus. Nulla dignissim, sem quis fringilla varius, leo magna fringilla elit, vel placerat felis metus nec augue. Nullam eu ultrices tortor, sed vestibulum eros. Aliquam tincidunt placerat arcu. Proin vel scelerisque nisi. Vestibulum dictum auctor tristique. Etiam interdum a ligula sit amet maximus. Proin blandit pharetra diam, sit amet blandit ex euismod at. Quisque vel ex risus.</td>
</tr>
<tr>
<td class="label">Label 02</td>
<td>Data 02 ...</td>
</tr>
<tr>
<td class="label">Label 03</td>
<td>Data 03 ...</td>
</tr>
<tr>
<td class="label">Label 04</td>
<td>Data 04 ...</td>
</tr>
<tr>
<td class="label">Label 05</td>
<td>Data 05 ...</td>
</tr>
<tr>
<td colspan="2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean faucibus ante id augue malesuada feugiat. Vivamus vel ullamcorper velit. Pellentesque non lacinia risus. Ut efficitur orci id varius elementum. Morbi bibendum nisl purus, a molestie purus molestie vitae. Phasellus dignissim, est et cursus gravida, mauris urna hendrerit mauris, a maximus tortor lacus sit amet quam. Curabitur ac dolor vel sapien lacinia volutpat nec non massa. Ut tempor urna sed lacus fermentum, in ultrices dui luctus. Vivamus condimentum posuere velit iaculis gravida. Suspendisse ullamcorper tortor risus, sit amet lobortis arcu auctor vel. Aliquam blandit est quam, id cursus sapien varius eleifend.
[More]
</td>
</tr> <!-- end message_body div -->
</table> <!-- end message div -->
</div> <!-- end message_container div -->
</div>
</div>
</body>
</html>
***** UPDATE 2
Here is another grid example which uses less markup.
.table-grid {
font-family: sans-serif;
display: grid;
grid-template-columns: max-content 1fr;
grid-column-gap: 10px;
grid-row-gap: 25px
}
<div class="table-grid">
<!-- ROW -->
<div><strong>Label</strong></div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
<!-- ROW -->
<div><strong>Label</strong></div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mauris sagittis, dictum neque eu, tempor dui. Pellentesque et tellus eu magna condimentum fermentum. Curabitur ac felis non ante cursus sollicitudin sed quis velit. Integer volutpat
lectus vitae bibendum ornare.</div>
<!-- ROW -->
<div><strong>Label</strong></div>
<div>Lorem ipsum dolor</div>
</div>
***** UPDATE
Here is an alternative using grid
.table {
list-style: none;
margin: 0;
padding: 15px;
background: slategray;
display: grid;
grid-gap: 20px;
}
.table>li {
display: grid;
grid-template-columns: 80px 1fr;
align-items: flex-start;
padding: 10px;
border: 1px solid lightgray;
color: #fff;
}
<ul class="table">
<li>
<span>
<strong>Label</strong>
</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et orci sagittis, aliquet mauris quis, facilisis ligula. Aenean vehicula lectus sit amet tellus ultricies, a semper orci pharetra. In pretium tincidunt fermentum. Duis massa massa, tempus quis mauris in, volutpat facilisis dui.
</span>
</li>
<li>
<span>
<strong>Label</strong>
</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et orci sagittis, aliquet mauris quis, facilisis ligula. Aenean vehicula lectus sit amet tellus ultricies, a semper orci pharetra. In pretium tincidunt fermentum. Duis massa massa, tempus quis mauris in, volutpat facilisis dui.
</span>
</li>
<li>
<span>
<strong>Label</strong>
</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et orci sagittis, aliquet mauris quis, facilisis ligula. Aenean vehicula lectus sit amet tellus ultricies, a semper orci pharetra. In pretium tincidunt fermentum. Duis massa massa, tempus quis mauris in, volutpat facilisis dui.
</span>
</li>
</ul>
Flexbox does not work like a table. You will need a "row" div like in the code below.
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
color: #313131;
}
#content {
margin: 2em;
}
#messages {
position: absolute;
width: 50%;
margin: 0 auto;
}
.message_container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-evenly;
background-color: #ffc0cb;
font-size: smaller;
padding: 0.5em;
}
.message_controls {
display: flex;
justify-content: flex-start;
background-color: #dcdcdc;
padding: 0.5em;
}
.message {
display: flex;
flex-direction: column;
background-color: #87ceeb;
padding: 0.5em;
}
.message_headers {
display: flex;
flex-direction: column;
}
.message_labels {
display: flex;
flex-direction: column;
padding: 0.5em;
font-weight: 800;
}
.message_labels span {
margin: 0.5em;
}
.message_data {
display: flex;
flex-direction: column;
padding: 0.5em;
}
.message-row {
display: flex;
align-items: flex-start;
}
.message-label {
width: 80px;
}
.message_data span {
margin: 0.5em;
}
.message_body {
font-family: monospace;
}
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div id="content">
<div id="messages">
<div class="message_container">
<div class="message_controls">
<input type="checkbox" checked>
</div>
<!-- end message_controls div -->
<div class="message">
<div class="message_headers">
<div class="message_data">
<div class="message-row">
<span class="message-label">Label 01</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit ex ac luctus blandit. Nulla dignissim turpis ac eros ultrices porttitor. Etiam efficitur neque urna, sit amet sodales lorem ultrices non. Quisque risus lorem, posuere et malesuada ac, malesuada id felis. Aliquam viverra libero eu dapibus blandit. Vivamus molestie vel nisl iaculis sodales. Fusce porttitor ultrices nisi at imperdiet. Curabitur sem neque, lobortis venenatis sagittis eu, interdum at quam. Duis vestibulum nulla sit amet neque aliquet, eget accumsan enim feugiat. In hac habitasse platea dictumst. Nullam efficitur nec magna et molestie. Suspendisse elementum vel libero tristique varius. Donec dignissim tempor sagittis. Praesent nec rhoncus elit. Fusce ut leo urna.<br><br>Nullam luctus fringilla fringilla. Aliquam vehicula luctus nisi, rhoncus ultrices diam. Proin tempus pulvinar felis, eget ultrices nunc elementum in. Sed gravida felis vitae iaculis euismod. Sed dignissim luctus vulputate. Etiam ullamcorper lobortis lectus eu volutpat. Aliquam erat volutpat. Sed pellentesque augue eu sodales gravida. Duis dapibus elit arcu, quis placerat ligula posuere vel.<br><br>Morbi tempor sagittis nibh non suscipit. Vivamus eu massa egestas, eleifend nisl eget, efficitur mauris. Aliquam commodo congue sodales. Nulla ornare nulla eu porttitor rutrum. Nullam lacinia sem ut lacinia fringilla. Fusce arcu diam, dictum lacinia eleifend quis, volutpat sed sapien. Sed imperdiet convallis libero, sed dapibus mauris lobortis nec. Mauris rhoncus tellus id tellus tempus, sed blandit tellus ullamcorper. Cras ultrices, ligula nec sagittis vestibulum, magna velit vehicula orci, ut dictum justo quam eget ipsum. Morbi accumsan libero eu dolor rhoncus condimentum. Vestibulum nec cursus nunc, eu mattis tellus. Duis tempor nisi dolor, id pretium ex tincidunt vel. Vivamus placerat augue interdum felis efficitur, vitae tempor lacus luctus. Maecenas placerat eros a velit condimentum, sed feugiat tellus tincidunt. Suspendisse a volutpat mauris. Nulla in feugiat diam, a ultricies ante.<br><br>Mauris tempus ut sem sed ultrices. Praesent in lobortis sem, eu pharetra ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec feugiat urna nec vestibulum consequat. Quisque vel ipsum a felis accumsan scelerisque nec nec magna. Maecenas sed neque imperdiet, convallis ligula non, rutrum libero. Nullam ultricies ex sed vulputate pretium. In id nisl orci. Sed imperdiet enim vestibulum, consequat lorem vel, accumsan justo.<br><br>In hac habitasse platea dictumst. Vivamus hendrerit sed ipsum vitae ultricies. Aliquam sit amet erat a sem vulputate malesuada at at est. Nam hendrerit ultricies arcu, sed ultrices nulla egestas in. Cras eu mi iaculis, ornare sapien ut, placerat mi. Cras sed tellus pretium, tempus ex eget, congue purus. Nulla dignissim, sem quis fringilla varius, leo magna fringilla elit, vel placerat felis metus nec augue. Nullam eu ultrices tortor, sed vestibulum eros. Aliquam tincidunt placerat arcu. Proin vel scelerisque nisi. Vestibulum dictum auctor tristique. Etiam interdum a ligula sit amet maximus. Proin blandit pharetra diam, sit amet blandit ex euismod at. Quisque vel ex risus.</span>
</div>
<div class="message-row">
<span class="message-label">Label 01</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit ex ac luctus blandit. Nulla dignissim turpis ac eros ultrices porttitor. Etiam efficitur neque urna, sit amet sodales lorem ultrices non. Quisque risus lorem, posuere et malesuada ac, malesuada id felis. Aliquam viverra libero eu dapibus blandit. Vivamus molestie vel nisl iaculis sodales. Fusce porttitor ultrices nisi at imperdiet. Curabitur sem neque, lobortis venenatis sagittis eu, interdum at quam. Duis vestibulum nulla sit amet neque aliquet, eget accumsan enim feugiat. In hac habitasse platea dictumst. Nullam efficitur nec magna et molestie. Suspendisse elementum vel libero tristique varius. Donec dignissim tempor sagittis. Praesent nec rhoncus elit. Fusce ut leo urna.<br><br>Nullam luctus fringilla fringilla. Aliquam vehicula luctus nisi, rhoncus ultrices diam. Proin tempus pulvinar felis, eget ultrices nunc elementum in. Sed gravida felis vitae iaculis euismod. Sed dignissim luctus vulputate. Etiam ullamcorper lobortis lectus eu volutpat. Aliquam erat volutpat. Sed pellentesque augue eu sodales gravida. Duis dapibus elit arcu, quis placerat ligula posuere vel.<br><br>Morbi tempor sagittis nibh non suscipit. Vivamus eu massa egestas, eleifend nisl eget, efficitur mauris. Aliquam commodo congue sodales. Nulla ornare nulla eu porttitor rutrum. Nullam lacinia sem ut lacinia fringilla. Fusce arcu diam, dictum lacinia eleifend quis, volutpat sed sapien. Sed imperdiet convallis libero, sed dapibus mauris lobortis nec. Mauris rhoncus tellus id tellus tempus, sed blandit tellus ullamcorper. Cras ultrices, ligula nec sagittis vestibulum, magna velit vehicula orci, ut dictum justo quam eget ipsum. Morbi accumsan libero eu dolor rhoncus condimentum. Vestibulum nec cursus nunc, eu mattis tellus. Duis tempor nisi dolor, id pretium ex tincidunt vel. Vivamus placerat augue interdum felis efficitur, vitae tempor lacus luctus. Maecenas placerat eros a velit condimentum, sed feugiat tellus tincidunt. Suspendisse a volutpat mauris. Nulla in feugiat diam, a ultricies ante.<br><br>Mauris tempus ut sem sed ultrices. Praesent in lobortis sem, eu pharetra ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec feugiat urna nec vestibulum consequat. Quisque vel ipsum a felis accumsan scelerisque nec nec magna. Maecenas sed neque imperdiet, convallis ligula non, rutrum libero. Nullam ultricies ex sed vulputate pretium. In id nisl orci. Sed imperdiet enim vestibulum, consequat lorem vel, accumsan justo.<br><br>In hac habitasse platea dictumst. Vivamus hendrerit sed ipsum vitae ultricies. Aliquam sit amet erat a sem vulputate malesuada at at est. Nam hendrerit ultricies arcu, sed ultrices nulla egestas in. Cras eu mi iaculis, ornare sapien ut, placerat mi. Cras sed tellus pretium, tempus ex eget, congue purus. Nulla dignissim, sem quis fringilla varius, leo magna fringilla elit, vel placerat felis metus nec augue. Nullam eu ultrices tortor, sed vestibulum eros. Aliquam tincidunt placerat arcu. Proin vel scelerisque nisi. Vestibulum dictum auctor tristique. Etiam interdum a ligula sit amet maximus. Proin blandit pharetra diam, sit amet blandit ex euismod at. Quisque vel ex risus.</span>
</div>
</div>
<!-- end message_headers div -->
<div class="message_body">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean faucibus ante id augue malesuada feugiat. Vivamus vel ullamcorper velit. Pellentesque non lacinia risus. Ut efficitur orci id varius elementum. Morbi bibendum nisl purus, a molestie purus molestie vitae. Phasellus dignissim, est et cursus gravida, mauris urna hendrerit mauris, a maximus tortor lacus sit amet quam. Curabitur ac dolor vel sapien lacinia volutpat nec non massa. Ut tempor urna sed lacus fermentum, in ultrices dui luctus. Vivamus condimentum posuere velit iaculis gravida. Suspendisse ullamcorper tortor risus, sit amet lobortis arcu auctor vel. Aliquam blandit est quam, id cursus sapien varius eleifend.
[More]
</span>
</div>
<!-- end message_body div -->
</div>
<!-- end message div -->
</div>
<!-- end message_container div -->
</div>
</div>
</body>
</html>
Context
I'm making a website that allows to create csgo bind/config files, so I splited the page in half : on the left, inputs from user, on the right, the configuration result.
I have one button, at the end of the each panel, to compute inputs and to download the file, but I would like to keep them visible all time (currently, they are at the bottom of the page, i need to scroll to find them).
For one panel, we have :
As the title and the button have "known" position, is there a way to extend the lorem ipsum div, pushing the button to the bottom of the panel, without overflowing the screen ?
I don't want to use absolute attributes, in anticipation of an adaptation for smaller screens (at that time, the two panels will be located one below the other).
I have try some stuff with flex-grow, nothing convincing.
I don't have any defined height for the lorem ipsum div; I want to cover the maximum of the panel, without overflowing it.
Here is some simplified code :
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.panel {
flex-grow: 1;
min-width: 200px;
max-width: 50%;
padding: 1em;
}
#lorem {
overflow-y: scroll;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus.
Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis
ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi,
congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum,
velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique
ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet
ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar
porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet
eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis
ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius
pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis
ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis
dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis.
Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="button">
<input type="button" value="Press Me">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="button" value="Press Me">
</div>
</div>
</div>
Make each of you panel elements a column flexbox with height: 100% (also consider border-box to including padding in height).
Now just add min-height: 0 to wrapper element - see demo below:
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
min-height: 0; /* added */
}
.panel {
flex-grow: 1;
min-width: 200px;
max-width: 50%;
padding: 1em;
display: flex; /* added */
height: 100%; /* added */
flex-direction: column; /* added */
box-sizing: border-box; /* added */
}
#lorem {
overflow-y: scroll;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus.
Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis
ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi,
congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum,
velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique
ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet
ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar
porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet
eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis
ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius
pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis
ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis
dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis.
Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="button">
<input type="button" value="Press Me">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="button" value="Press Me">
</div>
</div>
</div>
PS: Adding min-height: 0 is to override the default min-height: auto for flex items in column direction - you can see some examples of this:
Flexbox affects overflow-wrap behavior
Flexbox resize and scrollable overflow
Why don't flex items shrink past content size?
Added the following CSS to your lorem id:
#lorem {
height: 80%;
overflow-y: auto;
}
Also to your panel: max-height: 100%;
Key part here is overflow-y: scroll. This works as long as you have a height defined. Since you want the content of your lorem to be relative to your panel, you can use a % height, in this case 80% seems to fit nicely between your title and button.
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#lorem {
height: 80%;
overflow-y: scroll;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.panel {
flex-grow: 1;
max-height: 100%;
min-width: 200px;
max-width: 50%;
padding: 1em;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus. Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi, congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum, velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis. Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="button">
<input type="button" value="Press Me">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="button" value="Press Me">
</div>
</div>
</div>
</body>
</html>
When using flexbox, it's important that you specify exactly what you want for each element. You've said you don't want a height on #lorem but you have to specify a height somewhere in order to get the results you want, I specified it with h1 and #wrapper. I believe this is the result you're looking for, take a look at the fiddle.
body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
h1 {
height: 20%;
}
#lorem {
overflow-y: scroll;
}
#wrapper {
height: 80%;
display: flex;
flex-direction: row;
}
.panel {
padding: 1em;
width: 50%;
display: flex;
flex-direction: column;
}
You can make use of jquery to identify the dynamic height of the panel.
function resizeElement(id){
var win= window.outerHeight;
var title= $("#title").outerHeight();
var extraPadding= 32;
var height= win- (title+extraPadding);
$("#lorem").css("max-height", height+ "px");
}
resizeElement('left');
resizeElement('right');
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.panel {
flex-grow: 1;
min-width: 200px;
max-width: 50%;
padding: 1em;
}
#lorem {
max-height: 50%;
overflow-y: auto;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="fr">
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus. Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi, congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum, velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis. Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="footer">
<input type="button" value="Press Me 1">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div id="footer">
<input type="button" value="Press Me 2">
</div>
</div>
</div>
</body>
</html>
I would like to create a scrollable content div (#left) while keeping all other elements (#header, #right) in place. If I give #left a fixed height it behaves as desired, but I want it to fill up the whole viewport and don't know any heights beforehand.
html, body{
height:100%;
margin:0;
padding:0;
}
#main {
display: flex;
height: 100%;
flex-direction: column;
}
#header {
background-color: blue;
}
#content {
flex: 1;
background-color: red;
}
#inner {
display: flex;
height: 100%;
background-color: yellow;
}
#left {
flex: 1;
height: 100%;
overflow: auto;
background-color: pink;
}
#right {
flex: 1;
height: 100%;
background-color: green;
}
<div id="main">
<div id="header">
Heyheyhey<br/>
Yo<br/>
</div>
<div id="content">
<div id="inner">
<div id="left">
Only this pane should scroll.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
</div>
<div id="right">
Yo
</div>
</div>
</div>
</div>
Thanks!
Just use flex properties all the way through.
You don't need display: block.
You don't need calc().
You don't even need percentage heights.
#main {
display: flex;
flex-direction: column;
height: 100vh;
}
#header {
background-color: aqua;
}
#content {
flex: 1;
background-color: red;
display: flex;
min-height: 0; /* for Firefox and Edge; see note below */
}
#inner {
display: flex;
background-color: yellow;
}
#left {
flex: 1;
overflow: auto;
background-color: pink;
}
#right {
flex: 1;
background-color: lightgreen;
}
body {
margin: 0;
}
<div id="main">
<div id="header">
Heyheyhey<br/> Yo
<br/>
</div>
<div id="content">
<div id="inner">
<div id="left">
Only this pane should scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus
lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum
magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus
lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum
magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus
lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum
magna dignissim ac.
</div>
<div id="right">
Yo
</div>
</div>
</div>
</div>
Note: For this layout to adhere to the flexbox specification, and work in Firefox and Edge, you need to override the min-height: auto default on flex items. Chrome provides a built-in override. A full explanation is here: Why don't flex items shrink past content size?
I believe below approach solves your issue. Pure CSS. display: flex in display: block.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main {
display: flex;
height: 100%;
flex-direction: column;
}
#header {
background-color: blue;
}
#content {
display: flex;
background-color: red;
overflow: hidden;
}
#inner {
display: block;
background-color: yellow;
}
#inner2 {
display: flex;
height: 100%;
}
#left {
width: 50%;
background-color: pink;
overflow: auto;
}
#right {
width: 50%;
background-color: green;
}
<div id="main">
<div id="header">
Heyheyhey<br/> Yo
<br/>
</div>
<div id="content">
<div id="inner">
<div id="inner2">
<div id="left">
Only this pane should scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique,
tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan
bibendum magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus
lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum
ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique,
tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan
bibendum magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus
lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum
ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique,
tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan
bibendum magna dignissim ac.
</div>
<div id="right">
Yo
</div>
</div>
</div>
</div>
</div>
I'm creating a webpage that will have a long list of questions. I'm separating the questions using divs so that I can get the page to jump to the correct section, including the section at the top of the page. The problem is that the header doesn't scroll with the content like it was before I started adding content. Before adding content, the header would scroll as soon as the page started scrolling. Now, it delays until you get to the Service Time Questions radio buttons. I've searched online to see what would cause a delay in scrolling a header, but haven't found any usable results.
Here's my HTML:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="Layout.css">
<meta charset="UTF-8">
<title>Sample Page</title>
</head>
<body>
<div class="header">
<h1>Sample Page</h1>
</div>
<div class="menu">
<ul>
<li>CMS ID & Auditor Name</li>
<li>Service Time Questions</li>
<li>Narrative Questions</li>
<li>Diagram Questions</li>
<li>Photo Questions</li>
<li>Estimatics Questions</li>
</ul>
</div>
<div class="content">
<div id="cmsID" class="subcontent">
<form action="./audit_submitted.php" method="post">
<h3>CMS ID & Auditor Name</h3>
<br/><br/>
<p> Enter CMS ID:
<input type="text" name="cmsID" size="25" maxlength="25" value=""/>
<br/><br/>
Auditor Name:
<input type="text" name="auditorName" size="25" maxlength="25" value=""/>
<br/><br/>
Select Carrier:
<select name="carrierID" required>
<option value="">Select...</option>
<option value = "0">GAIG/AMIG</option>
<option value = "1">Nat Gen</option>
<option value = "2">SoCal AAA</option>
<option value = "3">QBE</option>
</select>
</p>
</form>
<br/><br/><br/>
</div>
<div class="subcontent" id="serviceTime">
<br/>
<h3>Service Time Questions</h3>
<br/><br/>
<input type="radio" name="answer" value="1"> Yes
<input type="radio" name="answer" value="0"> No
<input type="radio" name="answer" value="1"> N/A
<br/><br/>
</div>
<div class="subcontent" id="narrative">
<br/>
<h3>Narrative Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="diagram">
<br/>
<h3>Diagram Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="photos">
<br/>
<h3>Photo Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="estimatics">
<br/>
<h3>Estimatics Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
</div>
<div class="footer">
© Sample Company 2016
</div>
</body>
</html>
And here's my CSS:
html, body {
min-height: 100%;
margin: 0%;
width: 98%;
font-family: Arial, Helvetica, sans-serif;
overflow-x: hidden;
}
*{
margin: 0%;
padding: 0%;
}
.header{
color: #FFFFFF;
background-color: #B31220;
font-size: 2em;
padding: 1% 0% 1% 2%;
text-align: center;
width: 98%;
position: absolute;
}
.header img{
float: left;
width: 102px;
height: 100px;
top: 8%;
background: #B31220;
}
.header h1{
position: relative;
top: 10px;
left: 5px;
}
/*The menu class is fixed to the left hand side of the screen and takes up full
vertical space available. It does however show up behind the header bar.*/
.menu{
width: 12%;
height: 100%;
position: fixed;
padding-top: 20%;
z-index: -1;
background-color: #505050;
color: #FFFFFF;
}
.content{
width: 88%;
height: 100%;
font-size: 1em;
float: right;
padding: 1%;
padding-top: 10%;
padding-bottom: 20%;
position: absolute;
z-index: -1;
margin-left: 10%;
background-color: #F8e8d2;
overflow-y: scroll;
}
.subcontent{
margin: 2%;
}
.footer{
position: fixed;
bottom: 0;
width: 98%;
background-color: #B31220;
color: #FFFFFF;
clear: both;
text-align: center;
padding: .5% 1%;
}
/*Experimental Code*/
ul {
list-style-type: none;
margin: 0%;
padding: 0%;
width: 10%;
background-color: #505050;
height: 100%;
position: fixed;
overflow: auto;
}
li a {
display: block;
color: #FFF;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #B31220;
color: white;
border: 0;
}
Made a few adjustments to your stylesheet. Using fixed and absolutes in the positions was causing most of the problem. Give definite heights to each div makes a difference.
html, body {
min-height: 100%;
margin: 0%;
width: 98%;
font-family: Arial, Helvetica, sans-serif;
}
*{
margin: 0%;
padding: 0%;
}
.header{
color: #FFFFFF;
background-color: #B31220;
font-size: 2em;
padding: 1% 0% 1% 2%;
text-align: center;
width: 98%;
height: 120px;
}
.header img{
float: left;
width: 102px;
height: 100px;
top: 8%;
background: #B31220;
}
.header h1{
position: relative;
top: 10px;
left: 5px;
}
/*The menu class is fixed to the left hand side of the screen and takes up full
vertical space available. It does however show up behind the header bar.*/
.menu{
width: 12%;
height: 500px;
float: left;
background-color: #505050;
color: #FFFFFF;
}
.content{
width: 88%;
height: 500px;
font-size: 1em;
float: left;
background-color: #F8e8d2;
overflow-y: scroll;
}
.subcontent{
margin: 2%;
}
.footer{
bottom: 0;
width: 98%;
background-color: #B31220;
color: #FFFFFF;
clear: both;
text-align: center;
padding: .5% 1%;
}
/*Experimental Code*/
ul {
list-style-type: none;
margin: 0%;
padding-top: 20%;
width: 100%;
background-color: #505050;
overflow: auto;
}
li a {
display: block;
color: #FFF;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #B31220;
color: white;
border: 0;
}
IF YOU MARK THIS DUPLICATE, YOU HAD BETTER GIVE ME A LINK TO THE ANSWER I NEED. OTHERWISE, DON'T BOTHER MARKING IT DUPLICATE, COMMENTING OR A
Just change you CSS in the html, body for overflow-x: hidden to overflow: hidden and add #estimatics{margin-bottom: 200px}
Thanks to Jeff, I was able to track down what was wrong. His answer didn't fix the issue, but it made the root cause more obvious.
I had to change the height: 100%; in .content to min-height: 100%;.
I also added display: inline-block; to the end of .content.
Finally, I had to add background-color: #F8e8d2; to the .subcontent section because the subcontents were causing discoloration on the content div.
These updates fixed it so that the header scrolls when I start scrolling the page, and my jump links work perfectly.