html - 带有 CSS 和内部滚动的“ chalice ”

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 延伸到底部。

(我正在寻找一种现代的、可靠的方式——而不是 hack)

Answer 1

我不确定如何处理您的 HTML。并且不确定你所说的 chalice 是什么意思。我刚刚做到了这一点，使用语义标签并且没有黑客攻击，兼容 Internet Explorer 7 的一系列浏览器:

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

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

预览