Проблемы с версткой сайдбара

228

16 марта 2017, 20:09

Верстаю макет:

Главная проблема в том, что он должен быть адаптивный, и я не пойму, как сделать, что бы расстояние уменьшалось, если уменьшается высота окна браузера.
Может кто то помочь советом?

Попытка №2:

Ссылки и лого это один блок и он прижат к верху, контакты это еще один блок и он будет прижат к низу. Как для остальных блоков сделать: что бы они занимали все оставшиеся пространство, а их содержимое было по центру.

Answer 1

Тут можно поступить также как и с шириной - через медиа запросы, например:

@media(min-height:401px){
  div{
    color:red;
  }
}
@media(max-height:400px){
  div{
    color:blue;
  }
}

При высоте больше 400px цвет шрифта красный, при высоте меньше - синий.

Answer 2

Вариант 1: Логотип и Футер на position:fixed. Остальное скролится. Что является в общем предпочтительным. Так как что вы сможете сделать на телефоне в положении горизотнальном? Клиент ничего не увидит.

Вариант 2: использовать vh для разметки высоты.

#logo{height:50vh}
#footer{height:100vh;}
#middle{height:calc(100vh - 150vh);}

И дальше уже таким же образом для детей #middle стили писать. Только как выше написал, это нерешит проблему с горизонтальным положением телефона.

Answer 3

Если нужно при изменении положения телефона

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Тут подробнее https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation

Answer 4

body, 
html { 
  height: 100%; 
} 
 
.wrapper { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
  -ms-flex-direction: column; 
  flex-direction: column; 
  height: 100%; 
} 
 
.another { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-flex: 1; 
  -ms-flex: 1 0 auto; 
  flex: 1 0 auto; 
  -webkit-box-align: center; 
  -ms-flex-align: center; 
  align-items: center; 
} 
 
.header, 
.footer { 
  height: 100px; 
} 
 
.footer { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-flex: 0; 
  -ms-flex: 0 0 auto; 
  flex: 0 0 auto; 
  -webkit-box-align: end; 
  -ms-flex-align: end; 
  align-items: flex-end; 
}

<div class="wrapper"> 
  <div class="header">Лого + меню</div> 
  <div class="another"> 
    <div class="some-block"> 
      <p>Остальное</p> 
    </div> 
  </div> 
  <div class="footer">Контакты + копирайт</div> 
</div>

http://codepen.io/deadrime/pen/EWweYK/ - вот мой вариант через flexbox.
Подробнее о том, как его использовать можно почитать тут - http://frontender.info/a-guide-to-flexbox/