2

У меня есть html-код, который я обернул в один блок <div class="container">. Я хотел сделать так, чтобы всё было серым, кроме самого блока container. Вот только его цвет выводится на экран очень странно, постоянно "отставая" от содержимого. Как это исправить? Вот сам код:

body {
  margin: 0;
  padding-top: 10px;
  background-color: #F3F3F3;
}

.container {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px 10px 20px 10px;
}

header {
  height: 75px;
  border-bottom: 2px solid #000;
}

h2 {
  margin-top: 0;
}

a {
  text-decoration: none;
  color: #000;
}

.child {
  display: inline-block;
}

#links {
  float: right;
  margin-top: 3px;
}

#admin {
  position: relative;
  float: right;
  margin-top: 25px;
  margin-right: -190px;
}

main {
  height: 300px;
  padding-top: 3px;
}

aside {
  float: left;
  width: 100px;
  font-size: 20px;
  border-right: 2px solid black;
  margin-right: 20px;
  border-bottom: 2px solid black;
  padding-left: 5px;
  padding-top: 5px;
  margin-top: -3px;
}

aside a {
  display: block;
  margin-bottom: 15px;
}
<div class="container">

  <header>
    <div class="child">
      <h2>Ваше название</h2>
    </div>
    <div id="links" class="child"><a href="#">Администраторы</a> | <a href="#">Выход</a></div>
    <div id="admin">
      <p>Вы - <a href=#>Администратор</a></p>
    </div>
  </header>

  <main>
    <aside>
      <a href="orders.php">Заказы</a>
      <a href="#">Товары</a>
      <a href="#">Отзывы</a>
      <a href="#">Категории</a>
      <a href="#">Клиенты</a>
      <a href="#">Новости</a>
      <a href="#">Сайт</a>
    </aside>
  </main>
</div>

P.S.: заранее спасибо за помощь! Я новичок во фронтенде,так что очень надеюсь, что мой вопрос не слишком глупый.

2
  • Я немного отредактировал ваш вопрос, добавил код в фрагмент кода (его можно запустить). И я не понимаю, о чем вы говорите, могли бы дать больше информации? 5 июн 2021 в 14:55
  • Проблема в том, что после тега <aside> должен генерироваться определенный HTML-код с помощью php. Логично, что данный код увеличивают высоту страницы, и белый фон за этим увеличением "не успевает", т.е. часть нового кода выводится не на белом фоне. Как сделать так, чтобы белый фон двигался вместе с контентом?
    – Arkadiy
    5 июн 2021 в 15:00

1 ответ 1

4

2 момента с ошибками:
• Контент, как Вы выражаетесь "не успевает", потому что вы жестко указали высоту в 300px. Если нужно задавать минимальную — используйте min-width.
• Не используйте float, они устарели. Современный подход в построении сетки — FlexBox (flex и всё что с этим связано). В Вашем примере контент будет обтекать aside (как только aside кончается, контент смещается влево).

body {
  margin: 0;
  padding-top: 10px;
  background-color: #F3F3F3;
}

.container {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px 10px 20px 10px;
}

header {
  height: 75px;
  border-bottom: 2px solid #000;
}

h2 {
  margin-top: 0;
}

a {
  text-decoration: none;
  color: #000;
}

.child {
  display: inline-block;
}

#links {
  float: right;
  margin-top: 3px;
}

#admin {
  position: relative;
  float: right;
  margin-top: 25px;
  margin-right: -190px;
}

main {
  /* Не ограничивайте принудительно высоту */
  /* height: 300px; */
  /* Если надо задать минимальную, используйте min-width */
  min-width: 300px;
  padding-top: 3px;
  /* Используйте flex */
  display: flex;
}

aside {
  /* Не используйте float */
  /* float: left; */
  width: 100px;
  font-size: 20px;
  border-right: 2px solid black;
  margin-right: 20px;
  border-bottom: 2px solid black;
  padding-left: 5px;
  padding-top: 5px;
  margin-top: -3px;
}

aside a {
  display: block;
  margin-bottom: 15px;
}
<div class="container">

  <header>
    <div class="child">
      <h2>Ваше название</h2>
    </div>
    <div id="links" class="child"><a href="#">Администраторы</a> | <a href="#">Выход</a></div>
    <div id="admin">
      <p>Вы - <a href=#>Администратор</a></p>
    </div>
  </header>

  <main>
    <aside>
      <a href="orders.php">Заказы</a>
      <a href="#">Товары</a>
      <a href="#">Отзывы</a>
      <a href="#">Категории</a>
      <a href="#">Клиенты</a>
      <a href="#">Новости</a>
      <a href="#">Сайт</a>
    </aside>
    <div class="content">
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
      <div>Text</div>
    </div>
  </main>
</div>

1
  • Cпасибо большое!
    – Arkadiy
    5 июн 2021 в 15:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.