Question

您好，我有一个4页的网页，分为以下几页：

索引
关于
我的工作
联系

在索引页面上，我有nivoslider，身高为350像素。

在大约7个联系页面上，我有一个高度为350px的div。

在我的工作页面上，我有一个没有高度的div，因此它会随着内容垂直扩展。

出于某种原因，如果我添加的内容会增加我的工作页面div超过350px，则会导致主容器div稍微向左移动。容器在每个页面上都是相同的，并且只是导致它的内容。我尝试了文本，图像，其他div，它们都会导致同样的问题。

HTML：

body {
background-color: #efe0b5;
background-image: url(images/stripe.png);
background-repeat: repeat-x;
background-position: left top;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"> 
<div id="logo">
<img src="images/logo.png" width="145" height="40" alt="Joanne Stansfield Logo" />
</div>
<div id="nav">
<ul class="nav-bar">
<li class="home"><a href="index.html">Home</a></li>
<li class="about"><a href="about.html">About Us</a></li>
<li class="mywork"><a href="mywork.html">My Work</a></li>
<li class="getintouch"><a href="getintouch.html">Get in Touch</a></li>     
</ul>
</div>         
</div>
<div id="main4">
<img src="images/mywork-header.png" width="920" height="70" alt="About Me" />    
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>

CSS

* {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

@font-face {
font-family: 'CoopLightRegular';
src: url(/cooplight-webfont.eot) format('embedded-opentype'),
     url(/cooplight-webfont.eot?#iefix) format('embedded-opentype'),
     url(/cooplight-webfont.woff) format('woff'),
     url(/cooplight-webfont.ttf) format('truetype'),
     url(/cooplight-webfont.svg#CoopLightRegular) format('svg');
font-weight: normal;
font-style: normal;
}
#wrapper {
width: 960px;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#wrapper #header {
height: 200px;
width: 100%;
margin-top: 25px;
float: left;
}
#wrapper #header #logo {
float: left;
height: 200px;
width: 560px;
}
#wrapper #header #logo img {
height: 40px;
width: 145px;
margin-top: 60px;
}

#wrapper #header #nav {
position:relative;
width: 400px;
height: 200px;
float:right;
overflow: hidden;
}
#wrapper #header .nav-bar li {
position: absolute;
list-style: none;
}
#wrapper #header .nav-bar li a { 
display: block;
width: 200px;
height: 200px;
text-indent: -9999px;
}
#wrapper #nav .nav-bar li.home { left: 70px; top: -30px; }
#wrapper #nav .nav-bar li.home a { background:url(../images/home.png) no-repeat; }
#wrapper #nav .nav-bar li.home a:hover { background:url(../images/home.png) no-repeat 0      -200px; }

#wrapper #nav .nav-bar li.about { left: 130px; top: -30px;}
#wrapper #nav .nav-bar li.about a { background:url(../images/aboutme.png) no-repeat; }
#wrapper #nav .nav-bar li.about a:hover { background:url(../images/aboutme.png) no-repeat 0 -200px; }

#wrapper #nav .nav-bar li.mywork { left: 190px; top: -30px; }
#wrapper #nav .nav-bar li.mywork a { background:url(../images/mywork.png) no-repeat; }
#wrapper #nav .nav-bar li.mywork a:hover { background:url(../images/mywork.png) no-repeat 0 -200px; }

#wrapper #nav .nav-bar li.getintouch { left: 250px; top: -30px; }
#wrapper #nav .nav-bar li.getintouch a { background:url(../images/getintouch.png) no-repeat; }
#wrapper #nav .nav-bar li.getintouch a:hover { background:url(../images/getintouch.png) no-repeat 0 -200px; }

#wrapper #main {
background-color: #FFF;
width: 100%;
height: 350px;
float: left;
}
#wrapper #main3 {
background-color
: #FFF;
width: 100%;
height: 350px;
float: left;
}
#container #wrapper #main3 #left {
background-color: #999;
float: left;
height: 200px;
width: 440px;
margin-right: 10px;
margin-left: 10px;
margin-top: 30px;
}
#container #wrapper #main3 #right {
background-color: #666;
float: right;
height: 200px;
width: 440px;
margin-right: 10px;
margin-left: 10px;
margin-top: 30px;
}
#container #wrapper #main3 #form {
background-color: #CCC;
height: 200px;
width: 920px;
margin-top: 30px;
}
#wrapper #main4 {
background-color: #FFF;
width: 100%;
min-height: 350px;
float:left;
}
#container #wrapper #main4 .gallery {
background-color: #03C;
height: 200px;
width: 960px;
margin-top: 30px;
margin-bottom: 30px;
float: left;
}
#wrapper .title {
height: 70px;
width: 100%;
float: left;
}
.nivoSlider {
position:relative;
width:960px; /* Change this to your images width */
height:350px; /* Change this to your images height */
background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
#wrapper #footer {
height: 70px;
width: 960px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999;
text-align: center;
line-height: 20px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
float: left;
}
#wrapper #footer img {
height: 20px;
width: 55px;
}

Answer 1

我曾经遇到过同样的问题，这让我很难过...... 这是滚动条出现在页面很长......

以下是一些解决方案...... Browser scrollbar

希望这有帮助

Answer 2

也许你可以给出一个特定的div，问题是一个类，左边有一些css填充 - 即.class {padding：0px 0px 0px 10px}或者问题是多少。

一旦添加内容，容器div就会向左移动

2 个答案: