Реализация макета сайта

360

06 сентября 2017, 13:54

Как реализовать данный макет сайта-многостраничника. Красная область всегда одинаковая(меню и футер), а между ними просто белый фон. А синяя область должна находиться поверх красных и может иметь разную высоту, и в ней меняется контент(home, blog, contacts ...). Буду благодарен, если подскажите примерную структуру разметки страницы.

Answer 1

Последнее время использую структуру типа такой .... не уверен, что правильно воспроизвел, но вроде пока проблем не увидел (не думаю, что тут можно адекватно это показать, проще скопировать к себе и посмотреть). Подобная сетка меняется от проекта к проекту, но для многих "лендингов" и прочего подходит.

body { 
  margin: 0; /* убираем стандартный margin */ 
  background-color: grey; 
} 
 
/* Магия, что бы прижать футер вниз, даже если контента нет */ 
.page { 
  display: table; 
  width: 100%; 
  height: 100%; 
} 
 
.page_row { 
  display: table-row; 
  height: 1%; 
  vertical-align: top; 
} 
 
/* "Строка" в которой контент растягиваем на всю высоту оставшуюся от футера и хедера */ 
.page_row:nth-child(2) { 
  height: 100%; 
} 
 
/* /конец_магии */ 
 
.header, .footer { 
  box-sizing: border-box; 
  height: 200px; 
  border: 1px solid red; 
  background-color: white; 
} 
 
/* 
*  Что бы внутренний margin не влиял на 
*  внешнее расположение родителя 
*/ 
.content { 
  padding: .1px; 
} 
 
.content_inner { 
  position: relative; /* Без этого "нижний блок" родителя будет перекрывать */ 
  box-sizing: border-box; 
  min-height: 200px; 
  max-width: 950px; 
  padding: 25px; 
  margin: -40px auto; /* Что бы контент "залезал" на соседние блоки родителя по вертикали */ 
  background-color: blue; 
}

<div class="page"> 
  <div class="page_row"> 
    <header class="header"></header> 
  </div> 
  <div class="page_row"> 
    <div class="content"> 
      <div class="content_inner"></div> 
    </div> 
  </div> 
  <div class="page_row"> 
    <footer class="footer"></footer> 
  </div> 
</div>