css - CSS 高度 : 100% Bottom Icons Pushed Below Bottom of Page 的问题

Question

我在 Google 和此处进行了一些搜索，但找不到适合我的问题的解决方案。我已经完成了网站设计，但忘记包含社交媒体链接。为了解决这个问题，我决定将图标放在页面底部。问题是当内容没有填满整个页面时，图标不会到底部。我尝试了在 Google 上找到的常用解决方案，但容器的高度和内容 div 阻止了这些解决方案的工作。我进去把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

尝试用 s_media div 更新 CSS

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

这应该使社交媒体 div 固定在页面底部。