如何让margin均匀塌陷？答案

【问题标题】：How to make margins collapse evenly?如何让margin均匀塌陷？
【发布时间】：2012-12-16 18:50:37
【问题描述】：

我希望我的边距在主体开始变窄之前完全折叠，就像在http://www.skysports.com/ 上一样，只有当边距完全折叠时，主体才能变窄。多年来，我一直在我的 css 中使用 px、em 和 % 并且无法使其工作。这是我到目前为止所拥有的。

html { background-image:url(images/webBackground.jpg);
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-attachment:fixed;
    height:100%; width:100%;
    }

body { background:black;
    height:100%; width:75%;
    margin:0 12.5% 0 12.5%;
    }

#container { width: 100%; height: 100%; }

【问题讨论】：

试试auto 而不是12.5%。
collapse fully before the body starts 是什么意思？

标签： css margins

【解决方案1】：

这是jsfiddle 我认为您所要求的示例。

HTML

<div id="wrapper">

    <div id="main-content">

        <div class="push"></div>

    </div>

</div>

CSS

body, html {
  margin: 0px;
  padding: 0px;  
}

#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  width: 500px; /* specific resolution width */
  margin: 0px auto 0px;    
}

#main-content {
  background-color: red;   
}

#main-content .push {
  height: 500px;   
}

【讨论】：

【解决方案2】：

抱歉，我没有完全理解您的问题。假设您需要您的图像中心对齐屏幕的任何宽度。

body
{background: url(images/webBackground.jpg) no-repeat fixed center 0 black;}

【讨论】：