Stretch div to remaining size of screen after absolute sized navigation bar

Question

What I want is to have a layout with a header, mid section, and footer. In the mid section I want a navigation bar a fixed with of 250px and have another div to hold the content of my webpage but have it stretch to the remaining size of the browser. I know I could do it in JavaScript but think it should be possible to do in CSS.

A quick test page:

body {
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

header,
footer {
  width: 100%;
  height: 100px;
  float: left;
  background: red;
}

#content {
  width: 100%;
  height: 80%;
  float: left;
  background: blue;
}

nav {
  width: 20%;
  max-width: 250px;
  /*override*/
  width: 250px;
  height: 100%;
  float: left;
  background: green;
}

#inside {
  width: 80%;
  height: 100%;
  float: left;
  overflow: auto;
}

#inside div,
#inside h1 {
  width: 1000px;
  margin: 40px auto;
}

<header>
  <h1>test layout</h1>
</header>

<div id="content">
  <nav>
    <ul>
      <li>link 1</li>
      <li>link 2</li>
      <li>link 3</li>
      <li>link 4</li>
      <li>link 5</li>
    </ul>
  </nav>

  <div id="inside">
    <h1>I want this box to stretch to the remaining size</h1>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, ad, ea, cupiditate odio molestiae molestias modi qui est architecto aliquid nostrum voluptatum exercitationem quos omnis ipsa repellat voluptas voluptates alias.</div>
    <div>Error, repellat voluptatibus necessitatibus ad voluptate velit labore quod modi aliquid laborum? Sed, qui, tenetur facere maxime quis molestias accusantium deleniti natus nam odit et odio voluptatem eligendi expedita porro!</div>
    <div>Non, ea, explicabo quasi unde sed quo rerum consequuntur reprehenderit placeat recusandae repudiandae nulla nemo adipisci? Unde, dolor explicabo dicta sint nostrum eligendi obcaecati minus pariatur vero alias magnam eum!</div>
    <div>Quo, alias, placeat, mollitia quisquam impedit ea recusandae officia illum accusantium repudiandae eos nam cum aspernatur tenetur ab explicabo error deserunt officiis voluptas dicta eum praesentium fugiat quas molestiae sed.</div>
    <div>Obcaecati, laudantium cumque dolor sapiente deleniti voluptatem tenetur voluptates iusto nostrum aliquid. Pariatur, at, nemo voluptate repudiandae sapiente quibusdam cum eligendi voluptatibus soluta eos perferendis explicabo magnam asperiores iure
      et!</div>
    <div>Saepe, ut, ad, accusamus, voluptates ex omnis neque delectus aperiam quibusdam maiores beatae nemo blanditiis culpa quaerat corrupti nostrum voluptas ipsam. Ratione, accusantium, nostrum quis corporis recusandae error quos amet!</div>
    <div>Voluptate, et, perspiciatis, voluptates harum vero impedit error libero atque saepe minus distinctio sint officiis laudantium eaque quae dolore incidunt minima enim excepturi aliquid. Provident omnis inventore voluptate explicabo necessitatibus.</div>
    <div>Labore, error voluptatibus modi alias aspernatur quidem maiores cumque provident saepe esse! Aperiam, nesciunt, praesentium, ut, facilis explicabo dolore cumque totam quisquam architecto magni tenetur reiciendis hic blanditiis facere tempora.</div>
    <div>Molestiae, cumque, eum, corporis, expedita quam hic eos repudiandae unde architecto consequatur ducimus odit. Itaque, iste, id, ut laudantium quo reprehenderit ab labore quod laborum consequatur non est. Dolor, culpa.</div>
    <div>Delectus, totam, cum doloremque ad nostrum veniam aliquam non voluptatum eligendi similique saepe laborum sed nesciunt sint voluptate at placeat officia ducimus vel aliquid unde accusamus eius! Itaque, amet, repellat.</div>
    <div>Autem, alias assumenda nihil dignissimos dicta magnam voluptates neque cum eveniet non. Voluptate, quasi, tempora soluta ipsam recusandae qui ab excepturi esse possimus totam corporis quae magnam cum fugit nihil.</div>
  </div>


</div>
<!-- END CONTENT -->

<footer>
  stuff
</footer>

Here is the JavaScript I would use if CSS can't do it.

var inside = document.getElementById('inside');

function resize(){
    var width = window.innerWidth - 250;
    inside.style.width = width + 'px';
}

window.addEventListener('resize', resize, false);

resize();

Answer 1

There were many layout errors in your code the most obvious one is to set overflow:hidden; on the body tag, this can hide content that users can never see.

I corrected most of them and made this layout which seems to be the one you are looking for :

FIDDLE

CSS:

 body, html {
     height: 100%;
     margin:0;
     padding:0;
}
 h1 {
     margin: 0;
 }
 header, footer {
     width:100%;
     height: 100px;
     background: red;
 }
 #content {
     position:absolute;
     top:100px;
     bottom:100px;
     width:100%;
     background: blue;
 }
 nav {
     width: 20%;
     max-width: 250px;
     /*override*/
     width: 250px;
     height: 100%;
     float: left;
     background: green;
 }
 #inside {
     height:100%;
     overflow:auto;
 }
 footer {
     position:absolute;
     bottom:0;
 }

Answer 2

http://jsfiddle.net/vikramjakkampudi/D2UM6/2/

    body {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

header, footer {
    width: 100%;
    height: 100px;
    float: left;
    background: red;
}

#content {
    width: 100%;
    height: 80%;
    float: left;
    background: blue;
}

nav {
    width: 20%;
    max-width: 250px;
    /*override*/
    width: 250px;
    height: 100%;
    float: left;
    background: green;
}

Answer 3

Here is your code with your requirement

<body>
<div id="Main_div">
<header><h1>test layout</h1></header>

<div id="content">
<nav>
    <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
        <li>link 4</li>
        <li>link 5</li>
    </ul>
</nav>

<div id="inside">
    <h1>I want this box to stretch to the remaining size</h1>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, ad, ea,     cupiditate odio molestiae molestias modi qui est architecto aliquid nostrum voluptatum exercitationem quos omnis ipsa repellat voluptas voluptates alias.</div>
    <div>Error, repellat voluptatibus necessitatibus ad voluptate velit labore quod modi aliquid laborum? Sed, qui, tenetur facere maxime quis molestias accusantium deleniti natus nam odit et odio voluptatem eligendi expedita porro!</div>
    <div>Non, ea, explicabo quasi unde sed quo rerum consequuntur reprehenderit placeat recusandae repudiandae nulla nemo adipisci? Unde, dolor explicabo dicta sint nostrum eligendi obcaecati minus pariatur vero alias magnam eum!</div>
    <div>Quo, alias, placeat, mollitia quisquam impedit ea recusandae officia illum accusantium repudiandae eos nam cum aspernatur tenetur ab explicabo error deserunt officiis voluptas dicta eum praesentium fugiat quas molestiae sed.</div>
    <div>Obcaecati, laudantium cumque dolor sapiente deleniti voluptatem tenetur voluptates iusto nostrum aliquid. Pariatur, at, nemo voluptate repudiandae sapiente quibusdam cum eligendi voluptatibus soluta eos perferendis explicabo magnam asperiores iure et!</div>
    <div>Saepe, ut, ad, accusamus, voluptates ex omnis neque delectus aperiam quibusdam maiores beatae nemo blanditiis culpa quaerat corrupti nostrum voluptas ipsam. Ratione, accusantium, nostrum quis corporis recusandae error quos amet!</div>
    <div>Voluptate, et, perspiciatis, voluptates harum vero impedit error libero atque saepe minus distinctio sint officiis laudantium eaque quae dolore incidunt minima enim excepturi aliquid. Provident omnis inventore voluptate explicabo necessitatibus.</div>
    <div>Labore, error voluptatibus modi alias aspernatur quidem maiores cumque provident saepe esse! Aperiam, nesciunt, praesentium, ut, facilis explicabo dolore cumque totam quisquam architecto magni tenetur reiciendis hic blanditiis facere tempora.</div>
    <div>Molestiae, cumque, eum, corporis, expedita quam hic eos repudiandae unde architecto consequatur ducimus odit. Itaque, iste, id, ut laudantium quo reprehenderit ab labore quod laborum consequatur non est. Dolor, culpa.</div>
    <div>Delectus, totam, cum doloremque ad nostrum veniam aliquam non voluptatum eligendi similique saepe laborum sed nesciunt sint voluptate at placeat officia ducimus vel aliquid unde accusamus eius! Itaque, amet, repellat.</div>
    <div>Autem, alias assumenda nihil dignissimos dicta magnam voluptates neque cum eveniet non. Voluptate, quasi, tempora soluta ipsam recusandae qui ab excepturi esse possimus totam corporis quae magnam cum fugit nihil.</div>
</div>


</div> <!-- END CONTENT -->

<footer>
stuff
</footer>
</div>
</body>

and CSS for above

body {
    margin: 0;
    padding: 0;
    position:absolute;
    width: 100%;
    height: 100%;

}
#Main_div{
height:100%;
width:100%;

}
header, footer {
    width: 100%;
    height: 20%;       
    background: red;
}

#content {
   width:100%;
    height:100%;        
    background: silver;

}

nav {
    width: 30%;        
    /*override*/        
    height: 100%;
    float: left;
    background: green;

}

#inside {
margin-left:32%;    
width: 65%;
    height: 100%;        
    overflow: auto;
}

see the pic

Please verify the pic of both header and footer with content

Answer 4

    <body>
    <div id="Main_div">
    <header><h1>test layout</h1></header>

    <div id="content">
    <nav>
        <ul>
            <li>link 1</li>
            <li>link 2</li>
            <li>link 3</li>
            <li>link 4</li>
            <li>link 5</li>
        </ul>
    </nav>

    <div id="inside">
        <h1>I want this box to stretch to the remaining size</h1>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, ad, ea,     cupiditate odio molestiae molestias modi qui est architecto aliquid nostrum voluptatum exercitationem quos omnis ipsa repellat voluptas voluptates alias.</div>
        <div>Error, repellat voluptatibus necessitatibus ad voluptate velit labore quod modi aliquid laborum? Sed, qui, tenetur facere maxime quis molestias accusantium deleniti natus nam odit et odio voluptatem eligendi expedita porro!</div>
        <div>Non, ea, explicabo quasi unde sed quo rerum consequuntur reprehenderit placeat recusandae repudiandae nulla nemo adipisci? Unde, dolor explicabo dicta sint nostrum eligendi obcaecati minus pariatur vero alias magnam eum!</div>
        <div>Quo, alias, placeat, mollitia quisquam impedit ea recusandae officia illum accusantium repudiandae eos nam cum aspernatur tenetur ab explicabo error deserunt officiis voluptas dicta eum praesentium fugiat quas molestiae sed.</div>
        <div>Obcaecati, laudantium cumque dolor sapiente deleniti voluptatem tenetur voluptates iusto nostrum aliquid. Pariatur, at, nemo voluptate repudiandae sapiente quibusdam cum eligendi voluptatibus soluta eos perferendis explicabo magnam asperiores iure et!</div>
        <div>Saepe, ut, ad, accusamus, voluptates ex omnis neque delectus aperiam quibusdam maiores beatae nemo blanditiis culpa quaerat corrupti nostrum voluptas ipsam. Ratione, accusantium, nostrum quis corporis recusandae error quos amet!</div>
        <div>Voluptate, et, perspiciatis, voluptates harum vero impedit error libero atque saepe minus distinctio sint officiis laudantium eaque quae dolore incidunt minima enim excepturi aliquid. Provident omnis inventore voluptate explicabo necessitatibus.</div>
        <div>Labore, error voluptatibus modi alias aspernatur quidem maiores cumque provident saepe esse! Aperiam, nesciunt, praesentium, ut, facilis explicabo dolore cumque totam quisquam architecto magni tenetur reiciendis hic blanditiis facere tempora.</div>
        <div>Molestiae, cumque, eum, corporis, expedita quam hic eos repudiandae unde architecto consequatur ducimus odit. Itaque, iste, id, ut laudantium quo reprehenderit ab labore quod laborum consequatur non est. Dolor, culpa.</div>
        <div>Delectus, totam, cum doloremque ad nostrum veniam aliquam non voluptatum eligendi similique saepe laborum sed nesciunt sint voluptate at placeat officia ducimus vel aliquid unde accusamus eius! Itaque, amet, repellat.</div>
        <div>Autem, alias assumenda nihil dignissimos dicta magnam voluptates neque cum eveniet non. Voluptate, quasi, tempora soluta ipsam recusandae qui ab excepturi esse possimus totam corporis quae magnam cum fugit nihil.</div>
    </div>


    </div>


/***** css  *****/

body {
    margin: 0;
    padding: 0;
    position:absolute;
    width: 100%;
    height: 100%;

}
#Main_div{
height:100%;
width:100%;

}
header, footer {
    width: 100%;
    height: 20%;       
    background: red;
}

#content {
   width:100%;
    height:100%;        
    background: silver;

}

nav {
    width: 30%;        
    /*override*/        
    height: 100%;
    float: left;
    background: green;

}

#inside {
margin-left:32%;    
width: 65%;
    height: 100%;        
    overflow: auto;
}