сделать баннер вверх по шкале вниз - PullRequest
Новая
       0

сделать баннер вверх по шкале вниз

0 голосов
/ 29 мая 2018

У меня проблемы с созданием моих баннеров вверх и вниз по шкале моей веб-страницы, чтобы они всегда умещались на экране пользователя, поэтому у меня нет горизонтальных полос прокрутки, что плохо для мобильных телефонов, как и для настольных компьютеров, так что вот код: 

<!DOCTYPE html>
<html>

<head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">      
      <style type="text/css">
      body {
              background-image: url("TBG_02.jpg");
              background-color: #cccccc;
              background-size: cover;
              background-repeat: no-repeat;
           }
        #top,#bottom{width:100%;}
        #top,#bottom{height:155px;}
        #top{position: fixed;left:0;top:0;}
        #bottom{position: fixed;right:0;bottom:0;}
        .topp{background-image: url("BG_02.png");background-repeat: no-repeat;background-size: cover;}
        .bottomm{background-image:url("BG_03.png");background-repeat: no-repeat;position:fixed;background-size: cover;}
      </style>
</head>

<body>
<div id="top" class="topp">
</div>
<div id="bottom" class="bottomm">
</div>   
</body>

Вот как выглядит проблема: https://imgur.com/a/WscYr3D - вы также можете заметить плохое серое / белое пространство на фотографии. Примечание: я добавлю несколькоизображения в виде кнопок над баннерами, есть идеи?

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

Ваш ответ был классным, но он создавал некоторые проблемы, поэтому ваш ответ пропустил только то, что в div нет изображения, которое могло бы отображаться на баннерах, тогда мне пришлось установить их ширину и высоту и поиграть с ними.их немного, пока не исправлю: D 

<body>
  <div class="top">
    <img src="BG_02.png" class="top"/>
  </div<
</body>
0 голосов
/ 29 мая 2018

Ваш подход в основном обоснован в использовании: 

background-size: cover;

, чтобы гарантировать, что браузер изменяет размер изображения, чтобы охватить все <body>.

Чего вам не хватает, хотя,является то, что высота тела не охватывает всю высоту области просмотра.

Чтобы исправить это, вы можете добавить: 

body {min-height: 100vh;}

т.е.. высота тела не должна быть меньше 100% высоты области просмотра (или 100 высота области просмотра единиц).

Рабочий пример: 

body, .top, .bottom {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

body {
min-height: 100vh;
background-color: rgb(204, 204, 204);
background-image: url('https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg');
}
         
.top, .bottom{
position: fixed;
width: 100%;
height: 45px;
background-color: rgb(0, 0, 0);
}

.top{
top: 0;
left: 0;
}

.bottom{
bottom: 0;
right: 0;
}
<div class="top"></div>
<div class="bottom"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...