在CSS / HTML中为不同的屏幕尺寸设置自动高度和宽度

Question

I have 2 issues with this layout :

1. .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.
2. 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 :

<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

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:

1. flex-init-setup means flexbox init setup ; and
2. 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

Answer 2

///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:

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

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