页面对于窗口来说太大了

时间:2013-07-16 21:05:32

标签: html css window size

由于某些原因,无论窗口的大小如何,我的页面默认都比包含它的窗口略大。

我正在努力使默认页面适合浏览器窗口,而不是更大。

http://jsfiddle.net/VTKvM/

这是HTML:

<div id="container">
    <div id="header"></div> 
        <div id="description"> 
            <p id="content"> The content goes here </p>
        </div>
        <div class="title"> WEB DESIGN </div>
            <div class="tile-container">
                <div class="box">   
                    <div class="logo a1"></div>
                </div>
                <div class="box">
                    <div class="logo a2"></div>
                </div>
                <div class="box">
                    <div class="logo a3"></div> 
                </div>
                <div class="box">
                    <div class="logo a4"></div>
                </div>
                <div class="box">
                    <div class="logo a5"></div>
                </div>
                <div class="box">   
                    <div class="logo a6"></div>
                </div>
                <div class="box">
                    <div class="logo a7"></div>
                </div>
                <div class="box">
                    <div class="logo a8"></div> 
                </div>
                <div class="box">
                    <div class="logo a9"></div>
                </div>
                <div class="box">
                    <div class="logo a10"></div>
                </div>
                <div class="box">   
                    <div class="logo a11"></div>
                </div>
                <div class="box">
                    <div class="logo a12"></div>
                </div>
                <div class="box">
                    <div class="logo a13"></div>    
                </div>
                <div class="box">
                    <div class="logo a14"></div>
                </div>
                <div class="box">
                    <div class="logo a15"></div>
                </div>
                <div class="box">
                    <div class="logo a16"></div>
                </div>
                <div class="box">
                    <div class="logo a17"></div>
                </div>
                <div class="box"> </div>
            </div> <!-- end tileContainer -->


   <div id="footer">
        <div class="taskBarHolderBottom"> test </div>
        <div id="bottomBar"> test </div>
   </div>
</div>

和CSS:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
   margin: auto;
   padding: 0px;
}
#header {
   background:#ff0;
   padding:10px;
}

#description {
   min-width: 120;
   max-width: 1920;

   height: 10.625em;
   background-color: #666666;
   overflow: hidden;
   margin-top: 70px;
}
.tile-container{
   position: relative;
   overflow: hidden;
   margin: auto;
}
.box {
   width: 191px;
   height: 145px;
   margin: 4px;
   float: left;
   background-color: black;
   opacity: 0.2;

}
.box:hover{
   background-color:#EF6939;
   opacity: 1;
      overflow: hidden;

}

.logo:hover{
   background-color:#EF6939;
   overflow: hidden;
}
.logo {
   width: 191px;
   height: 145px;
   margin: 4px;
   float: left;
   margin: 0 auto;
}

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

#bottomBar {
   background-color: green;
   height: 65px;
   width:100%;
}

.a1 {
   background-image: url(artizone.png);
}
.a2 {
   background-image: url(careoregon.png);
}
.a3 {
   background-image: url(concur.png);
}
.a4 {
   background-image: url(corbis.png);
}
.a5 {
   background-image: url(dex.png);
}
.a6 {
   background-image: url(digitalrealty.png);
}
.a7 {
   background-image: url(KCHA.png);
}
.a8 {
   background-image: url(miamifreezone.png);
}
.a9 {
   background-image: url(microsoft.png);
}
.a10 {
   background-image: url(microsoftexchange.png);
}
.a11 {
   background-image: url(microsoftinvestorrelations.png);
}
.a12 {
   background-image: url(microsoftlearning.png);
}
.a13 {
   background-image: url(mscustomerexperience.png);
}
.a14 {
   background-image: url(Premera.png);
}
.a15 {
   background-image: url(stanford.png);
}
.a16 {
   background-image: url(tmobile.png);
}
.a17 {
   background-image: url(weyerhaeuser.png);
}

0 个答案:

没有答案