Question

我目前正在开设一个侧面项目的网站，但我没有很多网络开发经验。在过去的一小时里，我一直在撕扯我的头发，试图弄清楚为什么我的页面的<body>元素只能渲染为我的视口高，而不是高到足以包含其中的内容。结果是当我向下滚动页面时，身体内部的桌子垂直溢出，身体的黑色背景明显地在其内部的内容之前结束。这是我身体的CSS：

html 
{ 
    background: url(../images/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
body
{
    width: 80%;
    font-family: Verdana;
    font-size: 14;
    color: white;
    background: rgba(0, 0, 0, .75);
    margin-left: auto;
    margin-right: auto;
}

不幸的是，我无法发布图片，但是能够看到黑色内容背景的结束并不是特别好看。

Answer 1

加入你的身体：

height: auto;

Answer 2

试试这个

body {
   min-height: 100%;
}

Answer 3

你应该使用

html{
   background: url(../images/background.jpg) repeat center center fixed; 
   height:100%;
}

使用

body{
   height:100%;
}

可能不够好，因为那将是相对于不是100％的html;

编辑：要回答您的滚动部分，您必须添加background:repeat。

Answer 4

尝试在您的身体标签上使用此属性

body {
    overflow:hidden;
}

使html主体足够内容的内容

4 个答案: