我在这里发现了一个帖子，其中以前曾问过同样的问题。我实现了那里建议的解决方案，它在 Chrome 和 Firefox 上运行良好。但当我在 Safari 和 Opera 上测试它时，我最终得到了一个很长的水平滚动条。我不知道如何修复它，因为我已经将 using Overflow-x: hide 添加到正文中。您可以看到它的实际效果 here .
HTML
<div class="container">
<div class="level"></div>
<div class="level purple"></div>
<div class="level"></div>
</div>
CSS
html, body {
overflow-x: hidden;
}
.container {
width:960px;
margin: 0 auto;
border:1px solid black;
}
.level {
height:100px;
background: #bada55;
}
.purple {
position: relative;
background: #663399;
}
.purple:before,
.purple:after {
content: "";
position: absolute;
background: #663399; /* Match the background */
top: 0;
bottom: 0;
width: 9999px; /* some huge width */
}
.purple:before {
right: 100%;
}
.purple:after {
left: 100%;
}
最佳答案
我检查了您分享的链接(www.kampuster.com)，发现您的代码存在问题。
问题:
在文件all/themes/bootstrap_kampuster/css/style.css ，您提供了width: 9999px;类(class) .homeBanner:before, .homeBanner:after和.countUpSection:before, .countUpSection:after这是导致整个问题的原因，并且不是正确的方法。
建议: 以下是我建议您采用的方法。 这是pen更好地说明该建议。
.section-first, .section-third {
background-image: url('http://www.kampuster.com/sites/default/files/bannerlogo_babson.jpeg');
background-attachment: fixed;
background-size: cover;
}
.section-first-inner {
background-color: rgba(83, 192, 183, 0.3);
}
.section-first, .section-second, .section-third {
/* this is just to add height inplace of content */
height: 600px;
color: #ffffff;
overflow: hidden;
}
.section-first-inner, .section-second-inner, .section-third-inner {
padding: 20px 20px;
font-size: 18px;
height: 100%;
}
.section-second {
color: #000;
}<link href="http://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML</title>
</head>
<body>
<div class="main-container">
<header id="page-header"></header>
<div class="section-first">
<div class="section-first-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">
Your content for section first goes here
</div>
</div>
</div>
</div>
</div>
<div class="section-second">
<div class="section-second-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">
Your content for section second goes here
</div>
</div>
</div>
</div>
</div>
<div class="section-third">
<div class="section-third-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">Your content for section third goes here</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>关于html - Safari 上 Bootstrap 容器内的全宽背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49482628/