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> 

フレックスボックスを試しましたが、奇妙なCSS calc()を実行して、緑色と赤色のdivを下に伸ばしています。

（私は現代、固体way-ないハックを探しています）

Answer 1

私はあなたのHTMLをどうするかどうかはわかりません。そして、あなたが聖杯の意味を理解していない。

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

プレビュー

Answer 2

：私はちょうど意味タグとこれのInternet Explorer 7のブラウザの範囲にわたる互換性なしハックを、持っていないと、これをしませんでしたこれを行うためにflexを使用したい場合：

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

申し訳ありませんが、私のコードはきれいではありません。