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

如何使边距均匀崩溃？

2 个答案: