CSS高度问题：100%的底部图标被推到页面底部下方

我在谷歌上搜索了一下，在这里也搜索了一下，没有找到一个合适的解决方案。我已经完成了一个网站设计，但忘记了包括社交媒体链接。为了解决这个问题，我决定在页面底部放置图标。问题是，当内容没有填满整个页面时，图标不会落到底部。我尝试了谷歌上常见的解决方案，但由于容器的高度和内容分区，这些解决方案无法正常工作。我把html、正文和容器的高度调整到100%

我现在面临的问题是，当我将content div的高度设置为100%时，它会延伸到页面底部。我有一个装置来演示这个问题。我有下面的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;
}

---

我不确定它是否能解决您的其他问题，但在正文选择器中添加overflow:hidden将删除垂直滚动条：

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;
}

---

我个人更喜欢使用它来简化布局。

尝试用

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

---

这会使社交媒体div粘到页面底部。

虽然它会将div粘到页面底部，但它会覆盖到页面底部的任何内容。如果我插入一个延伸到页面底部的图像，div中的图标将覆盖插入的图像。如果标记是您在jsfiddle中指定的，那么这应该不是问题，因为内容和s_媒体是两个独立的div。检查这个，它在JSFIDLE窗口中看起来很好，但是如果您全屏显示它，您将看到我的问题。问题是空的content div超出了屏幕的高度，迫使用户不必要地向下滚动。编辑：谢谢你迄今为止的帮助。我把s_媒体从容器中拿出来，弄乱了填充物/边距/等等，以获得所需的外观，从而使你的答案起作用。身高不再是个问题。再次感谢！我对页面侧面出现的滚动条没有问题。不过，我将研究推特引导。