如何从窗口头部向底部拉伸div高度

 .container {

   display: flex;

   flex-direction: column;

   height: 100vh; /* 设置容器高度为窗口高度 */

 }

 .header {

   height: 50px;

   background-color: #f1f1f1;

 }

 .content {

   flex: 1;

   background-color: #e9e9e9;

 }

 .footer {

   height: 30px;

   background-color: #f1f1f1;

 }

 <div class="header">Header</div>

 <div class="content">Content</div>

 <div class="footer">Footer</div>

 .container {

   height: 100vh; /* 设置容器高度为窗口高度 */

 }

 .content {

   height: 200px; /* 初始高度 */

   background-color: #e9e9e9;

 }

 <div class="content">Content</div>

 window.addEventListener('resize', function() {

   var windowHeight = window.innerHeight;

   var content = document.querySelector('.content');

   content.style.height = windowHeight + 'px';

 });