CSS 设置的高度超出屏幕高度为什么没出现滚动条

html-css090

CSS 设置的高度超出屏幕高度为什么没出现滚动条,第1张

如果要固定高度想要滚动的话，需要设置当前的div层， overflow-y:

scroll(纵向滚动条)；如果超出宽度 overflow-x:

scroll(横向滚动条)。

<style>

.scroll{overflow-y:scrollheight:400pxwidth:400px}

</style>

<div class="scroll">

</div>

设置overflow-y: auto,让接下来的具体内容超出高度隐藏滚动条,但是可以滚动。 原理: 1.父元素设置overflow: hidden目的:1)子容器滚动条裁剪..设置overflow-y: auto,让接下来的具体内容超出高度隐藏滚动条,但是可以滚动。 原理: 1.父元素设置overflow: hidden目的:1)子容器滚动条裁剪..

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width">

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title></title>

<style type="text/css">

.box{width: 96%margin: 0 auto}

.img{width: 100pxheight: 150px}

.img img{width: 100%height: 150px}

</style>

</head>

<body>

<div class="box">

<div class="img">

<img src="img/5b4ff91b7ce8e.jpg"/>

</div>

</div>

</body>

</html>

效果图：

如果你想图片比例不变的话.img img{width: 100%height: 150px}里面的height：150px换成height：auto