Question

我的网站顶部有一个部分，其中包含背景图片和底部带有黑色条带的文字，以便将来能够嵌入视频等（请参阅更多信息/请参阅我们的showreel）。我刚刚修改了一些样式，现在黑色条带不会延伸到整个页面。它之前工作它不起作用，我不能让它回去。任何人都可以看到可能导致这种情况的原因吗？

body {
	font-family: "Merriweather Sans", sans-serif !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	color: #333333;
}


body {
  
  margin: 0 auto 0 auto;
  
}

.container {
    margin: auto;
    max-width: 100%;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

section#topimageagency {

    height: 400px;
   
    background: url('http://localhost:8888/wp-content/uploads/2017/07/VIDEO.jpg') center center no-repeat;
    background-size: 100%;
    background-position: center;
    overflow: hidden;

    position: relative;
}


section#topimageagency .showreel {
  height: 50px;
  max-width: 100% !important;
  position: absolute;
  background-color: black;
  bottom: 0;
  padding: 0 30px;
  justify-content: space-between !important;
}

section#topimageagency .showreel, .showreel > div.seemore {
    display: flex;
    align-items: center !important;
    justify-content: flex-start !important;
    flex:1;
}
 section#topimageagency .showreel, .showreel > div.seeour {
    justify-content: flex-end;
    flex:1;
    display: flex;
    align-items: center;
}

section#topimageagency .showreel p {
  font-size: 15px;
  font-weight: normal;
  margin: 0;
  padding-left: 10px;
  color: #ffffff;
}

.showreel i {
  color: #ffffff;
}

.seemore  {
  margin-left: 30px !important;
}


 .seeour i {
  margin-right: 30px !important;
}

#topimageagency a {
  text-decoration: none;
  color: #FFFFFF;
/*   position: static; */
  float: right;
  background-color: #000000;
  padding:5px;
  padding-left:10px;
  padding-right: 10px;
  width:auto;
  white-space: nowrap;
}




section#agency .text {
  float: left !important;
  margin-top: 50px;
  margin-bottom: 50px;
  left: 100px;
}

.text p {
  font-size: 10px;
  color: #FFFFFF;
}

.text h1, h2 {
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  border: 0;
}

.text h2 {
  line-height: 5px;
  font-size: 25px;
  font-weight: 200;
}

.text h1 {
  font-size: 50px;
  margin-bottom: 40px;
}

<section id="topimageagency">
        <div class="container">
            <a href="http://localhost:8888/products/">
                I'm a business
            </a>
            <div class="text">
                <h2>VIDEO & ANIMATION</h2>
                <h1>FOR AGENCY</h1>
                <p><?php the_field('agency_img_paragraph'); ?></p>
            </div>

        </div>
        <div class="container showreel">
            <div class="seemore">
                <span class="fa-stack fa-lg">
                    <i class="fa fa-circle fa-stack-2x" style="color:#fff"></i>
                    <i class="fa fa-chevron-down fa-stack-1x" style="color: #000000;"></i>
                    </span>
                <p>SEE MORE</p>
            </div>
            <div class="seeour">
                <p>SEE OUR SHOWREEL</p>
                <i class="fa fa-play-circle fa-3x" aria-hidden="true"></i>
            </div>
        </div>
    </div>
</section>

Answer 1

对于整个页面的底部条带：

 .showreel{
width:100vw;
}

Answer 2

为条带提供width: 100%;属性

CSS - 跨页面的容器传播

2 个答案: