設置容器固定的高度和滾動

我有以下幾點：設置容器固定的高度和滾動

<section class="table"> 
    <div class="table-row"> 
    <div class="table-cell"></div> 
    <div class="table-cell"></div> 
    <div class="table-cell"></div> 
    </div> 
    <div class="table-row"> 
    <div class="table-cell"></div> 
    <div class="table-cell"></div> 
    <div class="table-cell"></div> 
    </div> 
</section>

如何設置<section>到一個固定的高度，這樣我需要滾動看到更多的行？

來源

2016-09-09 thegreatjedi

請加上小提琴 – Manjuboyz

您需要大約.table多了一個包裹。對父母應用css overflow-y和height。

.table-holder { 
 
    overflow-y: auto; 
 
    width: 200px; 
 
    height: 80px; 
 
    float: left; 
 
} 
 
.table { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.table-row { 
 
    display: table-row; 
 
} 
 
.table-cell { 
 
    display: table-cell; 
 
}

<section class="table-holder"> 
 
    <div class="table"> 
 
    <div class="table-row"> 
 
     <div class="table-cell">Cell 1</div> 
 
     <div class="table-cell">Cell 2</div> 
 
     <div class="table-cell">Cell 3</div> 
 
    </div> 
 
    <div class="table-row"> 
 
     <div class="table-cell">Cell 1</div> 
 
     <div class="table-cell">Cell 2</div> 
 
     <div class="table-cell">Cell 3</div> 
 
    </div> 
 
    <div class="table-row"> 
 
     <div class="table-cell">Cell 1</div> 
 
     <div class="table-cell">Cell 2</div> 
 
     <div class="table-cell">Cell 3</div> 
 
    </div> 
 
    <div class="table-row"> 
 
     <div class="table-cell">Cell 1</div> 
 
     <div class="table-cell">Cell 2</div> 
 
     <div class="table-cell">Cell 3</div> 
 
    </div> 
 
    <div class="table-row"> 
 
     <div class="table-cell">Cell 1</div> 
 
     <div class="table-cell">Cell 2</div> 
 
     <div class="table-cell">Cell 3</div> 
 
    </div> 
 
    </div> 
 
</section>

來源

2016-09-09 08:07:07

其他的答案僅適用於普通情況，但不適用於桌子。但你的作品。謝謝！ – thegreatjedi

@thegreatjedi歡迎您） –

爲此，您需要將overflow-x和height應用到<section>類。

overflow-x屬性指定如何處理內容的頂部/底部邊緣 - 如果它溢出元素的內容區域。

.table { 
 
     height: 100px; /* For fixed height */ 
 
     width: 100px; 
 
     overflow-y: scroll; /* For scrolling */ 
 
}

<section class="table"> 
 
    <div class="table-row"> 
 
    <div class="table-cell">1</div> 
 
    <div class="table-cell">2</div> 
 
    <div class="table-cell">3</div> 
 
    </div> 
 
    <div class="table-row"> 
 
    <div class="table-cell">1</div> 
 
    <div class="table-cell">2</div> 
 
    <div class="table-cell">3</div> 
 
    </div> 
 
    <div class="table-row"> 
 
    <div class="table-cell">1</div> 
 
    <div class="table-cell">2</div> 
 
    <div class="table-cell">3</div> 
 
    </div> 
 
</section>

更多有用的信息約overflow屬性：

來源

2016-09-09 08:01:26

這個代碼，如果你只想要垂直滾動，然後使用overflow-y:scroll;添加到您的CSS

section.table { 
    height: 55px; 
    overflow: scroll; 
}

或水平overflow-x:scroll;

來源

2016-09-09 08:12:15

設置容器固定的高度和滾動

回答

相關問題