具有前沿的响应式设计布局答案

【问题标题】：Responsive design layout with bleeding edges具有前沿的响应式设计布局
【发布时间】：2013-11-12 20:21:13
【问题描述】：

对于如图所示的文档，html/css 结构的最佳方法是什么：

中心区域是实际的浏览器窗口。我需要容器 div（连同它的内容）来扩展浏览器窗口过去（因为我需要通过 transform: scale(0.xx); 缩小它在某些时候达到一定的效果而且我不希望边距为空白）。

容器 div 将具有背景的全覆盖图像，并且整个事物都需要根据响应式设计，无论浏览器窗口如何调整大小都保持这种结构。

有什么提示或建议吗？

【问题讨论】：

【解决方案1】：

根据您提供的内容，我建议您设置负边距以实现您的目标。像这样：

<div id="container">
     <div id="left"></div>
     <div id="right"></div>
</div>

CSS：

#left{
     margin-left: -5%;
     margin-bottom: -5%;
}
#right {
     margin-right: -5%;
     margin-bottom: -5%;
}

然后有基于百分比的宽度和高度。希望这会有所帮助

【讨论】：