如何给 div 添加滚动条？

问题描述 投票：0回答：9

我有一个显示一些结果的弹出窗口，我希望显示一个滚动条，因为结果被截断了（我不希望弹出窗口太长）。

css scroll popup
9个回答
151
投票

您需要将

style="overflow-y:scroll;"
添加到div标签。 （这将在垂直方向上强制滚动条）。

如果你只在需要的时候想要一个滚动条，就这样做

overflow-y:auto;

27
投票

Css 类有一个漂亮的带滚动的 Div

.DivToScroll{   
    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-radius: 4px 0 4px 0;
    color: #3B3C3E;
    font-size: 12px;
    font-weight: bold;
    left: -1px;
    padding: 10px 7px 5px;
}

.DivWithScroll{
    height:120px;
    overflow:scroll;
    overflow-x:hidden;
}
18
投票

要添加滚动，您需要定义 div 的max-height，然后添加overflow-y

所以做这样的事情

.my_scroll_div{
    overflow-y: auto;
    max-height: 100px;
}
15
投票

如果你想使用 jquery 添加滚动条，下面的方法将起作用。如果您的 div 的 ID 为“mydiv”，您可以使用以下带有 css 属性的 jquery id 选择器：

jQuery('#mydiv').css("overflow-y", "scroll");
8
投票
<div class="scrollingDiv">foo</div> 

div.scrollingDiv
{
   overflow:scroll;
}
4
投票

<head>
<style>
div.scroll
{
background-color:#00FFFF;
width:40%;
height:200PX;
FLOAT: left;
margin-left: 5%;
padding: 1%;
overflow:scroll;
}


</style>
</head>

<body>



<div class="scroll">You can use the overflow property when you want to have better       control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better </div>


</body>
</html>
1
投票

如果你有一个 CSS 文件，你可以定义对 

<div>
元素的调用并分配 
overflow: auto
CSS 属性。

在 HTML 文件中：

<div class="container">

在你放置的CSS文件中：

.container{
    overflow: "auto";
}
0
投票

有多种方法可以在 div 上实现滚动条，这里找到一个简单的 

easy way
一个带有 
an easy explanation
.

.my_scroll_div {
    overflow-y: auto;
    max-height: 100px; 
}

这里是对上面代码的一点解释。

溢出-y：自动；

CSS的

overflow-y
属性在需要时添加滚动条，如果我们想在特定高度（例如我们的例子中为100px）之后添加滚动条 那么，

最大高度：100px；

我们添加 CSS 的 

max-height
属性，例如在 
100px
高度之后添加一个滚动条，然后使用 
max-height: 100px;
。

我希望这个解释也有助于清除概念。

0
投票

<html>
<head>
    <style>
        div.scroll {
            max-height: 50px;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div class="scroll">
        You can use the overflow property when you want to have better
        control of the layout. The default value is visible.better control
        of the layout. The default value is visible.better control of the
        layout. The default value is visible.better control of the layout.
        The default value is visible.better control of the layout. The
        default value is visible.better control of the layout. The default
        value is visible.better
    </div>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.