防止DIV，给它滚动

请参阅以下小提琴：https://jsfiddle.net/537w3qsn/防止DIV，给它滚动

这是我想要的东西：

页眉和页脚在任何时候都应在页面上仍然可见。
正文（中间的绿色div）应该得到一个垂直滚动条，否则会导致内容溢出。它不应该增长太多，并将页脚推到页面外。
布局应该是流畅的。模态应占据整个屏幕。
请仅使用javascript作为绝对最后的手段。
否则，可以随意修改HTML和CSS，但是您希望获得相同的效果。

样品CSS：

.modal { 
    padding: 0px; 
    background-color: #ff6666; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.body { 
    overflow: auto; 
    background-color: #b3ff66; 
} 

.dialog { 
    width: 100%; 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
    background-color: #66ffff; 
} 

.content { 
    height: 100%; 
    border-radius: 0px; 
    background-color: #b266ff; 
}

样本HTML：

<div class="modal"> 
    <div class="dialog"> 
     <div class="content"> 
      <div class="header"> 
       <h4>Header</h4> 
      </div> 
      <div class="body"> 
       <table class="table"> 
        <thead> 
         <tr> 
          <th>Test</th> 
          <th>Test</th> 
          <th>Test</th> 
         </tr> 
        </thead> 
        <tbody> 
         <!-- LOTS OF CONTENT HERE --> 
        </tbody> 
       </table> 
      </div> 
      <div class="footer"> 
       This is the footer. 
      </div> 
     </div> 
    </div> 
</div>

来源

2016-01-31 James Watkins

这不是一个代码编写的服务。你用什么技术来尝试自己解决这个问题？你失败的尝试的结果是什么？ – Turnip

为什么不是js？如果你只是使用JS，会花费5分钟。 –

@TingSun一个人不应该**使用js进行布局，这就是CSS的作用 – LGSon

你可以使用Flexbox的分配高度。

/* Create a vertical flexible container */ 
.modal { 
    display: flex; 
    flex-direction: column; 
} 

/* Every child will fit their content, but .body will take the remaining space */ 
.body { 
    flex: 1; 
}

你可以在这里看到一个例子：https://jsfiddle.net/tzi/ud4zsn2e/

来源

2016-01-31 23:19:47 tzi

Fiddle

在我的小提琴，你会发现一切流畅性和响应。

的主要代码使用的是：

.footer { 
position: fixed; 
bottom: 0; 
}

你会在它应该所有的工作，只要你想小提琴看到:)。

来源

2016-01-31 23:24:25

另一种解决方案（非Flexbox的）：

CSS（根据你的问题类）

* { 
     margin:0; padding:0; 
    } 

    .modal, .dialog, .content { 
     height: 100vh; 
    } 

    .header { 
     position: relative;   
     height: 15%; 
     background-color: purple;   
    } 

    .body { 
     position: relative; 
     height: calc(100vh - 30%); 
     overflow: auto;   
     background-color: #b3ff66; 
    } 

    .footer { 
     position: relative;   
     height: 15%; 
     background-color: red;   
    }

的jsfiddle：https://jsfiddle.net/537w3qsn/3/

来源

2016-01-31 23:47:59 pivemi

防止DIV，给它滚动

回答

相关问题