2

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

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

我想知道如何在将最小宽度减小到 1100 像素的同时摆脱沿着网站左侧和底部边框向外窥视的红色背景。

网站链接：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>
4

1 回答 1

0

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

身体 {
背景：透明；
最小宽度：1400px；
}
于 2012-06-30T17:55:39.877 回答