CSS 设置的高度超出屏幕高度为啥没出现滚动条
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 设置的高度超出屏幕高度为啥没出现滚动条相关的知识，希望对你有一定的参考价值。
在css中要出现滚动条，就必需要设置height高度以及overflow属性相关，这两个都必需要设置不然出现不了滚动条。
程序：
</style>
<div class="y">
纵向滚动条
</div>
基本语法
overflow-x overflow-y
overflow : visible | auto | hidden | scroll
扩展资料：
CSS具有以下特点：
1、丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2、易于使用和修改
CSS可以将样式定义在html元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。
参考资料来源：百度百科-Overflow
参考资料来源：百度百科-css
参考技术A原因是CSS没有设置height高度、overflow属性。
1、首先写上<body>标签用来包含html的主体，再一个div来包含设置overflow的属性值为visible，那么其最后在网页中就会正常的显示了，其子元素超出父元素的部分会显示出来。
2、写一个div元素作为父元素，并且设置其overflow属性值为auto，在里面写一个div作为子元素，那么在网页中显示时，其子元素部分其在超出父元素宽度时，那么就会添加水平方向的滚动条。
而垂直方向不添加滚动条，所以这个auto属性是在子元素超出父元素宽度或者高度时，有需要的添加滚动条，而非什么情况都添加滚动条的。
3、设置好之后，如图所示，鼠标右击，在弹出的下拉列表菜单中，选择“在浏览器中打开”。
4、最后，打开之后可以看到已经有滚动条，这样操作即可解决问题了。
要出现滚动条，一定要设置height高度、overflow属性，两者缺一不可。
<style>.y
overflow-y:scroll;
height:100px;
width:400px;
</style>
<div class="y">纵向滚动条
</div>
扩展资料
基本语法
overflow-x overflow-y
overflow : visible | auto | hidden | scroll
语法取值
visible：默认值。不剪切内容也不添加滚动条。假如显式声明此默认值， 对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效；
auto：在必需时对象内容才会被裁切或显示滚动条；
hidden：不显示超过对象尺寸的内容；
scroll：总是显示滚动条。
设置overflow的一个更流行的用处是，清除浮动。设置overflow并不会在该元素上清除浮动，它将清除自己(self-clear)。意思就是，应用了overflow(auto或hidden)的元素，将会扩展到它需要的大小以包围它里面的浮动的子元素(而不是叠了起来(collapsing))，假设未定义高度。就像这样：
实例
设置 overflow 属性：
div width:150px; height:150px; overflow:scroll;
参考资料来源:百度百科-Overflow
参考技术C如果要固定高度想要滚动的话，需要设置当前的div层， overflow-y: scroll;(纵向滚动条)；如果超出宽度 overflow-x: scroll;(横向滚动条)。
<style>.scrolloverflow-y:scroll;height:400px;width:400px;
</style>
<div class="scroll">
</div>本回答被提问者采纳 参考技术D 可能是因为设置了overflow:hidden;
flex 布局水平垂直居中，内部区域高度超出外部区域高度时的bug
前言
最近在项目中遇到一个问题就是水平垂直居中我是用的是flex布局，然后在缩小屏幕时里边的内容高度超出了外侧区域的高度(这里是屏幕的高度，这时候虽然出现了滚动条，但是展示不完全，被遮住了，经过测验才发现是因为align-items:center;)的原因，也就是居中的原因，解决办法写在下面。
<div class="coupon_window">
<div class="white_dialog">
</div>
</div>
.coupon_window
width: 100%;
height: 100%;
z-index: 9999;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
.white_dialog
margin: auto;
width: 542px;
border-radius: 8px;
解决办法就是在内部区域加
margin:auto;这样就是可以实现即使居中也可以上下滚动看到全部内容。其他的居中方式也是这么解决。
以上是关于CSS 设置的高度超出屏幕高度为啥没出现滚动条的主要内容，如果未能解决你的问题，请参考以下文章