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

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

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

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>