コンテナのdivの高さにウィンドウの高さを合わせる方法はありますが、ウィンドウのサイズは変更しないでください

Question

私は次のコードを使ってページレイアウトを作成しています。コンテナdivの高さをウィンドウの高さに合わせるようにしますが、ウィンドウの高さを変更すると、すべての内容が垂直方向に一緒に圧縮されます。コンテナdivの高さと幅を修正するにはどうすればいいですか？

<style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    }   

    #container { 

     margin: 0 auto; 
     width: 800px; 
     height:100vh;   
     background-color: azure; 

    } 

    #rw1 { 
     height: 10vh; 
     background-color: aliceblue;    
    } 

    #rw2 { 
     height: 80vh; 
     background-color: #ff6a00; 
    } 

    #rw3 { 
     height: 10vh; 
     background-color: #808080; 
    } 
    </style> 


    <div id="container"> 
     <div id="rw1"></div> 
     <div id="rw2"></div> 
     <div id="rw3"></div> 
    </div> 

Answer 1

かなりオープンエンドの質問が、私はあなたはおそらく次のようにspcifically max-widthとmax-heightの組み合わせを使用して、メディアクエリを試してみたいと思います：

@media (max-height: 300px) { 
    #rw1 { 
     height: 33vh; 
     background-color: aliceblue;    
    } 
    #rw2 { 
     height: 33vh; 
     background-color: #ff6a00; 
    } 
    #rw3 { 
     height: 33vh; 
     background-color: #808080; 
    } 
} 

も組み合わせることができますmax-width/max-height次のように：

@media (max-width: 767px), (max-height: 300px) { 
     #container { 
      width: 750px; 
     } 
     #rw1 { 
      height: 33vh; 
      background-color: aliceblue;    
     } 
     #rw2 { 
      height: 33vh; 
      background-color: #ff6a00; 
     } 
     #rw3 { 
      height: 33vh; 
      background-color: #808080; 
     } 
    } 

はここでフィドルです：https://jsfiddle.net/9vwe255a/

幅と高さの両方で結果ペインのサイズを変更しようとすると、ビューポートに応じてdivのサイズが変更されます。