ウィンドウの高さに合わせる内容と内側のdivのための垂直スクロールを示し

Question

：ブラウザで

元のレイアウトは、このようなものです：

コンテンツはブラウザウィンドウの高さに合わせる必要があります。また、divがオーバーフローしている場合は、図のように残りのコンテンツを表示するにはスクロールバーを表示する必要があります。ここで

はjsfiddleリンクです：https://jsfiddle.net/5rwjseeq

そして、これはHTMLとCSSです：

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.head-nav { 
 
    width: 100%; 
 
    height: 55px; 
 
    background: #673AB7 
 
} 
 

 
.section { 
 
    width: 30%; 
 
    display: inline-block; 
 
    margin-left: 5px; 
 
    background: #f5f5dc; 
 
    vertical-align: top; 
 
} 
 

 
.items { 
 
    background: #FF5722; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
.items .item { 
 
    margin: 10px; 
 
    width: 20px; 
 
    height: 20px; 
 
    display: inline-block; 
 
    background: #FFC107 
 
} 
 

 
.max { 
 
    height: 100%; 
 
} 
 

 
.scrolly { 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
}

<div class="page max"> 
 

 
    <div class="wrapper max"> 
 
    <div class="head-nav"> 
 
    </div> 
 
    <div class="main-content max"> 
 
     <div class="section max"> 
 
     <div class="items"> 
 
      <div class="item"></div> 
 
      <div class="item"></div> 
 
      <div class="item"></div> 
 
     </div> 
 

 
     <div class="content max scrolly"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown 
 
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release 
 
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
 
      has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, 
 
      remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem 
 
      Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with 
 
      desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
 
      an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s 
 
      with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic 
 
      typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of 
 
      Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type 
 
      specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
      more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     </div> 
 
     </div> 
 

 
     <div class="section max"> 
 
     <div class="items"> 
 
      <div class="item"></div> 
 
      <div class="item"></div> 
 
      <div class="item"></div> 
 
     </div> 
 

 
     <div class="items"> 
 
      <div class="item"></div> 
 
      <div class="item"></div> 
 
      <div class="item"></div> 
 
     </div> 
 
     <div class="content max scrolly"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown 
 
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release 
 
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
 
      has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, 
 
      remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem 
 
      Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with 
 
      desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
 
      an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s 
 
      with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic 
 
      typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of 
 
      Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type 
 
      specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
      more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

コンテンツ領域のスクロールが示されているが、それはに装着されていませんウィンドウの高さ、

ウィンドウ内に作成する方法はありますか？

Answer 1

フレックスボックスのアプローチとGermanoの答えが混在していることをお勧めします。 Fiddle。

.main-content.max { 
    height: calc (100% - 55px); 
    height: -webkit-calc(100% - 55px); // cross browser compatibility 
} 

.section { 
    width: 30%; 
    margin-left: 5px; 
    background: #f5f5dc; 
    vertical-align: top; 
    display: inline-flex; 
    display: -webkit-inline-flex; // cross browser compatibility 
    flex-flow: column; 
    -webkit-flex-flow: column; // cross browser compatibility 
} 

.content{ 
    flex: 1; 
    -webkit-flex: 1; // cross browser compatibility 
    -ms-flex: 1; // cross browser compatibility 
} 

Answer 2

これを試してみてください：

.main-content.max { 
    height: calc (100% - 55px); 
} 

CALCを使用して、あなたがボディで高さああナビゲーションバーを引くことができます。これは、navbarの高さが常に固定されている場合です。