如何删除垂直滚动？

时间：2016-10-10 18:21:26

标签： html css css3 responsive-design flexbox

尝试使用响应式背景图像获得响应式布局，但无法摆脱滚动。尝试了overflow:hidden和不同的背景属性。

<div class="wrap">
    <div class="header">
        <div class="logo-container">
            <a href="#"></a>
        </div>
        <div class="nav-container">
            <ul>
                <li>
                    <span>
                        <img src="svg-icons/about-service.svg" alt="">
                        <a href="#">О сервисе BuyNow</a>
                    </span>
                </li>
                <li>
                    <span>
                        <img src="svg-icons/virt-cards.svg" alt="">
                        <a href="#">Виртуальные дисконтные карты</a>
                    </span>
                </li>
                <li>
                    <span>
                        <img src="svg-icons/buy-now-pay-later.svg" alt="">
                        <a href="#">Покупай сейчас, плати потом</a>
                    </span>
                </li>
            </ul>
        </div>
        <div class="stores-container">
            <a href="#" class="btn-app-store">                  
            </a>
            <a href="#" class="btn-google-play"></a>
        </div>
    </div>      
</div>

<div class="content">
    <div class="bg-content">
        <div class="content-wrap">
            <div class="content-left">
                <div class="content-title">
                    <h1>Buy Now</h1>
                </div>
                <div class="description">
                    <span>Сервис интеллектуальных покупок</span>
                </div>
                <div class="divider-container">
                    <div class="divider-long"></div>
                    <div class="divider-short"></div>
                </div>
                <ul>
                    <li>
                        <img src="svg-icons/round-icon-no-ads-white.svg" width="50" height="50" alt="">
                        <span>Предоставляет выгодные предложения от множества магазинов, учитывая ваши предпочтения</span>
                    </li>
                    <li>
                        <img src="svg-icons/round-icon-wallet-white.svg" width="50" height="50" alt="">
                        <span>Дает возможность <a href="#">отложить оплату</a></span>
                    </li>
                    <li>
                        <img src="svg-icons/round-icon-profitable-offers-white.svg" width="50" height="50" alt="">
                        <span>Не раздражает рекламой</span>
                    </li>
                </ul>
            </div>
            <div class="content-right">
                <img src="img/phone.png" width="226" height="460" alt="">
            </div>
        </div>
    </div>
</div>


<div>
    <div class='container'>
        <span class='pulse-button'>
            <img src="img/orange-arrow-right.png" width="9" height="13" alt="">
        </span>
    </div>
</div>


<footer>
    <div class="footer">
        <div class="copyright">
            <span>&#9400; BuyNow, 2016. Все права защищены</span>
        </div>
        <div class="partners">
            <img src="img/bag.png" alt="">
            <a href="#">Для партнёров</a>
        </div>
    </div>
</footer>

CSS：

html {
overflow-x: hidden; }
.wrap {
margin: 0 auto;
max-width: 1024px; }
/* HEADER */
.header {
max-width: 1024px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 19px 20px; }
@media (max-width: 767px) {
.header {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; } }
@media (max-width: 767px) {
.header .logo-container {
  margin: 0 auto 10px; } }
.header .logo-container a {
display: block;
width: 41px;
height: 41px;
background: url("../svg-icons/logo.svg");
background-size: 41px 41px; }
.header .logo-container a:hover {
  opacity: .5;
  -webkit-transition: .3s ease-out;
  transition: .3s ease-out; }
.header .nav-container ul {
margin-left: 1px;
margin-top: 0px; }
.header .nav-container ul li {
  float: left;
  margin-right: 15px; }
  @media (max-width: 767px) {
    .header .nav-container ul li {
      margin-bottom: 10px; } }
  .header .nav-container ul li span img {
    float: left;
    margin-right: 4px;
    opacity: .5; }
    @media (max-width: 767px) {
      .header .nav-container ul li span img {
        margin-right: 10px; } }
  .header .nav-container ul li span a {
    font-size: 14px;
    line-height: 20px;
    color: #000; }
    .header .nav-container ul li span a:hover {
      color: #fc7622;
      -webkit-transition: .3s ease-out;
      transition: .3s ease-out; }
.header .nav-container ul li:nth-child(1) {
  width: 130px; }
  @media (max-width: 767px) {
    .header .nav-container ul li:nth-child(1) {
      width: 100%; } }
.header .nav-container ul li:nth-child(2) {
  width: 194px; }
  @media (max-width: 767px) {
    .header .nav-container ul li:nth-child(2) {
      width: 100%; } }
.header .nav-container ul li:nth-child(3) {
  width: 170px; }
  @media (max-width: 767px) {
    .header .nav-container ul li:nth-child(3) {
      width: 100%; } }
  @media (min-width: 401px) and (max-width: 768px) {
    .header .nav-container ul li:nth-child(3) {
      width: 270px;
      margin-top: 10px;
      margin-left: 30px; } }
  .header .nav-container ul li:nth-child(3) span img {
    margin-right: 9px; }
  .header .stores-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
    -ms-flex-pack: justify;
        justify-content: space-between;
margin-left: 71px; }
@media (max-width: 767px) {
  .header .stores-container {
    margin-left: 0px; } }
@media (min-width: 769px) and (max-width: 1024px) {
  .header .stores-container {
    margin-left: 55px; } }
@media (min-width: 401px) and (max-width: 768px) {
  .header .stores-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column; } }
.header .stores-container .btn-app-store {
  display: block;
  width: 136px;
  height: 40px;
  margin-right: 20px;
  background: url("../svg-icons/app-store.svg");
  background-size: 136px 40px; }
  .header .stores-container .btn-app-store:hover {
    opacity: .5;
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out; }
.header .stores-container .btn-google-play {
  display: block;
  width: 136px;
  height: 40px;
  background: url("../svg-icons/google-play.svg");
  background-size: 136px 40px; }
  .header .stores-container .btn-google-play:hover {
    opacity: .5;
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out; }

/* FOOTER */
footer .footer {
max-width: 1024px;
height: 40px;
margin: 0 auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
  -ms-flex-pack: justify;
      justify-content: space-between; }
@media (max-width: 767px) {
footer .footer {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center; } }
@media (max-width: 767px) {
footer .footer .copyright {
  margin: 10px auto; } }
footer .footer .copyright span {
margin-left: 18px;
padding-top: 12px;
display: block;
font-size: 12px; }
@media (max-width: 767px) {
  footer .footer .copyright span {
    margin: 10px auto; } }
@media (max-width: 767px) {
footer .footer .partners {
  margin: 10px auto; } }
footer .footer .partners img {
margin-left: -33px;
margin-top: 13px; }
footer .footer .partners a {
font-size: 15px;
color: #000; }
footer .footer .partners a:hover {
  text-decoration: none; }

有三个块：换行，内容和页脚。很简单，但我不知道滚动的原因是什么。现在，我的页面如下所示：https://buzzer-maze.codio.io/

1 个答案:

答案 0 :(得分：0)

尝试隐藏在正文中的特定溢出。

＆＃13;
＆＃13; 
body{
     padding:0px;
     overflow-y: hidden;
     overflow-x: hidden;
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题