0

Объясните пожалуйста: почему при уменьшении окна браузера .main-container не занимает всю его высоту?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans";
  list-style: none;
}

html,
body {
  height: 100vh;
}

body {
  background: #f9f9f9;
}

.main-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 1060px;
  min-height: 100%;
  margin: 0 auto;
  /*margin-left: calc(50% - 530px); */
  padding: 36px 46px;
  background: #fff;
  box-shadow: 0px 0px 2.5px rgba(0, 0, 0, 0.3);
}

.logo {
  font-size: 49px;
  font-weight: 600;
}

.logo a {
  text-decoration: none;
  color: #333;
  letter-spacing: -3px;
}


/* TOP NAVIGATION*/

.navigation {
  width: 100%;
  height: 40px;
  margin: 28px 0;
  word-spacing: -1em;
  background-image: linear-gradient(0deg, #444343 0%, #5e5e5e 100%);
}

.navigation li {
  display: inline-block;
  line-height: 40px;
}

.navigation a {
  display: block;
  padding: 0 25px;
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: #fff;
  font-size: 15px;
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
  text-shadow: .5px .866px .5px rgba(0, 0, 0, .5);
  transition: .5s all;
}

.navigation a:hover {
  border-right: 1px solid #838383;
  border-left: 1px solid #838383;
  background: linear-gradient(0deg, #2e2e2e 0%, #4a4a4a 100%);
}

.main-nav a {
  width: 144px;
}

.goods-nav a {
  width: 100px;
}

.about-nav a {
  width: 172px;
  text-align: center;
}

.contacts-nav a {
  width: 130px;
  padding: 0 20px;
}


/*END TOP NAVIGATION*/


/*CONTENT*/

.content {
  flex: 1 0 auto;
}

aside,
.goods-description {
  display: inline-block;
}

aside {
  width: 20%;
  vertical-align: top;
}

.goods-description {
  width: 60%;
}


/*END CONTENT*/


/*FOOTER*/

footer {
  flex: 0 0 auto;
  width: 100%;
  height: 40px;
  background: #e1e1e1;
}

footer li {
  display: inline-block;
}
<body>
  <div class="main-container">
    <header>
      <h1 class="logo"><a href="#">Fitness</a></h1>
      <ul class="navigation">
        <li class="main-nav"><a href="#">Главная</a></li>
        <li class="goods-nav"><a href="#">Товары</a></li>
        <li class="about-nav"><a href="#">О_нас</a></li>
        <li class="contacts-nav"><a href="#">Контакты</a></li>
      </ul>
    </header>

    <div class="content">
      <aside>
        <ul class="menu">
          <li><a href="#">Ноутбуки</a></li>
          <li><a href="#">Планшеты</a></li>
          <li><a href="#">Телефоны</a></li>
          <li><a href="#">Телевизоры</a></li>
          <li><a href="#">Бытовая техника</a></li>
          <li><a href="#">Автотовары</a></li>
        </ul>
      </aside>
      <div class="goods-description">
        <img src="img/bysicle.jpg" alt="Велосипед" title="Супервелик">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
    <footer>
      <ul>
        <li class="main-footer"><a href="#">Главная</a></li>
        <li class="goods-footer"><a href="#">Товары</a></li>
        <li class="about-footer"><a href="#">О_нас</a></li>
        <li class="contacts-footer"><a href="#">Контакты</a></li>
        <li class="copyright">2014 &copy; All rights reserved</li>
      </ul>
    </footer>
  </div>

1
  • Проблема в том, что содержимое этого контейнера не помещается во вновь сгенерированные размеры, а оттого и появляется прокрутка вниз (я прочитал вопрос неск. раз, но вроде правильно понял Вашу проблему). И это нормально поведение для web-страницы. Указывая height: 100%; вы практически говорите элементу: ты можешь заниматься столько места по высоте, сколько тебе необходимо. Да, у body вы указали 100vh, но не указали ,как работать в состоянии "переполнения" (overflow) 30 ноя 2019 в 10:27

1 ответ 1

0

Проблема в том, что содержимое этого контейнера не помещается во вновь сгенерированные размеры, а оттого и появляется прокрутка вниз (я прочитал вопрос неск. раз, но вроде правильно понял Вашу проблему). И это нормально поведение для web-страницы.

Указывая height: 100%; вы практически говорите элементу: ты можешь заниматься столько места по высоте, сколько тебе необходимо.

Да, у body вы указали 100vh, но не указали, как работать в состоянии "переполнения" (overflow)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans";
  list-style: none;
}

html,
body {
  height: 100vh;
  /* overflow: scroll; стандартное поведение */
  overflow: hidden;

}

body {
  background: #f9f9f9;
}

.main-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 1060px;
  min-height: 100%;
  margin: 0 auto;
  /*margin-left: calc(50% - 530px); */
  padding: 36px 46px;
  background: #fff;
  box-shadow: 0px 0px 2.5px rgba(0, 0, 0, 0.3);
}

.logo {
  font-size: 49px;
  font-weight: 600;
}

.logo a {
  text-decoration: none;
  color: #333;
  letter-spacing: -3px;
}


/* TOP NAVIGATION*/

.navigation {
  width: 100%;
  height: 40px;
  margin: 28px 0;
  word-spacing: -1em;
  background-image: linear-gradient(0deg, #444343 0%, #5e5e5e 100%);
}

.navigation li {
  display: inline-block;
  line-height: 40px;
}

.navigation a {
  display: block;
  padding: 0 25px;
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: #fff;
  font-size: 15px;
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
  text-shadow: .5px .866px .5px rgba(0, 0, 0, .5);
  transition: .5s all;
}

.navigation a:hover {
  border-right: 1px solid #838383;
  border-left: 1px solid #838383;
  background: linear-gradient(0deg, #2e2e2e 0%, #4a4a4a 100%);
}

.main-nav a {
  width: 144px;
}

.goods-nav a {
  width: 100px;
}

.about-nav a {
  width: 172px;
  text-align: center;
}

.contacts-nav a {
  width: 130px;
  padding: 0 20px;
}


/*END TOP NAVIGATION*/


/*CONTENT*/

.content {
  flex: 1 0 auto;
}

aside,
.goods-description {
  display: inline-block;
}

aside {
  width: 20%;
  vertical-align: top;
}

.goods-description {
  width: 60%;
}


/*END CONTENT*/


/*FOOTER*/

footer {
  flex: 0 0 auto;
  width: 100%;
  height: 40px;
  background: #e1e1e1;
}

footer li {
  display: inline-block;
}
<body>
  <div class="main-container">
    <header>
      <h1 class="logo"><a href="#">Fitness</a></h1>
      <ul class="navigation">
        <li class="main-nav"><a href="#">Главная</a></li>
        <li class="goods-nav"><a href="#">Товары</a></li>
        <li class="about-nav"><a href="#">О_нас</a></li>
        <li class="contacts-nav"><a href="#">Контакты</a></li>
      </ul>
    </header>

    <div class="content">
      <aside>
        <ul class="menu">
          <li><a href="#">Ноутбуки</a></li>
          <li><a href="#">Планшеты</a></li>
          <li><a href="#">Телефоны</a></li>
          <li><a href="#">Телевизоры</a></li>
          <li><a href="#">Бытовая техника</a></li>
          <li><a href="#">Автотовары</a></li>
        </ul>
      </aside>
      <div class="goods-description">
        <img src="img/bysicle.jpg" alt="Велосипед" title="Супервелик">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
    <footer>
      <ul>
        <li class="main-footer"><a href="#">Главная</a></li>
        <li class="goods-footer"><a href="#">Товары</a></li>
        <li class="about-footer"><a href="#">О_нас</a></li>
        <li class="contacts-footer"><a href="#">Контакты</a></li>
        <li class="copyright">2014 &copy; All rights reserved</li>
      </ul>
    </footer>
  </div>

3
  • Спасибо за подсказку. Единственный минус в таком способе, что нет полосы прокрутки. Т.е. нет возможности посмотреть что там ниже. Я немного поигрался с данным свойством и прописал для .main-container{oveflow: scroll}. Не знаю на сколько это корректно, так как полоса прокрутки появилась на контейнере, но верстка при этом уже не ломается)
    – Yaroslav
    1 дек 2019 в 11:40
  • Или более корректный вариант задать min-height по высоте контента?
    – Yaroslav
    1 дек 2019 в 11:49
  • @Yaroslav а чем Вам это поможет? Либо у Вас не правильно изложена проблема. .main-container - у вас главный родительский элемент, а его высоте можно лишь "догадываться" (обычно), если же у Вас не планируется динамический вывод контента. Если Вам нужно, чтобы при дефиците контента это контейнер всё равно был "на всю высоту экрана", просто пропишите ему min-height: 100vh; 1 дек 2019 в 13:16

Ваш ответ

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

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