Sample layout How to implement this layout site multipage. The red area is always the same (menu and footer), and in between is just a white background. And the blue area should be on top of the red ones and can have different heights, and the content in it changes (home, blog, contacts ...). I would be grateful if you tell me the approximate structure of the page markup.

  • That is, even if there is nothing in the blue area, it should still stretch from the header to the footer? - MedvedevDev
  • Stretching depends on the blue area, if there is empty, then there will simply be a header and immediately a footer. But the red overlap is always the same. - Vyacheslav Lamash
  • adaptive? Are there any indentations from the edges of the content area? - MedvedevDev
  • Yes adaptive. The max-width of the gray area is 1020px, the max-width is blue 940px, padding: 25px near the blue. - Vyacheslav Lamash

1 answer 1

I’m using a structure like this lately .... I'm not sure that I reproduced it correctly, but I haven’t seen any problems so far (I don’t think that you can adequately show it here, it's easier to copy to yourself and see). This grid varies from project to project, but for many "landing pages" and other things suitable.

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>