Question

我的页面上有一个背景图片，我试图在所有内容的后面放置一个色块，但使背景图片在页边空白处可见。

如何获取它到达页面的顶部和底部？

我已经在我的所有内容周围放置了一个<div>标签，除了转角处的徽标图片，像这样（请让我知道是否有不清楚的地方）：

<head>
    <meta charset="utf-8">
<title>Services</title>
<link href="Coppermug Stylesheet Services.css" rel="stylesheet" type="text/css">
    </head>

    <div>
        <a class="home-logo" href="EXAMPLE.html"><img src="EXAMPLE" id=bannerlogo></a>
     </div>

    <div class="white-background">
    <div class="navbar" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
  <a class="nav-link" href="EXAMPLE.html">Home</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="EXAMPLE.html">Services</a>
</li>
          <li class="nav-item">
            <a class="nav-link" href="EXAMPLE.html">About Us</a>
          </li>
<li class="nav-item">
  <a class="nav-link" href="EXAMPLE.html">Contact</a>
</li>
   </div>
</div>


html {
    background-image: url("../Final Logo Assets/Minimized/Blur Mug-min Opacity-min.jpg");
    background-repeat: no-repeat;
  background-size: cover;
}   


.white-background {
    background-color: #FFFFFF; 
    margin-right: 20%;
    margin-left: 20%;
}

http://oi68.tinypic.com/21aal2d.jpg

Answer 1

我没有完全了解您要执行的操作，但是在大多数情况下，如果您希望某项内容从页面的顶部延伸到底部，则可以尝试height: 100%或height: 100vh ，vh指的是视口高度，占屏幕高度的100％。

此外，对html标签使用背景图片也是一种不好的做法，我建议您使用包装div并在该div上使用背景。

如果要使用100vh，请使用CSS的calc函数，但必须减去导航栏的高度。

示例：如果导航栏为50px，则必须使用height: calc(100vh - 50px)

Answer 2

1。）您需要对元素本身及其所有父元素使用height: 100%;，以获取百分比的高度参考。

2。）将margin: 0添加到body和html以避免默认边距。

3。）在您的margin-bottom元素上添加一个微小的（1px）顶部和.white-background，以避免其子元素的边距折叠而在其顶部和底部造成边距

4。）我想您的徽标具有绝对位置-如果没有，请添加它。

html {
  background-image: url("https://placehold.it/800x1200/fa0");
  background-repeat: no-repeat;
  background-size: cover;
}

html,
body {
  height: 100%;
  margin: 0;
}

.white-background {
  background-color: #FFFFFF;
  margin-right: 20%;
  margin-left: 20%;
  height: 100%;
  padding: 1px 0;
}

.home-logo {
  position: absolute;
}

<div>
  <a class="home-logo" href="EXAMPLE.html"><img src="https://placehold.it/100x30/af0" id=bannerlogo></a>
</div>

<div class="white-background">
  <div class="navbar" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="EXAMPLE.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="EXAMPLE.html">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="EXAMPLE.html">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="EXAMPLE.html">Contact</a>
      </li>
  </div>
</div>

Answer 3

HTML和Body标记是某些浏览器中它们内部内容的大小，它们是视口大小，但是您可以覆盖所应用的默认CSS规则。解决此问题的最简单方法是将<html>标签设置为视口大小。

CSS：

html{
   postion:absolute;
   top:0px;
   left:0px;
   right:0px;
   bottom:0px;
   overflow:auto;
   background:blue; /* this would be your background setup */
}

试图使背景色块到达屏幕的顶部和底部

3 个答案: