您的位置：首页 > 其它

父级div固定高度并设置超出隐藏，子级div内容超出隐藏可以垂直滚动的设置

2018-06-25 17:45 1121 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Title</title>
<style>
.box{
            width:  500px;
            height: 400px;;
            border: 1px solid #000;
            overflow-x: hidden;
            /*overflow-y: auto;*/
            /*overflow: auto;*/
        }
        .box-in{
            width: 300px;
            height: 1500px;
        }
</style>
</head>
<body>
<div class="box">
<div class="box-in">
<div class="in">
原理：
1.父元素设置overflow: hidden;
目的：1）子容器滚动条裁剪掉，保留纵向滚动功能。
2）子容器里面具体内容高度超出部分裁剪掉，美观?。
2.子元素设置宽度大于父元素宽度，超出的滚动条会被裁剪掉；
设置overflow-y: auto,让接下来的具体内容超出高度隐藏滚动条，但是可以滚动。

原理：
1.父元素设置overflow: hidden;
目的：1）子容器滚动条裁剪掉，保留纵向滚动功能。
2）子容器里面具体内容高度超出部分裁剪掉，美观?。
2.子元素设置宽度大于父元素宽度，超出的滚动条会被裁剪掉；
设置overflow-y: auto,让接下来的具体内容超出高度隐藏滚动条，但是可以滚动。
3.具体的内容设置高度大于父元素高度，实现没有滚动条出现内容可滚动效果
原理：
1.父元素设置overflow: hidden;
目的：1）子容器滚动条裁剪掉，保留纵向滚动功能。
2）子容器里面具体内容高度超出部分裁剪掉，美观?。
2.子元素设置宽度大于父元素宽度，超出的滚动条会被裁剪掉；
设置overflow-y: auto,让接下来的具体内容超出高度隐藏滚动条，但是可以滚动。

原理：
1.父元素设置overflow: hidden;
目的：1）子容器滚动条裁剪掉，保留纵向滚动功能。高度，实现没有滚动条出现内容可滚动效果
</div>
</div>
</div>
<div>
ok???
</div>
</body>

<script>

</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航