给div加滚动条

最新推荐文章于 2024-04-18 14:02:33 发布

原创最新推荐文章于 2024-04-18 14:02:33 发布 · 738 阅读

3 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

40 篇文章

订阅专栏

本文详细介绍了 CSS 中的 overflow 属性及其子属性 overflow-x 和 overflow-y 的使用方法。包括如何控制元素内容溢出时的显示方式，如隐藏、自动显示滚动条及始终显示滚动条等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css属性：

overflow-x:auto;设置出现横向滚动条;

overflow-y:hidden;设置纵向不滚动;

overflow-y:scroll; 总是显示纵向滚动条

overflow-y:visible : 不剪切内容也不添加纵向滚动条

overflow-x:scroll; 总是显示横向滚动条
overflow-x:visible : 不剪切内容也不添加横向滚动条

overflow-y

语法：
overflow-y : visible | auto | hidden | scroll

参数：

visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的高度。并且clip属性设置将失效
auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 　不显示超过对象高度的内容
scroll : 　总是显示纵向滚动条

overflow-x

语法：

overflow-x : visible | auto | hidden | scroll

参数：

visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或 frame 的宽度。并且 clip 属性设置将失效
auto : 　此为 body 对象和 textarea 的默认值。在需要时剪切内容并添加滚动条
hidden : 　不显示超过对象宽度的内容
scroll : 　总是显示横向滚动条

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>加滚动条</title>
<style type="text/css">
.outer{width:500px;height:500px;overflow-x:hidden;overflow-y:auto;}
</style>
</head>
<body>
<div class="outer">

   <div style="width:1000px;">加滚动条加滚动条加滚动条加滚动条动条加滚动条加滚动条加滚动条加滚动条加滚动条</div></div>
</body>
</html>