css - 围绕内容构建一个CSS框架

Question

我需要围绕 mi 内容构建一个框架，该框架将在框架下滚动

我将上边距设为底部边距，将边距设为左右

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

在移动设备上，如果没有设置视口(viewport)，情况会变得更糟

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

这里是一个示例链接 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。