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

我不确定它是否会解决您的其他问题，但添加溢出：隐藏到正文选择器将删除垂直滚动条：

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来简化布局。

Answer 2

尝试使用

更新s_media div的CSS

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

这应该使社交媒体部门坚持到页面底部。

CSS高度问题：100％底部图标被推到页面底部

2 个答案: