HTML ширина при 100% переполнении - PullRequest
Новая
       20

HTML ширина при 100% переполнении

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

Я пытаюсь установить ширину контейнера на 100% страницы. Само по себе все в порядке, но как только я добавляю в контейнер еще один элемент <div>, он переполняется, и страница становится прокручиваемой. Я не знаю, что не так, потому что я не менял настройки отступов и полей.

РЕДАКТИРОВАТЬ: проблема, похоже, возникает только на chrome.

РЕДАКТИРОВАТЬ №2: Некоторые люди сказали мне, что у них не было той же проблемы на их стороне, поэтому я загрузил файлы проекта и снимок экрана с тем, что я вижу на моем диске Google:

Файлы проекта 

/* this is my css: */

body {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  background-color: steelblue;
}

#mainContainer {
  width: 100%;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.genContainer {
  width: 50%;
  display: flex;
  justify-content: center;
}

.square {
  width: 5%;
  border: 1px solid black;
}

.circle {
  width: 5%;
  border: 1px solid black;
  border-radius: 50%;
}
<body>
  <div id="mainContainer">

    <div class="genContainer">

      <div class="person square"></div>

    </div>

  </div>
</body>

Спасибо!

Ответы [ 2 ]

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

Отключить отступы или поля, добавленные браузером. Некоторые браузеры по умолчанию добавляют css на вашу страницу HTML. Запишите это как первое правило стиля: 

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

Это приведет к сбросу полей и отступов всех элементов на 0, и поэтому позже в css вы можете переопределить его.

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

Измените это: 

#mainContainer {
    width: 100%;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

На это: 

#mainContainer {
    max-width: 100%; /*This limits the container to be 100% regardless of what's within it*/
    border: 1px solid black;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...