0

К примеру есть такая html-разметка:

<div class='wrap'>
 <div class='nav'></div>
 <div class='section>
  <div class='section__top'>

   <div class='section__top__item><img></div>
   <div class='section__top__item><img></div>
   <div class='section__top__item><img></div>
  </div>

  <div class='section__bottom>
   <div class='section__bottom__item> </div>
  </div>
 </div>
</div>

При этом изображения в блоках верхней секции тоже должны растягиваться на высоту родителя .
Как сделать так, чтобы .nav блок занимал 10% ширины и был всегда на всю высоту окна браузера, а .section__bottom .section__top, всегда занимали по 50% высоты окна браузера, не зависимо от разрешения экрана ? И возможно ли это сделать без позиционирования, чтобы было больше статики с переходом в адаптивность ?

3
  • 1
    а что вы понимаете под позиционированием? и какие альтернативы позиционированию вы знаете?
    – MasterAlex
    13 мая 2016 в 6:25
  • 1
    jsfiddle.net/soledar10/1dmsp221
    – soledar10
    13 мая 2016 в 6:58
  • Под позиционированием я понимаю свойства группы position.<br> soledar10, спасибо, попробую, может поможет
    – SvArt713
    13 мая 2016 в 7:16

1 ответ 1

0

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

.wrap {
  overflow: hidden;
}

.nav,
.section {
  font-size: 16px;
  height: 100vh;
}

.nav {
  padding: 20px;
  width: 10vw;
  background: #ccc;
  float: left;
}

.section {
  background: #ddd;
  margin-left: 10vw;
}

.section__top,
.section__bottom {
  height: 50vh;
  padding: 20px;
}

.section__bottom {
  background: #999;
}
<div class='wrap'>
  <div class='nav'>nav</div>
  <div class='section'>
    <div class='section__top'>
      section__top
    </div>
    <div class='section__bottom'>
      section__bottom
    </div>
  </div>
</div>

1
  • Спасибо, все работает )
    – SvArt713
    17 мая 2016 в 6:49

Ваш ответ

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

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