Question

我有一个页面，导航栏固定在顶部。

我还有一个背景图片，使用position: absolute覆盖整个页面。这工作正常，直到我在主页面中添加了更多div。当div超过窗口高度时，背景不会覆盖底部：

这里是没有太多div的小提琴：Fiddle

这里的人太多＆＃39; divs Fiddle

出现滚动时，背景不会覆盖可滚动区域。我该如何应对？

Answer 1

如果您希望在滚动页面内容的其余部分时背景位于同一位置，则应使用position:fixed。

Answer 2

看起来在基于弹性的布局中可能是可行的，并将背景移动到.main元素。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  flex: 1;
  background-image: url('https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-repeat: no-repeat;
  background-position: top;
  background-size:cover;
}

.box {
  height: 150px;
  width: 150px;
  background-color: grey;
  margin:10px auto;
  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<div class="main">

  <div class="box">
    Bla bla
  </div>
  <div class="box">
    Bla bla
  </div>
  <div class="box">
    Too much
  </div>
  <div class="box">
    Too much
  </div>
</div>

Answer 3

将背景图像添加到正文样式

body{
background-image: url('https://images.pexels.com/photos/255379/pexels-photo- 
255379.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');

}

fiddle

Answer 4

你应该增加背景的高度，但这会失真。页面设置在特定高度和位置时，背景无法随页面移动。可能重新排列div以适应高度。

覆盖所有页面与背景的困难

4 个答案: