2017-12-04 9 views
0

フッターが常に表示され、下部にドッキングされているスティッキーフッターを作成しようとしていますが、コンテンツが追加されると中間のコンテンツがスクロールします。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のための簡単な修正か、誰かがより良い解決策を知っていますか?

+0

IEサポートの問題の一部ではありません。 IEは、適応するか、単に歴史に入るべきです。 – VXp

+0

私は理想的に同意します:)しかし、現実的には、それは皆のために働くことを望みます – Donuts

+0

私はIE/Edgeユーザーは本当に問題ではないと思います。 :) – VXp

答えて

2

あなたは、単にこのような固定位置を検討することができます:あなたがIEでこれを解決するための固定位置を追加することができ

/* Reset */ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 

 
/* Essentials */ 
 

 

 
.content { 
 
    height: 100%; 
 
} 
 

 
.scroller { 
 
    max-height: 100%; 
 
    overflow-y: auto; 
 
} 
 

 

 
/* Aestetics */ 
 

 
.container { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.header, 
 
.footer { 
 
    position:fixed; 
 
    right:0; 
 
    left:0; 
 
    padding:20px; 
 
    background:#fff; 
 
    
 
} 
 

 
.footer { 
 
bottom:0; 
 
} 
 
.header { 
 
top:0; 
 
} 
 

 
.scroller { 
 
    padding: 20px; 
 
    background: #e7e7e7; 
 
    margin:40px auto; 
 
} 
 

 
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>

0

を:

.header { 
    position: fixed; left: 0; top: 0; width: 100% 
} 

このupdated fiddleをチェック

0
.footer { 
    position: fixed; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 
関連する問題