CSS高度問題：100％底部圖標推到頁面底部

Question

我在Google上搜索了一下，找不到適合我的問題的解決方案。我完成了一個網站設計，但忘記了包含社交媒體鏈接。爲了解決這個問題，我決定把圖標放在頁面的底部。問題在於，當內容沒有填滿整個頁面時，圖標不會進入底部。我嘗試了Google上常見的解決方案，但容器和內容分區的高度阻止了這些解決方案的運行。我調整了html，body，container的高度至100％。

我現在面臨的問題是，當我將內容div的高度設置爲100％時，它延伸到頁面的底部。我有一個JSFiddle設置來演示這個問題。我有下面的CSS代碼，刪除了移動和動畫位。

html, body { 
    height:100%; 
    margin: 0; 
    padding: 0; 
} 
body { 
    background:url(../images/jel_fish.png) #0485AA; 
    background:url(../images/jel_fish.png), linear-gradient(#7db9e8 0%, #67a3e0 62%, #1e5799 100%); 
    background:url(../images/jel_fish.png), -o-linear-gradient(#7db9e8 0%, #67a3e0 62%, #1e5799 100%); 
    background:url(../images/jel_fish.png), -ms-linear-gradient(#7db9e8 0%, #67a3e0 62%, #1e5799 100%); 
    background-attachment:fixed; 
    background-repeat:no-repeat; 
    background-position:center; 
} 
@font-face { 
    font-family: rude_metal; 
    src: url('vtks_rude_metal.ttf'), url('vtks_rude_metal.eot'); /* IE9 */ 
} 
a { 
    text-decoration:none; 
} 
a.med { 
    border:0; 
    float:left; 
    margin:12%; 
    position:relative; 
} 
.center { 
    height:auto; 
    margin:0; 
    padding: 0; 
    text-align:center; 
} 
.center img { 
    max-width: 100%; 
    height: auto; 
} 
.container { 
    height:100%; 
    margin:0 auto; 
    padding:0; 
    position:relative; 
    width:720px; 
} 
.content { 
    height:100%; 
    margin:0; 
    padding:0 75px; 
    position:relative; 
} 
img { 
    border:0; 
} 
p { 
    font-size:14pt; 
} 
ul.dropdown { 
    color:#0a4b63; 
    display:inline-block; 
    font:36px rude_metal; 
    list-style:none; 
    margin: 0 auto; 
    text-align:center; 
    position: relative; 
    padding-left:50px; 
    z-index:1; 
} 
ul.dropdown a { 
    color:#0a4b63; 
    margin: 0; 
    padding: 0; 
} 
ul.dropdown li a:hover { 
    list-style: none; 
} 
ul.dropdown li { 
    float: left; 
    position: relative; 
    padding: 0px 22px; 
    list-style: none; 
} 
ul.dropdown ul { 
    background:#75B1E5; 
    border-radius:0 0 20px 20px; 
    border:3px solid #0485AA; 
    border-top:none; 
    float:left; 
    margin:0; 
    margin-left:-25px; 
    padding:0; 
    position:absolute; 
    visibility: hidden; 
} 
ul.dropdown li:hover > ul { 
    visibility: visible; 
} 
.posters { 
    height:auto; 
    width:100%; 
} 
.s_media div { 
    height:100px; 
    top:-100px; 
    overflow:hidden; 
    position: relative; 
} 
.s_media img { 
    left:20%; 
    height:100px; 
    margin-left: -50px; 
    position:relative; 
    width:100px; 
} 
.s_media img + img { 
    left:40%; 
    position:absolute; 
} 
.s_media img + img + img { 
    left:60%; 
    position:absolute; 
} 
.s_media img + img + img + img { 
    left:80%; 
    position:absolute; 
} 

Answer 1

嘗試更新的CSS s_media分度

.s_media div{ 
    position: fixed; 
    bottom: 0; 
} 

這應該使社會媒體的div堅守在頁面底部。

Answer 2

我不知道這是否會解決您的其他問題，但添加溢出：隱藏的身體選擇將刪除垂直滾動條：

body { 
    overflow-y: hidden; 
    background:url(../images/jel_fish.png) #0485AA; 
    background:url(../images/jel_fish.png), linear-gradient(#7db9e8 0%, #67a3e0 62%, #1e5799 100%); 
    background:url(../images/jel_fish.png), -o-linear-gradient(#7db9e8 0%, #67a3e0 62%, #1e5799 100%); 
    background:url(../images/jel_fish.png), -ms-linear-gradient(#7db9e8 0%, #67a3e0 62%, #1e5799 100%); 
    background-attachment:fixed; 
    background-repeat:no-repeat; 
    background-position:center; 
} 

我個人更喜歡使用twitter bootstrap來簡化佈局。