防止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，給它滾動

回答

相關問題