css - 如何让margin均匀塌陷？

Question

我希望我的边距在身体开始变窄之前完全折叠，就像在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%; }

Answer 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;   
}

Answer 2

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

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