Пустое пространство под сайтом при масштабировании

@katerinna · Регистрация: 17.10.2017

Author24 — интернет-сервис помощи студентам

Не могу понять, почему при масштабировании сайта под ним образуется пустое пространство. Помогите, пожалуйста, разобраться.

HTML5

<body lang="ru" overflow="hidden">
 
   <div class="verx"></div>
   <div class="niz"></div> 
 
   <div class="osn"> 
        <header>
                <div class="logo">Логотип</div>
                <div class="menu">Меню</div>
                <div class="text">Текст</div>
 
        </header>
        <main>
                <div class="blok1">Текст</div>
                <div class="blok2">Текст</div>
                <div class="blok3">Текст</div>
                <div class="blok4">Текст</div>
                <div class="blok5">Текст</div>
                <div class="blok6">Текст</div>
                <div class="blok7">Текст</div>
                <div class="blok8">Текст</div>
        </main>
        <footer>
                <div class="blok9">Подвал сайта</div>
        </footer>
    </div>
 
  </body>

CSS

html {
    margin:0px;
    padding:0px;
}
 
body {
    width: 100%;
    overflow: auto;
    margin: 0px;
    padding:0px;
  }
  
.verx {
  position: absolute; 
  width: 100%; 
  height: 250px; 
  top: 100px; 
  background: #FFFF00 /*url(тут будет картинка)*/; 
  background-repeat: no-repeat; 
  background-size: cover; 
  background-position: center; 
  background-attachment: fixed;
}
 
.niz {
  position: absolute; 
  width: 100%; 
  height: 200px; 
  top: 1400px; 
  background: #FFFF00 /*url(тут будет картинка)*/;   
  background-repeat: no-repeat; 
  background-size: cover; 
  background-position: center; 
  background-attachment: fixed;
}
 
.osn {
  position: relative; 
  width: 980px; 
  min-height: 100%; 
  top: 0px; 
  padding-bottom: 0; 
  margin: 0 auto;
}
 
.logo {
  position: absolute;
  width: 200px;
  height: 100px;
  top: 0px;
  left: 0px;
  text-align: center;
  background: #00FF7F /*url(тут будет картинка)*/;
}
 
.menu {
  position: absolute; 
  width: 780px; 
  height: 100px; 
  top: 0px; 
  left: 200px; 
  text-align: center;
  background-color: #90EE90; 
}
 
.text {
  position: absolute; 
  width: 400px; 
  height: 250px; 
  top: 100px; 
  left: 0px; 
  text-align: center;
  background-color: rgba(255, 255, 255, 0.6); 
}
 
.blok1 {
  position: absolute;  
  width: 398px; 
  height: 198px; 
  top: 350px; 
  left: 0px; 
  text-align: center; 
  border: 1px solid #00FF7F;
  background-color: #E0FFFF;
}
 
.blok2 {
  position: absolute;  
  width: 580px; 
  height: 200px; 
  top: 350px; 
  left: 400px; 
  text-align: center;
  background-color: #D3D3D3;
}
 
.blok3 {
 position: absolute; 
 width: 150px; 
 height: 150px; 
 top: 550px; 
 left: 250px; 
 text-align: center;
 background-color: #A9A9A9;  
}
 
.blok4 {
  position: absolute;  
  width: 430px; 
  height: 200px; 
  top: 550px; 
  left: 400px; 
  text-align: center;
  background-color: #ADFF2F;
}
 
.blok5 {
  position: absolute; 
  width: 698px; 
  height: 248px; 
  top: 750px; 
  left: 0px; 
  text-align: center; 
  border: 1px solid #00FF7F;
  background-color: #E0FFFF; 
}
 
.blok6 {
  position: absolute; 
  width: 150px; 
  height: 150px; 
  top: 1000px; 
  left: 500px; 
  text-align: center;
  background-color: #ADFF2F; 
}
 
.blok7 {
  position: absolute; 
  width: 330px; 
  height: 300px; 
  top: 1000px; 
  left: 650px; 
  text-align: center;
  background-color: #D3D3D3; 
}
 
.blok8 {
  position: absolute; 
  width: 500px; 
  height: 250px; 
  top: 1150px; 
  left: 150px; 
  text-align: center;
  background-color: #98FB98; 
}
 
.blok9 {
  position: absolute; 
  width: 980px; 
  height: 200px; 
  top: 1400px; 
  left: 0px; 
  border: 1px solid #FF00FF; 
  text-align: center;
}

Пустое пространство под сайтом при масштабировании

@AlexZaw · 17.10.2017, 16:37

Имеется ввиду маштабирование колесиком в браузере? Просто контента не хватает вот и появляется белая полоса. Ну и плюс у вас все элементы жестко спозиционированы, и у всех ограничена высота

@katerinna · 17.10.2017, 16:46 **[ТС]**

Да, колесиком в браузере, мне почему-то показалось что это не правильно, но видимо все нормально) А в таком варианте страницы, если изменить параметры высоты, возможно сделать так, чтобы внизу не появлялось белое пространство?

@AlexZaw · 17.10.2017, 16:57

В таком варианте если только высоты элементов увеличивать, но это бредовая идея. Есть мониторы с разрешением 2к+, есть еще вертикальные мониторы. Под все не подгонишь. Да и смысла в этом никакого, зачем это делать? Кто будет уменьшать масшат до такой степени что сайт станет нечитаемым? Даже если уменьшат то никакого криминала в этой полосе нет.
Вот такая верстка это плохо, а полоса - естественное явление

@katerinna · 17.10.2017, 17:04 **[ТС]**

Ясно, спасибо за помощь)

@AlexZaw Модератор 2277 / 1657 / 651 Регистрация: 07.08.2016 Сообщений: 3,972
	17.10.2017, 16:37	2
	Имеется ввиду маштабирование колесиком в браузере? Просто контента не хватает вот и появляется белая полоса. Ну и плюс у вас все элементы жестко спозиционированы, и у всех ограничена высота 1

@katerinna 0 / 0 / 0 Регистрация: 17.10.2017 Сообщений: 6
	17.10.2017, 16:46 [ТС]	3
	Да, колесиком в браузере, мне почему-то показалось что это не правильно, но видимо все нормально) А в таком варианте страницы, если изменить параметры высоты, возможно сделать так, чтобы внизу не появлялось белое пространство? 0

@AlexZaw Модератор 2277 / 1657 / 651 Регистрация: 07.08.2016 Сообщений: 3,972
	17.10.2017, 16:57	4
	В таком варианте если только высоты элементов увеличивать, но это бредовая идея. Есть мониторы с разрешением 2к+, есть еще вертикальные мониторы. Под все не подгонишь. Да и смысла в этом никакого, зачем это делать? Кто будет уменьшать масшат до такой степени что сайт станет нечитаемым? Даже если уменьшат то никакого криминала в этой полосе нет. Вот такая верстка это плохо, а полоса - естественное явление 1

@katerinna 0 / 0 / 0 Регистрация: 17.10.2017 Сообщений: 6
	17.10.2017, 17:04 [ТС]	5
	Ясно, спасибо за помощь) 0