由于某些原因,无论窗口的大小如何,我的页面默认都比包含它的窗口略大。
我正在努力使默认页面适合浏览器窗口,而不是更大。
这是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);
}