css div 滚动条—css设置div滚动条位置:代码示例

javagongchengshi

温馨提示:这篇文章已超过239天没有更新,请注意相关的内容是否还可用!

css div 滚动条—css设置div滚动条位置:代码示例

CSS中可以使用overflow属性来设置div元素的滚动条位置。overflow属性有四个值可选:visible、hidden、scroll和auto。

- 当overflow属性的值为visible时,即使内容超出了div的大小,也不会显示滚动条。

- 当overflow属性的值为hidden时,内容超出div的大小时,会隐藏超出的部分,并且也不会显示滚动条。

- 当overflow属性的值为scroll时,内容超出div的大小时,会显示滚动条,无论内容是否超出div的大小。

- 当overflow属性的值为auto时,内容超出div的大小时,会根据需要显示滚动条。

下面是一些示例代码:

<style>

.container {

width: 200px;

height: 200px;

border: 1px solid black;

overflow: scroll;

}

</style>

<div class="882b-8d5d-9a5e-0369 container">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris a ante finibus congue. Mauris hendrerit, nisl nec tempor iaculis, arcu ligula pharetra ligula, in sollicitudin lacus libero vel ex. Sed euismod malesuada ipsum, ac tincidunt sem. Vivamus ut faucibus nisi. Integer sed ex vel tortor iaculis lobortis. Sed porttitor turpis sed est finibus, vel finibus mauris pharetra. Sed nec lectus at lectus dictum laoreet. Nulla facilisi. Maecenas efficitur, eros vitae lacinia suscipit, tortor nisi tincidunt enim, vitae dignissim leo mauris eu nunc. Quisque vulputate urna ut neque vehicula, eget efficitur quam euismod. Mauris et fringilla quam. Donec vulputate, purus in tincidunt porta, turpis leo convallis nisl, eget tristique lorem erat et odio. Curabitur euismod ligula sit amet nibh aliquet, non convallis erat pharetra.</p>

</div>

在上面的示例代码中,我们创建了一个宽度为200px、高度为200px的div容器,并设置了边框为1px的黑色边框。然后,我们将overflow属性设置为scroll,这样当内容超出div的大小时,会显示滚动条。

注意:示例中的内容可能超出div的大小,因此会出现滚动条。

文章版权声明:除非注明,否则均为莫宇前端原创文章,转载或复制请以超链接形式并注明出处。

取消
微信二维码
微信二维码
支付宝二维码