Set auto height and width in CSS HTML for different screen sizes

Question

I have 2 issues with this layout      feature content  grey background  adapt it s height and width to different screen sizes  Right now  on big screens  feature content is far from the footer  There is a horizontal scrollbar that I want to remove regardless to the screen size    I want to   adapt  feature content to the remaining height and remove the horizontal scrollbar   Here is a FIDDLE   And my code    HTML      lt div id  container  gt       lt div id  header  gt Header added just for demonstration purposes lt  div gt       lt div id  content  gt Your content goes here          lt div class  featured content  gt  lt  div gt       lt  div gt   lt  div gt   lt div id  footer  gt Footer here lt  div gt    CSS            padding  0      margin  0      border  0      outline  0    body  html       width 100       min-height  100     div       height 100       width 100       border 5px solid black     header       background-color orange     container       background blue      margin  0 auto      position  relative      height  auto  important     content       background pink      padding-bottom  100px      margin  0 auto      position  relative     footer       bottom  0      box-shadow  0 -1px 2px rgba 0  0  0  0 4       height  70px      left  0      position  fixed      z-index  100000      background green     featured content       min-height  750px      max-height  750px      width 200px      background-color grey      position fixed      margin auto 0px      margin-top  150px

User · Answer

Using bootstrap with a little bit of customization, the following seems to work for me:

I need 3 partitions in my container and I tried this:

CSS:

.row.content {height: 100%; width:100%; position: fixed; }
.sidenav {
  padding-top: 20px;
  border: 1px solid #cecece;
  height: 100%;
}
.midnav {
  padding: 0px;
}

HTML:

  <div class="container-fluid text-center"> 
    <div class="row content">
    <div class="col-md-2 sidenav text-left">Some content 1</div>
    <div class="col-md-9 midnav text-left">Some content 2</div>
    <div class="col-md-1 sidenav text-center">Some content 3</div>
    </div>
  </div>

User · Answer

This is what do you want  DEMO  Try to shrink the browser s window and you ll see that the elements will be ordered   What I used  Flexible Box Model or Flexbox   Just add the follow CSS classes to your container element  in this case div container    flex-init-setup and flex-ppal-setup   Where    flex-init-setup means flexbox init setup  and flex-ppal-setup means flexbox principal setup   Here are the CSS rules     flex-init-setup        display  -webkit-box       display  -moz-box       display  -webkit-flex       display  -ms-flexbox       display  flex       flex-ppal-setup        -webkit-flex-flow  column wrap       -moz-flex-flow  column wrap       flex-flow  column wrap       -webkit-justify-content  center       -moz-justify-content  center       justify-content  center       Be good  Leonardo

User · Answer

UPDATED DEMO 2 WATCH SOLUTION      I hope that is the solution you re looking for   DEMO1 DEMO2  With that solution the only scrollbar in the page is on your contents section in the middle   In that section build your structure with a sidebar or whatever you want   You can do that with that code here    lt div class  navTop  gt   lt h1 gt Title lt  h1 gt       lt nav gt Dynamic menu lt  nav gt   lt  div gt   lt div class  container  gt       lt section gt THE CONTENTS GOES HERE lt  section gt   lt  div gt   lt footer class  bottomFooter  gt      Footer  lt  footer gt    With that css    navTop  width 100   border 1px solid black  float left     container  width 100   float left  overflow scroll     bottomFooter  float left  border 1px solid black  width 100       And a bit of jquery     document  ready function       function setHeight         var top       navTop   outerHeight        var bottom      footer   outerHeight        var totHeight     window  height           section   css           height   totHeight - top - bottom    px                   window  on  resize   function     setHeight          setHeight          DEMO 1  If you don t want jquery   lt div class  row  gt       lt h1 gt Title lt  h1 gt       lt nav gt NAV lt  nav gt   lt  div gt    lt div class  row container  gt       lt div class  content  gt           lt div class  sidebar  gt              SIDEBAR          lt  div gt           lt div class  contents  gt              CONTENTS          lt  div gt       lt  div gt       lt footer gt Footer lt  footer gt   lt  div gt    CSS     margin 0 padding 0        html body  height 100   width 100     body  display table     row  width  100   background  yellow  display table-row     container  background  pink  height 100       content   display  block  overflow auto  height 100   padding-bottom  40px  box-sizing  border-box    footer   position  fixed   bottom  0   left  0   background  yellow  height  40px  line-height  40px  width  100   text-align  center     sidebar  float left  background green  height 100   width 10      contents  float left  background red  height 100   width 90   overflow auto      DEMO 2

[html] Set auto height and width in CSS/HTML for different screen sizes

Examples related to html

Examples related to css