带有CSS和内部滚动的“圣杯”

Question

实现此布局的最佳方法是什么：

我相信这个HTML很好，我只需要CSS：

<div>
  <header style="background:blue"></header>

  <div>
    <nav>
      <header style="background:darkgreen"></header>
      <ul style="background:green">...</ul>
    </nav>

    <div>
      <header style="background:darkred"></header>
      <main style="background:red"></main>
    </div>
  </div>
</div>

我尝试过flexbox，但我发现自己做了奇怪的CSS calc()让绿色和红色的div延伸到底部。

（我正在寻找一种现代的，坚固的方式 - 而不是黑客）

Answer 1

我不确定如何处理您的HTML。而且不确定你的意思是圣杯。我只是用语义标签做了这个，没有黑客攻击，兼容Internet Explorer 7的各种浏览器：

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
body {
  background-color: #fcc;
}
header {
  position: fixed;
  top: 0;
  background-color: #66f;
  left: 0;
  right: 0;
  height: 35px;
  line-height: 35px;
}
aside {
  position: fixed;
  left: 0;
  top: 35px;
  width: 200px;
  bottom: 0;
}
aside header {
  position: absolute;
  background-color: #f90;
}
aside .content {
  position: absolute;
  top: 35px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  background-color: #fc6;
}
main {
  margin: 40px 10px 10px 210px;
}
main header {
  top: 35px;
  left: 200px;
  background-color: #f33;
  line-height: 20px;
  height: 20px;
}

＆＃13;

<header>
  ...
</header>
<aside>
  <header>
    ...
  </header>
  <div class="content">
    <p>Content goes here...</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae unde, eligendi dolores laborum aliquid voluptatem ducimus adipisci dolorem quod ipsum corrupti soluta. Eveniet repellendus sed cumque, consectetur eum magni saepe!</p>
    <p>Tenetur debitis nemo, itaque ipsa, eum tempore doloribus mollitia quas nulla accusantium unde officia rerum optio quasi a dicta error distinctio iusto, provident deleniti? Commodi perspiciatis qui ratione autem sequi.</p>
    <p>Placeat saepe libero sunt cupiditate. Expedita molestias, error sequi mollitia consequatur iste aliquid deserunt deleniti repellat saepe vitae necessitatibus eum. Soluta nemo dicta fugit repellendus! Dignissimos, aliquid. Iusto, voluptatum, voluptatibus.</p>
    <p>Sequi eaque officiis ab dolores aliquid, harum, nemo nam et deleniti quo aliquam, placeat, est natus iusto. Impedit assumenda ullam, tempore saepe rem adipisci, id ex, iste, dignissimos doloribus corrupti!</p>
    <p>Illum nemo nihil, exercitationem autem ullam, aliquam dolorum inventore laborum quasi similique neque vero aliquid ad perferendis asperiores iusto? Quo autem recusandae, obcaecati iusto quas minus dicta reprehenderit magni quaerat.</p>
    <p>Excepturi magnam rerum facere culpa a harum explicabo nostrum aspernatur. Molestiae voluptates exercitationem hic assumenda nesciunt fugit error nemo sapiente nihil consequatur illo omnis ipsum reiciendis, veniam rerum, eaque asperiores!</p>
    <p>Iusto fugit mollitia, non deserunt assumenda nobis saepe id, dolorum cum culpa magni ea consectetur odio possimus facere velit voluptatum aperiam quibusdam hic, esse animi debitis. In qui cupiditate iste!</p>
    <p>Eveniet nam vero maiores reiciendis totam pariatur magni tempora, rerum magnam ex, blanditiis a, odit labore consectetur ea modi minus dolore aspernatur voluptates. Magnam, hic sed omnis vel delectus? Eligendi.</p>
    <p>Eveniet nesciunt laborum a officiis, numquam magnam, incidunt libero unde dolorum voluptatum, ducimus illo in eum reiciendis ad dolor eos consequuntur saepe ex repellat porro quae. Voluptatum architecto cupiditate officia.</p>
    <p>Voluptate, voluptatem culpa explicabo distinctio obcaecati quia molestiae blanditiis optio quis nihil, ipsam similique molestias exercitationem quas itaque, dignissimos quisquam modi. Impedit et dolorum, laboriosam modi aliquam dolor quasi possimus!</p>
    <p>Ad dolores consequuntur accusantium laborum, provident laudantium quas voluptatibus exercitationem distinctio adipisci, corporis, amet alias optio nisi! Doloremque incidunt debitis molestiae eius similique facere nobis libero esse temporibus quisquam,
      aperiam?</p>
    <p>Quis accusamus itaque adipisci modi perspiciatis provident suscipit assumenda totam quo placeat reiciendis, nulla ad aperiam nobis sint velit ducimus eos culpa cupiditate in, quod veritatis nihil ut quidem! Ab.</p>
    <p>Consequuntur maiores quas alias labore architecto laboriosam nisi voluptatum impedit rem. Doloribus cumque, unde ducimus possimus, voluptate cupiditate veniam est, sequi, libero velit ipsa ab deleniti earum odio? Minus, earum.</p>
    <p>Molestiae iusto placeat vitae mollitia maxime ipsa ad in praesentium quasi cupiditate temporibus doloremque numquam, veritatis esse et odio dolores rerum iure alias quis, quisquam, amet maiores. Sequi, eaque reprehenderit.</p>
    <p>Qui hic voluptatum adipisci reprehenderit repudiandae, libero illum aliquam iure, dolores tempora, quo consequuntur odit. Exercitationem blanditiis sunt, ea consequuntur, incidunt dolor harum neque fugiat natus tempore assumenda, deleniti dolorem?</p>
  </div>
</aside>
<main>
  <header>
    ...
  </header>
</main>

＆＃13;

＆＃13;

＆＃13;

预览

Answer 2

如果你想使用flex，那就这样做：

＆＃13;

＆＃13;

<div style="display:flex;flex-direction:column;height: 100vh;">
  <div style="background-color:blue;height:50px;"></div>
  <div style="background-color:red;flex:1;display: flex;">
    <div style="background-color: green;flex: 1;">
      <div style="background-color: darkgreen;height: 80px;"></div>
      <div style="overflow-y: scroll;"></div>
    </div>
    <div style="background-color: red;flex: 2;">
      <div id="navBar" style="background-color:darkred;height:40px;"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;    

抱歉，我的代码不干净。