Question

我试图找出当屏幕最大化时如何摆脱网站左侧和底部出现的红色背景。我想这是因为我试图在名为“Find Us”的第四页/最后一页上叠加图像，这些图像的组合宽度超过1400px，这是我在页面上设置的最小宽度。

解决方案可能是增加最小宽度，但是当许多计算机没有以如此高的分辨率运行时，我认为这不是一个好的设计选择。理想情况下，我想将最小宽度降低到1100px。当我尝试这样做时，页面底部的红色背景开始增加，因为它试图在更紧凑的区域挤压图像。

我想知道如何摆脱沿着网站左下边界突出的红色背景，同时将最小宽度减小到1100px。

网站链接：http://www.sfu.ca/~jca41/stuph/it/website03/template.html

CSS：

.page {
    color: black; 
    width: 100%;
    height: 1100px;
    position: relative; }

#findUs .pageContent {
    width: 1400px;
    margin: 0 auto 0 auto; }

#findUs #man #contactInfo {
    margin: 195px 0 0 345px;
    width: 200px; }

#findUs #frame {
    width: 464px;
    height: 541px;
    float: left;
    position: relative;
    top: 130px;
    left: 190px;
    z-index: 90; }

#findUs #tassel {
    background: url(../img/findUs/tassel.png) no-repeat;
    width: 165px;
    height: 411px;
    float: left;
    position: relative;
    top: -330px;
    left: 20px;
    z-index: 110; }

#findUs #feedbackForm {
    position: relative;
    top: -1100px;
    left: -470px;
    width: 300px;
    float: left;
    z-index: 120; }

#findUs #cover {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 1100px;
    float: left;
    z-index: 105;
    background: url(../img/findUs/body.png) repeat; }

HTML：

<section id="findUs" class="page"> <!-- Last page -->
    <nav></nav>     
    <div class="pageContent">       
        <div id="man"><div id="contactInfo"><p class="infoHeading">Business Hours</p></div></div>       
        <div id="frame"><div id="googleMapCanvas"></div></div>
        <div id="tassel"></div>    
        <div id="feedbackForm"></div>           
    </div>      
    <div id="cover" class="hidden"></div>       
</section>

Answer 1

你需要身体背景为红色吗？如果不是：

body {
background: transparent;
min-width: 1400px;
}

偷看在网站边界外面的背景

1 个答案: