フッターが常に表示され、下部にドッキングされているスティッキーフッターを作成しようとしていますが、コンテンツが追加されると中間のコンテンツがスクロールします。divを画面の下部に貼り付けて、中央のコンテンツをスクロールさせるにはどうすればよいですか?
/* Reset */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
/* Essentials */
.container {
display: table;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}
.scroller {
max-height: 100%;
overflow-y: auto;
}
/* Aestetics */
.container {
width: 100%;
height: 100%;
}
.header,
.footer {
padding: 10px 20px;
background: #f7f7f7;
}
.scroller {
padding: 20px;
background: #e7e7e7;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
p:last-child {
margin-bottom: 0;
}
<div class="container">
<header class="header">
<p>This is the header</p>
</header>
<section class="content">
<div class="content-body">
<div class="scroller">
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
</div>
</div>
</section>
<footer class="footer">
<p>This is the footer.</p>
</footer>
</div>
これはChromeとFFのための素晴らしい作品が、IEでは動作しません:私はそれを達成するためのこの方法を使用しています。これはIEのための簡単な修正か、誰かがより良い解決策を知っていますか?
IEサポートの問題の一部ではありません。 IEは、適応するか、単に歴史に入るべきです。 – VXp
私は理想的に同意します:)しかし、現実的には、それは皆のために働くことを望みます – Donuts
私はIE/Edgeユーザーは本当に問題ではないと思います。 :) – VXp