html - 在绝对大小的导航栏之后将 div 拉伸(stretch)到屏幕的剩余大小

Question

我想要的是具有页眉、中间部分和页脚的布局。在中间部分，我想要一个固定为 250px 的导航栏，并有另一个 div 来保存我的网页的内容，但让它延伸到浏览器的剩余大小。我知道我可以用 JavaScript 做到这一点，但我认为用 CSS 应该可以做到。

快速测试页面:

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>

如果 CSS 做不到，这里是我会使用的 JavaScript。

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

你的代码中有很多布局错误，最明显的一个是在 body 标签上设置 overflow:hidden;，这可以隐藏用户永远看不到的内容。

我更正了其中的大部分并制作了这个布局，这似乎是您正在寻找的布局:

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