弹出的对话框不能实现滚动的问题

 

今天写前端弹出框的时候遇到的窗口过大，屏幕不能自动滚动的问题。在平时我们写页面的时候，当页面长度超过当前屏幕长度后，会自动向下延伸并且可以滚动。但今天我遇到的弹窗就很奇怪。后来我仔细研究了一下，并做了一个demo做对比，才发现其中的问题所在。

首先，在我的弹出的对话框中，分为两个部分，分别是dialogBg和dialog。

<div class="diglogBg">
    <div class="dialog">
        <div class="lilili"></div>
	<div class="lilili"></div>
    </div>
</div>

下面分别是两个部分的样式：

                        .dialogBg{
				position:fixed ;
				width: 100vw;
				height: 100vh;
				overflow: auto;
			}
			.dialog{
				position: fixed;
				width: 100px;
				background: red;
				overflow: auto;
			}
			.lilili{
				width: 20px;
				height: 1000px;
				background: green;
			}

 

按照以上运行，是弹出窗口的多余部分是显示不了的。原因是由于在对话框的样式中使用了position中的fixed属性。具体原因我也没太弄清楚，去查了W3C的文档，看到里面的一句话对fixed解释是，相对于浏览器窗口进行定位。

有兴趣的可以自己查一下是什么原因，别忘记回来告诉我

最后我是把position属性改成absolute解决的。如果必须使用fixed的话。

这里提供一种解决方案。

.dialog {  
    top: 0;  
    bottom:0;  
    position:fixed;  
    overflow-y:scroll;  
    overflow-x:hidden;  
}