css 如何在div中添加滚动条?

nlejzf6q  于 2023-03-14  发布在  其他
关注(0)|答案(9)|浏览(226)

我有一个弹出窗口,显示一些结果,我想滚动条显示,因为结果被切断(我不希望弹出太长)。

qnyhuwrf

qnyhuwrf1#

您需要将style="overflow-y:scroll;"添加到div标签中。(这将强制滚动条垂直)。
如果您只想在需要时使用滚动条,只需执行overflow-y:auto;

bnl4lu3b

bnl4lu3b2#

Css类有一个很好的潜水与滚动

.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;
}
nx7onnlm

nx7onnlm3#

要添加滚动,您需要定义div的最大高度,然后添加溢出y
所以做一些类似这样事情

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

roejwanj4#

如果你想用jquery添加一个滚动条,可以使用下面的方法。如果你的div的id是'mydiv',你可以使用下面的jquery id选择器和css属性:

jQuery('#mydiv').css("overflow-y", "scroll");
eni9jsuy

eni9jsuy5#

<div class="scrollingDiv">foo</div> 

div.scrollingDiv
{
   overflow:scroll;
}
xwmevbvl

xwmevbvl6#

<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>
chy5wohz

chy5wohz7#

如果您有CSS文件,则可以定义对<div>元素的调用并分配overflow: auto CSS属性。
在HTML文件中:<div class="container">
在CSS文件中放入:

.container{
    overflow: "auto";
}
1hdlvixo

1hdlvixo8#

有多种方法可以实现div上的滚动条,这里用an easy explanation找到一个简单的easy way

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

下面是对上面代码的一点解释。
溢出-y:自动;
CSS的overflow-y属性在需要的时候添加一个滚动条,如果我们想在特定高度(例如在我们的例子中是100 px)之后添加滚动条,那么,
最大高度:100 px;
我们添加了CSS的max-height属性,例如,要在100px高度之后添加滚动条,则使用max-height: 100px;
我希望这个解释对澄清概念也有帮助。

bttbmeg0

bttbmeg09#

<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>

相关问题