How to make this Header Content Footer layout using CSS

Question

Header                                                                                              Content                                                                                             Footer                                     I would like to make this UI  and each is a div  The header height is 30px  And the footer is 30px  But I don t know the content height  I need to use the user frame to calculate    The total height should be 100     Can I do it in pure CSS

User · Answer

Try this   CSS   header      height 30px     Content      height  100        overflow  auto      padding-top  10px      padding-bottom  40px     Footer      position  relative      margin-top  -30px     negative value of footer height        height  30px      clear both      HTML     lt body gt       lt div class  Header  gt Header lt  div gt       lt div class  Content  gt Content lt  div gt       lt div class  Footer  gt Footer lt  div gt     lt  body gt

User · Answer

Here is how to to that   The header and footer are 30px height   The footer is stuck to the bottom of the page   HTML    lt div id  header  gt   lt  div gt   lt div id  content  gt   lt  div gt   lt div id  footer  gt   lt  div gt    CSS    header       height  30px     footer       height  30px      position  absolute      bottom  0    body       height  100       margin-bottom  30px      Try it on jsfiddle  http   jsfiddle net Usbuw

User · Answer

Try This   lt  DOCTYPE html gt    lt html gt    lt head gt    lt title gt Sticky Header and Footer lt  title gt    lt style type  text css  gt      Reset body padding and margins     body       margin 0       padding 0        Make Header Sticky      header container        background  eee       border 1px solid  666       height 60px       left 0       position fixed       width 100        top 0      header        line-height 60px       margin 0 auto       width 940px       text-align center        CSS for the content of page  I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content      container        margin 0 auto       overflow auto       padding 80px 0       width 940px       content          Make Footer Sticky      footer container        background  eee       border 1px solid  666       bottom 0       height 60px       left 0       position fixed       width 100       footer        line-height 60px       margin 0 auto       width 940px       text-align center       lt  style gt    lt  head gt    lt body gt    lt  -- BEGIN  Sticky Header -- gt   lt div id  header container  gt        lt div id  header  gt          Header Content      lt  div gt    lt  div gt   lt  -- END  Sticky Header -- gt    lt  -- BEGIN  Page Content -- gt   lt div id  container  gt        lt div id  content  gt               content          lt br   gt  lt br   gt              blah blah blah                    lt  div gt    lt  div gt   lt  -- END  Page Content -- gt    lt  -- BEGIN  Sticky Footer -- gt   lt div id  footer container  gt        lt div id  footer  gt           Footer Content       lt  div gt    lt  div gt    lt  -- END  Sticky Footer -- gt    lt  body gt    lt  html gt

User · Answer

Using flexbox  this is easy to achieve   Set the wrapper containing your 3 compartments to display  flex  and give it a height of 100  or 100vh  The height of the wrapper will fill the entire height  and the display  flex  will cause all children of this wrapper which has the appropriate flex-properties  for example flex 1   to be controlled with the flexbox-magic   Example markup    lt div class  wrapper  gt       lt header gt I m a 30px tall header lt  header gt       lt main gt I m the main-content filling the void  lt  main gt       lt footer gt I m a 30px tall footer lt  footer gt   lt  div gt    And CSS to accompany it    wrapper       height  100vh      display  flex          Direction of the items  can be row or column        flex-direction  column     header  footer       height  30px     main       flex  1      Here s that code live on Codepen  http   codepen io enjikaka pen zxdYjX left  You can see more flexbox-magic here  http   philipwalton github io solved-by-flexbox   Or find a well made documentation here  http   css-tricks com snippets css a-guide-to-flexbox   -- Old answer below --  Here you go  http   jsfiddle net pKvxN    lt  DOCTYPE html gt   lt html gt   lt head gt   lt meta charset utf-8   gt   lt title gt Layout lt  title gt   lt  -- if IE  gt     lt script src  http   html5shiv googlecode com svn trunk html5 js  gt  lt  script gt   lt   endif -- gt   lt style gt    header       height  30px      background  green        footer       height  30px      background  red       lt  style gt   lt  head gt   lt body gt     lt header gt       lt h1 gt I am a header lt  h1 gt     lt  header gt     lt article gt       lt p gt        Lorem ipsum dolor sit amet  consectetur adipiscing elit  Fusce a ligula dolor       lt  p gt     lt  article gt     lt footer gt       lt h4 gt I am a footer lt  h4 gt     lt  footer gt   lt  body gt   lt  html gt    That works on all modern browsers  FF4   Chrome  Safari  IE8 and IE9

User · Answer

After fiddling around a while I found a solution that works in  IE7  Chrome  Firefox   http   jsfiddle net xfXaw           margin 0      padding 0     html  body       height 100       wrap       min-height 100        header       background  red      content       padding-bottom  50px      footer       height 50px      margin-top -50px      background  green      HTML    lt div id  wrap  gt       lt div id  header  gt header lt  div gt       lt div id  content  gt Lorem ipsum dolor sit amet  consectetuer adipiscing elit  Aenean commodo ligula eget dolor  Aenean massa  Cum sociis natoque penatibus et magnis dis parturient montes  nascetur ridiculus mus  Donec quam felis  ultricies nec  pellentesque eu  pretium quis  sem  Nulla consequat massa quis enim  Donec pede justo  fringilla vel  aliquet nec  vulputate eget  arcu  In enim justo  rhoncus ut  imperdiet a  venenatis vitae  justo  Nullam dictum felis eu pede mollis pretium  Integer tincidunt  Cras dapibus  Vivamus elementum semper nisi  Aenean vulputate eleifend tellus  Aenean leo ligula  porttitor eu  consequat vitae  eleifend ac  enim  Aliquam lorem ante  dapibus in  viverra quis  feugiat a  tellus  Phasellus viverra nulla ut metus varius laoreet  Quisque rutrum  Aenean imperdiet   lt  div gt   lt  div gt   lt div id  footer  gt footer lt  div gt

[css] How to make this Header/Content/Footer layout using CSS?

Examples related to css