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

我在Google上搜索了一下，找不到适合我的问题的解决方案。我完成了一个网站设计，但忘记了包含社交媒体链接。为了解决这个问题，我决定把图标放在页面的底部。问题在于，当内容没有填满整个页面时，图标不会进入底部。我尝试了Google上常见的解决方案，但容器和内容分区的高度阻止了这些解决方案的运行。我调整了html，body，container的高度至100％。CSS高度问题：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; 
}

来源

2014-03-07 gszx1337

尝试更新的CSS s_media分度

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

这应该使社会媒体的div坚守在页面底部。

来源

2014-03-07 00:49:30 Aaks20

尽管它将div脚趾粘在页面的底部，但它覆盖了页面底部的任何内容。如果我插入延伸到页面底部的图像，div中的图标将覆盖插入的图像。 – gszx1337

如果标记是你在jsfiddle中指定的，那么这应该不成问题，因为内容和s_media是两个单独的div。检查这个http://jsfiddle.net/j9hYG/ – Aaks20

它在JSFiddle窗口中看起来很好，但是如果你全屏显示它，你会看到我的问题。问题在于空的内容div超出屏幕高度，迫使用户不必要地向下滚动。编辑：谢谢你迄今的帮助。 – gszx1337

我不知道这是否会解决您的其他问题，但添加溢出：隐藏的身体选择将删除垂直滚动条：

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

来源

2014-03-07 00:27:59 Shilpam

我没有出现在页面一侧的滚动条的问题。不过，我会研究Twitter Bootstrap。 – gszx1337

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

回答

相关问题