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

Question

I have 2 questions with this layout:

• .feature_content (gray background) adapt it in height and width to different screen sizes. Right now, on large screens, .feature_content is far from the footer.
• There is a horizontal scrollbar that I want to delete, regardless of screen size.

I want to: adapt .feature_content to the remaining height and remove the horizontal scrollbar.

Here is FIDDLE

And my code is:

HTML :

 <div id="container"> <div id="header">Header added just for demonstration purposes</div> <div id="content">Your content goes here <div class="featured_content"></div> </div> </div> <div id="footer">Footer here</div> 

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; } 

Answer 1

That's what you need? Demo . Try to reduce the browser window, and you will see that the elements will be ordered.

What did i use? Flexible Box Model or Flexbox.

Just add the following 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 main 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; } 

Kindly Leonardo

Answer 2

/// UPDATED SOLUTION DEMO 2 WATCH ////

I hope this is the solution you are looking for! DEMO1 DEMO2

With this solution, the only scroll bar on the page is in the middle of your content section! In this section, create your structure using the sidebar or whatever you want!

You can do this with this code here:

 <div class="navTop"> <h1>Title</h1> <nav>Dynamic menu</nav> </div> <div class="container"> <section>THE CONTENTS GOES HERE</section> </div> <footer class="bottomFooter"> Footer </footer> 

With this 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 do not want jquery

 <div class="row"> <h1>Title</h1> <nav>NAV</nav> </div> <div class="row container"> <div class="content"> <div class="sidebar"> SIDEBAR </div> <div class="contents"> CONTENTS </div> </div> <footer>Footer</footer> </div> 

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

Answer 3

Using bootstrap with a little tweak, the following seems to me:

I need 3 sections 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>