I have a grid system shown in the sample below, where the 'main' part of the grid has a footer that only belongs to it, and should be displayed at the very bottom.
|--------------|
| header |
|--------------|
| | | |
| L | Main | R |
| | | |
----------------
I understand that when grid-template-rows: 64px calc(100% - 64px); is applied, the bottom row, which has L, Main and R will expand to fill (100% - 64px) of its parent.
Now I want to add content to that Main grid cell, and sometimes there will be an overflow, sometimes there won't; so I add overflow: auto; to get the scrolling working at the Main level.
I now need that the footer inside Main is always at the bottom, so I go with display: flex; on that same item, so i can propertly distribute its content.
This is where trouble begins, I'm not sure if it's a conflict caused by the calculation of the height given by grid-template-rows and the actual height given by its content, that makes that display flex child overlap with the element above as displayed on the image below.
I can't just change Main to be display block, because when then the footer inside it will not be pulled all the way to the bottom.
This works well on Chrome and fails on IE(surprise), here is a working fiddle that can be used to recreate the problem and see the diff on both browsers.
*{
box-sizing: border-box;
}
html, body{
height: 100%;
background-color: gray;
}
.outer-content{
align-content: start;
display: grid;
display: -ms-grid;
grid-template-columns: 260px auto 320px;
-ms-grid-columns: 260px calc(100% - 566px) 320px;
grid-template-rows: 64px calc(100% - 64px);
-ms-grid-rows: 64px calc(100% - 64px);
grid-template-areas: "header header header" "leftbar main rightbar";
height: 100%;
}
main{
display: flex;
flex-direction: column;
grid-area: main;
overflow: auto;
-ms-grid-row: 2;
-ms-grid-column: 2;
background-color: pink;
}
.footer{
background-color: #222326;
font-family: "Open Sans",sans-serif;
margin-top: auto;
min-width: 400px;
padding: 10px 0;
position: relative;
display: block;
color: white;
text-align: center;
}
.static{
color: #fff;
padding: 10px 10px 10px 40px;
font-family: "Open Sans",sans-serif;
font-size: .8rem;
}<div class="outer-content">
<main>
<div class="static">
<p>Accumsan aenean voluptas? Litora in quisquam, dis, maxime! Facilisi quasi, facere. Commodi quisque tempus, elementum laborum? Cras euismod porta quae.</p>
<p>Dolore natoque netus ipsam, in harum dolores primis, mi, scelerisque accusantium imperdiet incididunt ea sociosqu nemo montes, augue vulputate officiis.</p>
<p>Velit repellat amet! Feugiat aptent deleniti velit maiores officia ullam hac cupiditate ex, cum vel sociis, iure auctor, proident orci.</p>
<p>Primis, ac nonummy sociis do leo est modi natoque tellus exercitation scelerisque! Cubilia dis placeat diamlorem pulvinar accusamus? Fusce, culpa.</p>
<p>Sodales quis modi voluptas rem vulputate accumsan, excepturi ducimus nascetur eligendi! Debitis? Dolorum vitae eveniet ducimus esse habitasse, minima tempora.</p>
<p>Repellat risus non ut earum totam similique quisque anim, risus. Pretium. Gravida, assumenda pellentesque non excepteur! Parturient vel sociis, ullam.</p>
<p>Cupidatat laboriosam tempus similique corporis recusandae occaecat fames aut ipsa tristique dolores, dolorum imperdiet excepturi, torquent quod? Lacus? Fringilla? Vivamus.</p>
<p>Aliquip sapiente lectus mollis labore augue molestiae alias purus praesent corrupti tempora, quos, sed, perspiciatis phasellus parturient? Vel, quas reiciendis.</p>
<p>Reprehenderit quis. Nibh lacinia iste quasi quam laboriosam, adipisci reiciendis mollit? Ante proin ex montes, rem posuere dictum, lectus, varius.</p>
<p>At quae arcu dignissimos id ea quidem, euismod aenean, reiciendis sit. Architecto justo iste turpis totam euismod mattis, lectus explicabo.</p>
<p>Dignissimos nunc maiores malesuada, nemo. Inventore minima rhoncus? In nesciunt aptent dolore elementum, do. Tenetur mus! Tristique ad pariatur provident.</p>
<p>Fermentum excepturi. Quas, nostrum! Elementum iste! Varius bibendum, ullamco vestibulum neque ornare, magnam! Mattis? Iste convallis fringilla totam diam fugiat.</p>
<p>Ac tempus ipsam quis faucibus? Provident condimentum, vehicula dis? Egestas. Beatae facere taciti illo, praesent cursus soluta dolor excepteur ipsa.</p>
<p>Alias blandit lorem massa impedit taciti, platea omnis pede, diamlorem, cursus quaerat! Orci penatibus, tempore quos egestas nemo, excepteur ipsa.</p>
<p>Temporibus litora nostrud, risus laboriosam. Praesent. Velit perferendis? Nihil, blandit optio ultrices, eiusmod! Repellat rutrum nostra, delectus non neque sem.</p>
<p>Asperiores quaerat tellus natoque ipsam tincidunt duis consequat. Id? Assumenda iaculis excepteur magnis ipsum ullam. Saepe urna diam? Veniam libero.</p>
<p>Facilis dapibus doloremque curabitur hic erat? Placerat explicabo anim recusandae facilis? Sunt, aptent, ultrices occaecat fringilla totam tempor error nullam.</p>
<p>Neque autem rutrum molestias. Natoque sint integer imperdiet, phasellus, fuga auctor lobortis reprehenderit sagittis aliquip iaculis felis tempora, maiores ducimus.</p>
<p>Sint, diamlorem anim cupidatat. Sem nulla! Facere quo, nulla illo felis commodi scelerisque nunc tristique? Consequatur ipsa ullamcorper, veniam sem.</p>
<p>Sociis auctor? Feugiat, wisi. Condimentum, unde aliquid doloribus. Aspernatur, cillum leo dignissimos facilisi gravida impedit repellendus, ullamco, labore quia vitae.</p>
<p>Nisi quasi, error pulvinar. Cum corrupti risus, voluptatibus taciti expedita eget magnis euismod deleniti, culpa tempor magna quia hendrerit hic.</p>
<p>Esse mus, repellendus ipsa anim sagittis dolor rem? Sunt in lorem, elementum nostrud placerat autem, totam, sapiente magna, laoreet, culpa.</p>
<p>Hic? Autem tempor egestas fugit pellentesque nihil et veniam posuere, mi rem consectetuer auctor asperiores ullamco massa exercitation? Doloremque non.</p>
<p>Duis eius, nunc anim iste purus, sagittis leo diam expedita habitant laboriosam! Eros expedita habitasse. Adipisicing. Mus consectetuer! Praesentium? Itaque.</p>
<p>Eligendi porttitor sem hymenaeos tristique. Nostrud lacus ducimus minim, praesentium dolor beatae sit occaecat dignissimos, natus architecto feugiat felis, mollitia.</p>
<p>Quis cupidatat, aliquet? Quo aut maxime similique possimus gravida luctus nisi repudiandae? Feugiat proin voluptates dis quod lacinia donec a.</p>
<p>Sunt dolorem hac ea? Ullamco cubilia, distinctio facilis ipsam est voluptates? Quasi, soluta vivamus eaque, condimentum, dapibus sollicitudin, commodo? At.</p>
<p>Error voluptas mollitia, repudiandae aut egestas. Fringilla culpa tenetur, posuere! Voluptas quo sed mollis cupidatat, unde, dolorem ipsam vulputate, esse.</p>
<p>Egestas ad deserunt eiusmod rhoncus distinctio quisque nonummy, torquent autem! In potenti inceptos mattis nisl, ligula harum sint laoreet tellus.</p>
<p>Molestias vel cursus, tristique? Aenean temporibus wisi quo habitant laoreet nec odio! Velit quisquam sapien! Nonummy, repellendus suscipit. Aute rem.</p>
<p>Dapibus odit molestiae nisl eveniet? Quisquam enim doloribus in. Mollitia aliquam iaculis, conubia laoreet wisi reiciendis mauris dapibus error! Occaecati.</p>
<p>Expedita exercitationem, ante sodales molestie at, hymenaeos sequi alias torquent aute, natus? Integer fusce delectus? Maecenas laboriosam rem unde varius.</p>
<p>Nostra fusce illum hymenaeos laboris odit lorem curae, inventore mi voluptatibus vivamus, alias aspernatur vulputate, tenetur, molestias conubia, ac scelerisque.</p>
<p>Nihil, ullamcorper facilisis cupiditate proident dolor! Optio irure. Blandit, ultricies porttitor, maiores. Nostrud nostrud, error fringilla, voluptatum laudantium, dolor omnis.</p>
<p>Temporibus nesciunt maiores culpa delectus incidunt omnis expedita. Provident incididunt proident temporibus, per necessitatibus, pariatur class, neque quisque, nemo iste.</p>
<p>Placeat cupiditate mus, animi! Perspiciatis mauris voluptatibus nisl, aspernatur ex nobis dolor ac ultrices corrupti? Fugiat? Mi incidunt inventore pharetra.</p>
<p>Sint! Ducimus ut earum? Fugiat porttitor nec, at lacus cubilia, ultricies ipsa animi, metus semper occaecat cumque, molestiae ab, laudantium.</p>
<p>Enim irure ipsum eveniet ipsam, enim, modi arcu? Quasi nonummy autem perspiciatis! Arcu rhoncus consequuntur hendrerit purus congue fuga. Metus.</p>
<p>Dolorum vehicula error quibusdam inventore convallis lobortis praesent omnis? Earum luctus facilisis laoreet mollit commodi autem? Commodo eos culpa distinctio.</p>
<p>Est ultricies nisi porro animi voluptate, molestiae! Ipsam occaecati, fringilla diamlorem tincidunt, proident! Pede senectus, iaculis morbi nisi cillum, illo.</p>
<p>Voluptatibus maiores debitis fames eum ullamco? Scelerisque modi quam voluptatibus expedita, officia irure vehicula diam diam voluptatibus maiores? Inventore montes.</p>
<p>Atque provident illum, accumsan in pretium sociis laudantium id optio lobortis dignissimos, tempor vivamus, euismod blanditiis quisque taciti adipisci! Magnam.</p>
<p>Sagittis adipisicing ultrices reprehenderit. Quaerat, alias voluptate tempora, sagittis! Euismod. Laoreet, quae repellat nascetur ut quia voluptatum labore! Felis dignissimos.</p>
<p>Fugit conubia sodales, curae condimentum, elit, aptent hendrerit platea. Itaque class vero, voluptatibus posuere fermentum ab aspernatur montes, magnis! Ullamco.</p>
<p>Hac inventore dignissim venenatis aliquid eleifend minim tincidunt. Amet, aperiam dignissimos libero, dolores expedita. Laboriosam quisque penatibus, assumenda, tellus, maiores.</p>
<p>Donec. Dignissim vestibulum platea assumenda a ligula tortor, consequuntur donec molestie nascetur voluptatibus dolorem minima cursus quam tempore commodi maecenas.</p>
<p>Sem veritatis sequi purus? Ratione nulla phasellus, animi. Anim ratione assumenda debitis laudantium quisquam quibusdam elit morbi malesuada tincidunt potenti.</p>
<p>Eros illo varius. Occaecati curabitur nostrud, fames voluptatum? Accumsan, quasi ac, molestias excepturi nonummy, expedita fuga aliqua varius a gravida.</p>
<p>Senectus semper! Alias possimus accusamus rem quisque dictum auctor praesent eligendi inventore? Tortor labore feugiat, in, sint quis auctor. Repellat.</p>
<p>Diam litora? Cupidatat exercitationem vero earum cursus esse proin mattis animi eveniet, volutpat etiam justo hic senectus vivamus, ducimus minus.</p>
</div>
<div class="footer">
I SHOULD BE AT THE VERY BOTTOM
</div>
</main>
</div>
