围绕内容构建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。