极客教程CSS overflow-y属性详解
在CSS中，overflow-y属性用于控制元素在垂直方向上的溢出内容的处理方式。通过设置overflow-y属性，我们可以决定当内容超出容器高度时，是显示滚动条、隐藏溢出内容还是自动调整容器大小。
1. overflow-y: visible
当设置overflow-y: visible时，溢出的内容会显示在容器外部，不会被隐藏或裁剪，并且不会显示滚动条。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>overflow-y: visible</title>
<style>
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow-y: visible;
}
</style>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. geek-docs.com
</div>
</body>
</html>
Output:
运行结果：溢出的内容会显示在容器外部，不会被隐藏或裁剪。
2. overflow-y: hidden
当设置overflow-y: hidden时，溢出的内容会被隐藏，不会显示在容器外部，也不会显示滚动条。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>overflow-y: hidden</title>
<style>
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow-y: hidden;
}
</style>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. geek-docs.com
</div>
</body>
</html>
Output:
运行结果：溢出的内容被隐藏，不会显示在容器外部。
3. overflow-y: scroll
当设置overflow-y: scroll时，无论内容是否溢出，都会显示垂直滚动条，以便用户可以滚动查看全部内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>overflow-y: scroll</title>
<style>
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. geek-docs.com
</div>
</body>
</html>
Output:
运行结果：无论内容是否溢出，都会显示垂直滚动条。
4. overflow-y: auto
当设置overflow-y: auto时，只有当内容溢出时才会显示垂直滚动条，否则不显示滚动条。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>overflow-y: auto</title>
<style>
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. geek-docs.com
</div>
</body>
</html>
Output:
运行结果：只有当内容溢出时才会显示垂直滚动条。
5. overflow-y: initial
overflow-y: initial属性值将overflow-y属性重置为其默认值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>overflow-y: initial</title>
<style>
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow-y: initial;
}
</style>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. geek-docs.com
</div>
</body>
</html>
Output:
运行结果：overflow-y属性重置为其默认值。
6. overflow-y: inherit
overflow-y: inherit属性值继承父元素的overflow-y属性值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>overflow-y: inherit</title>
<style>
.parent {
overflow-y: scroll;
}
.child {
overflow-y: inherit;
width: 200px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. geek-docs.com
</div>
</div>
</body>
</html>
Output:
运行结果：子元素继承父元素的overflow-y: scroll属性值。
7. overflow-y与overflow-x结合使用
overflow-y属性与overflow-x属性结合使用，可以分别控制元素在垂直和水平方向上的溢出内容处理方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>overflow-y & overflow-x</title>
<style>
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. geek-docs.com
</div>
</body>
</html>
Output:
运行结果：水平方向上的溢出内容被隐藏，垂直方向上的溢出内容显示滚动条。