1

Если сузить окно меньше, чем на 1000px, появится горизонтальный скролл, если его подвинуть то видно, что div растягивает body больше, чем область видимости, но header не растягивается вслед за ним. Как это можно исправить?

https://jsfiddle.net/z2rrrcf3/2/

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
}

header {
  background-color: #000;
  display: block;
  align-self: stretch;
  min-width: 110px;
  width: 100%;
  height: 100px;
}

div {
  background-color: lightcoral;
  width: 1000px;
  height: 100px;
  height: 100px;
}
<header></header>
<div></div>

3
  • убрать у div width: 1000px;
    – soledar10
    1 июл 2017 в 14:14
  • Нет, контент фиксированный
    – Fangog
    1 июл 2017 в 14:27
  • @media screen and (min-width: 900px){ ....}
    – SVE
    1 июл 2017 в 15:03

2 ответа 2

1

Вариант 2

Здесь добавлен внешний <div>

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
}

header {
  background-color: #000;
  display: block;
  align-self: stretch;
  min-width: 110px;
  width: 100%;
  height: 100px;
}


div {
  background-color: lightcoral;
  width: 1000px;
  height: 100px;
  height: 100px;
}
<div>
<header></header>
<div></div>
</div>

1

Вариант 1

Добален абсолютный размер width: 819px

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
}

header {
  background-color: #000;
  display: block;
  align-self: stretch;
  min-width: 110px;
  width: 819px;
  height: 100px;
}

div {
  background-color: lightcoral;
  width: 1000px;
  height: 100px;
  height: 100px;
}
<header></header>
<div></div>

2
  • А как это работает?
    – Fangog
    2 июл 2017 в 11:35
  • что конкретно?.
    – code211218
    2 июл 2017 в 12:17

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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