围绕内容构建一个css框架

Question

我需要在框架

下滚动的mi内容周围构建一个框架

我做了一个上边距和一个左右边距

它似乎正确地工作但有时在底部和中间或顶部和中间之间我得到一个空白像素

并且在移动设备上，没有视口设置它会有一点不好

我对如何以更好的方式制作同样的东西没有其他想法

这里有一个示例链接 http://jsfiddle.net/zBAPX/

#mask-center-container {
 z-index: 1000;
 position: fixed;
 top: 10%;
 bottom: 4%;
 left: 0;
 right: 0;
 width: 100%;
 margin: 0;
 padding: 0;
}

#mask-center-container-sx {
 height: 100%;
 width: 21%;
 background: #000;
 opacity: 0.5;
 margin: 0;
 padding: 0;
}

#mask-center-container-ce {
 height: 100%;
 width: 56%;
 margin: 0;
 padding: 0;
}

#mask-center-container-dx {
 height: 100%;
 width: 22%;
 background: #000;
 opacity: 0.5;
 margin: 0;
 padding: 0;
}

#mask-top {
 z-index: 3000;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;  
 height: 10%;
 width: 100%;
 background: #000;
 opacity: 0.5;
 margin: 0;
 padding: 0;
}

#mask-bottom {
 z-index: 3000;
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;  
 height: 4%;
 width: 100%;
 background: #000;
 opacity: 0.5;
 margin: 0;
 padding: 0;
}

Answer 1

我只知道一种有效点击'通过'元素的方法，那就是使用实验pointer-events属性。这是CSS Tricks的一篇文章：

http://css-tricks.com/almanac/properties/p/pointer-events/

一个主要缺陷：在IE11之前没有IE支持。