如何不使用div将垂直滚动条添加到html页面？

Question

I am generating one html page having one tab pane which is very long. 我正在生成一个带有一个选项卡窗格的HTML页面，该选项卡很长。 So i want to add scroll pane so that visualisation could be better. 因此，我想添加滚动窗格，以便可视化效果更好。 I found few good examples using div but code becomes very messy with other div so i prefer not to use div. 我发现使用div的例子很少，但是代码与其他div变得非常混乱，因此我不希望使用div。

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <title>Independent CSS scrolling panels (with inertia)</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
    <div class="Top">Top Content</div>
    <div class="Container">
        <div class="Left">Left Content</div>
        <div class="Middle">Middle Content</div>
        <div class="Right">Right Content</div>
    </div>
    </body>
</html>

CSS code: CSS代码：

/*I love me some border-box*/
* {
    box-sizing: border-box;
}
/*This just stops me getting horizontal scrolling if anything overflows the width*/
body {
    overflow-x: hidden;
}
/*Just removing default browser padding/margin*/
html,
body {
    padding: 0;
    margin: 0;
    color: #ebebeb;
}
/*Flexbox gives us the flexiness we need. The top just stays put as there is no scrolling on the body due to the page never exceeding viewport height*/
.Top {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: darkgreen;
    font-size: 3rem;
    position: relative;
    z-index: 10;
    height: 100px;
}
/*This is our main wrapping element, it's made 100vh high to ensure it is always the correct size and then moved into place and padded with negative margin and padding*/
.Container {
    display: flex;
    overflow: hidden;
    height: 100vh;
    margin-top: -100px;
    padding-top: 100px;
    position: relative;
    width: 100%;
    backface-visibility: hidden;
    will-change: overflow;
}
/*All the scrollable sections should overflow and be whatever height they need to be. As they are flex-items (due to being inside a flex container) they could be made to stretch full height at all times if needed.
WebKit inertia scrolling is being added here for any present/future devices that are able to make use of it.
*/
.Left,
.Middle,
.Right {
    overflow: auto;
    height: auto;
    padding: .5rem;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
}
/*Entirely optional – just wanted to remove the scrollbar on WebKit browsers as I find them ugly*/
.Left::-webkit-scrollbar,
.Middle::-webkit-scrollbar,
.Right::-webkit-scrollbar {
    display: none;
}
/*  Left and Right are set sizes while the Middle is set to flex one so it occupies all remaining space. This could be set as a width too if prefereable, perhaps using calc.*/
.Left {
    width: 12.5rem;
    background-color: indigo;
}

.Middle {
    flex: 1;
}

.Right {
    width: 12.5rem;
    background-color: violet;
}

Can pls someone pls help me how can i implement it. 可以请某人帮助我如何实现它。

Answer 1

I suppose you could use a <table> : 我想您可以使用<table> ：

table {
  display: block;
  height: 500px;
  overflow-y: scroll;
}

如何不使用div将垂直滚动条添加到html页面？

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-01-21 07:58:03

如何不使用div将垂直滚动条添加到html页面？

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-01-21 07:58:03

解决方案1
1 已采纳 2015-01-21 07:58:03