Question

我正在构建一个应该是全屏的移动网站，但是当在移动设备上加载时，页面右侧会有一个白色的带。

我将边距和填充设置为0，父容器似乎是100％，但仍然有一个乐队。任何帮助将不胜感激。

* {margin:0;padding:0}
html, body {height:100%;width:100%}

.content {
  width: 100%;
  height: 100%;
}

.BaseRectangle {
  width: 100%;
  height: 10%;
  background-color: #a7e6e0;
}

.Gradient_Rectangle {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0), #000000);
}

.mainCarousel {
  width: 100%;
  height: 26.1%;
}

.BottomContainer {
  position: relative;
  top: 0%;
  width: 100%;
  height: 30%;
}

.Bottom-Links {
  position: relative;
  height: 5%;
  font-family: Quicksand;
  font-size: 3vw;
  letter-spacing: -0.3px;
  text-align: left;
  color: #100119;
  top: -45%;
  left: 28%;
}

<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<div class="content">

  <!--Header Content-->
  <div class="BaseRectangle"> 
    <!--Logo-->
    <div class="Gradient_Rectangle"> 

    </div>

  </div>

  <!--Begin main Carousel-->
  <div id="mainCarousel" class="carousel slide" data-ride="carousel">

  </div> <!-- added the closing tag, you probably would have it here -->
  <!--End main Carousel-->

  <div class="BottomContainer">

    <div class="Bottom-Links">
      Contact &nbsp;&nbsp;| &nbsp;&nbsp;Case studies &nbsp;&nbsp;| &nbsp;&nbsp;Legal
    </div>

  </div>
<!--Contact Section-->

<!--End content-->
</div>

奇怪的是，当页面加载时，似乎全屏显示不到一秒钟但突然收缩。

CSS宽度：100％;没有填充屏幕

0 个答案: