@html_profi

Как задать width 100% если на родителе display: table?

Всем привет!
Верстаю адаптивный сайт. Вот кусок разметки

<body>
<div class="box">
  <div class="inner">
    <div class="slider"><div class="slider_wrap">...</div></div>
  </div>
  <div class="footer"></div>
</div>
</body>

Футер(высота не фиксированная) прибил книзу используя
html,
body {
  width: 100%;
  height: 100%;
}
body {
  background: #ffffff;
  font-size: 14px;
  min-width: 300px;
}

.box {
  width: 100%;
  height: 100%;
  display: table;
  overflow: hidden;
}

.inner {
  height: 100%;
  display: table-row;
}

.slider {width: 100%; ...}


но теперь столкнулся с проблемой. если блоку .slider_wrap задать ширину большую ширины страницы, то появляется нижняя полоса прокрутки. если убрать свойства display: table-row; и display: table; то все работает.

Но если блоку .slider задать ширину не в %, а пикселях то все работает отлично, но тогда теряется адаптивность

Как с таким бороться?
  • Вопрос задан
  • 499 просмотров
Решения вопроса 1
AngReload
@AngReload
Кратко о себе
Можно добавить в .box table-layout: fixed;
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы