固定高度的自舉預滾動DIV

在我的應用程序中，我必須顯示bootsatarp網格數據庫記錄。由於記錄數量足夠大，無需整頁滾動查看，我用自舉預滾動div來包裝我的表格，它給了我滾動表格的功能。然而，DIV大小一直是瀏覽器窗口的一半。我嘗試了幾乎所有的堆棧溢出帖子和建議，只是他們不適合我。我也試圖用java腳本來解決這個問題，但也失敗了。固定高度的自舉預滾動DIV

這是我的HTML代碼

<div class="col-md-9"> 
<div class="pre-scrollable"> 
<table class="table table-bordered table-hover header-fixed" id="sometable"> 
        <thead> 
        <tr> 
        <th>EMP_No</th> 
        <th>Name</th> 
        <th>Designation</th> 
        <th>Department</th> 
        <th>Type</th> 
        <th>#Days</th> 
        <th>Start Date</th> 
        <th>End Date</th> 
        <th>Half day</th> 
        <th>Status</th> 
        </tr> 
       </thead> 
       <tbody> 
       </tbody> 
       <?php //php code for print the table 
       ?> 
</div>  
</div>

我上面填充表的PHP代碼的結果。我沒有想法如何將這個DIV的高度設置爲固定值或windows.below是在使用

<style> 
table { 
    font-family: arial, sans-serif; 
    border-collapse: collapse; 
    width: 100%; 
} 
td, th { 
    border: 1px solid #dddddd; 
    text-align: center; 
    padding: 1px; 
} 
thead th { 
    text-align: center; 
    background-color: #3498db; 
} 
tr:nth-child(even) { 
    background-color: #dddddd; 
} 
</style>

This is the result web page

來源

2016-08-25 gripen fighter

bootstrap css文件中爲.pre-scrollable div設置了max-height屬性。

.pre-scrollable { 
    max-height: 340px; 
    overflow-y: scroll; 
}

這可能是您的問題的根源。

來源

2016-08-25 14:15:20 Vcasso

謝謝！這簡單地解決了這個問題。 –

Twitter bootstrap - Fixed layout with scrollable sidebar將有助於CSS瀏覽器的全部價值......正如例如在鏈接頁面會顯示你需要設置div not table的高度。

<style type="text/css"> 
     body, html { 
      height: 100%; 
      overflow: hidden; 
     } 

     .navbar-inner { 
      height: 40px; 
     } 

     .scrollable { 
      height: 100%; 
      overflow: auto; 
     } 

     .max-height { 
      height: 100%; 
     } 

     .no-overflow { 
      overflow: hidden; 
     } 

     .pad40-top { 
      padding-top: 40px; 
     } 
</style>

來源

2016-08-25 14:11:14 CLHardman

感謝您的回答。 –

爲了簡單起見，您可以使用css視口尺寸。例如：

<div class="pre-scrollable" style="max-height: 75vh"> 
    <table>...</table> 
</div>

其中「75vh」是可見高度的75％。

來源

2017-07-14 07:59:53

固定高度的自舉預滾動DIV

回答

相關問題