Question

我几周来一直遇到这个问题现在正在搜索不同的网站而没有解决我的问题。我查看了这个网站，stackoverflow，答案并不完全是我想要的。我最终使用了Forty Seven Media的Making Your Footer Stay Put With CSS并且效果非常好。问题在于屏幕尺寸和div的高度。如果页面很长，看起来真的很好。然而，当内容div与屏幕尺寸相比内容不足时，页面在内容和页脚之间具有空白。当您放大或缩小页面时，您将看到问题。

如何让内容div扩展到页脚，保留我在整个div中的背景？

我制作了虚拟代码来模拟我的网站。图像可以被任何东西替代，这样你就可以看到我在说什么。背景必须非常大。索引和另一个页面是两个具有不同内容的虚拟页面。

HTML在下面。

<!DOCTYPE html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Dummy page</title>
  <link href="../css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="container" class="neo-sans-text">
    <div id="header" class="container-center">
      <a href="../home.html"><img class="hcenter" src="../images/dummy-logo.gif" alt="Waves" /></a>
    </div><!-- end header-->

    <div id="background-container" style=background-image:url("../images/background/Big_wave.jpg")>
      <div id="nav">
        <ul>

          <div class="link-box">
            <li><a href="anotherPage.html">Another Page</a></li>
          </div>

          <div class="link-box">
            <li><a href="index.html">Index</a></li>
          </div>

          <div class="link-box">
            <li><a href="../contactUs.html">Contact Us</a></li>
          </div>

        </ul> 
      </div> <!-- end nav -->

      <div id="content-container">
        <p class="uppercase big-font">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida sed nulla eget eleifend.</p>
      </div> <!-- end content-container -->

      <div id="clearfooter"></div>

      <div id="content-footer">
        © Copyright 2014 Big Waves, LLC
      </div>
    </div> <!-- end background container -->
  </div> <!-- end container -->
</body>
</html>

CSS在下面。

/* CSS Document */
html, body {
    margin:0;
    padding:0;
    height:100%;
    overflow-x:hidden;
}

#container{
    min-height:100%;
    position:relative;
    margin-bottom:-50px;
}

#header{
    padding:1%;
}

#header img{
    height: 80px;
    width: 170px;
}

#background-container{
    background-size:cover;
    background-color:#097;
    padding-left:100px;
    padding-right:100px;
    padding-bottom:20%;
}

#nav li{
    list-style: none;
}

.link-box{
    padding: 10px;
    text-align: left;
}

.link-box a{
    text-decoration: none;
    border: 12px #000;
    padding:5px;
    background: rgba(149, 185, 199, 0.4);
}

#content-container{
    padding-left:230px;
    padding-right:230px;
    clear:both;
}

#content-container table{
    width:200px;
}

#content-container img{
    width:35px;
    height:35px;
}

#clearfooter{
    height:30px;
    clear:both;
}

#content-footer{
    width:100%;
    height:50px;
    position:absolute;
    bottom:0;
    left:0;
    background-color:#099
}

.container-center{
    text-align: center;
}

.element-center{
    display: inline-block;
    padding: 10px;
}

.uppercase{
    text-transform:uppercase;
}

.big-font{
    font-size:28px;
}

我更喜欢仅使用CSS的答案，但其他答案肯定是受欢迎的。欢迎任何建议。提前谢谢！

修改：有多个页面具有不同的内容大小和背景供参考。

Answer 1

background-attachment:fixed;

这会将背景图像保留在屏幕上。

Answer 2

解决方法可能是将整个页面设置为具有页脚所需的背景，然后单独设置页脚上方所有元素的背景。只需让你的页脚有background-color: transparent。

TylerH建议的

编辑。

Answer 3

将背景添加到正文中（顺便说一句，尝试仅将样式添加到CSS，不要使用内联样式）或者如果不能，请使用以下内容：

body{100vh}
header{height:10vh}
#content{height:80vh}
footer{height:10vh}

通过这种方式，您将拥有完整的屏幕，没有空白区域（假设这是您正在寻找的内容），并且您可以将bg添加到您的内容div而没有空格

Answer 4

为了解决这个问题，我将整个身体变成了你想要的颜色，并将标题颜色改为白色。这似乎有效。

body {
    background-color:#097;
}   
#header {
    padding:1%;
    background-color: white;
}

如果需要，可以在此处找到完整文件的链接：

https://www.dropbox.com/s/ofhawycygn2p1tu/Page.html?dl=0

如何在保持图片背景的同时将内容div推送到页脚div

4 个答案: