Question

我基于内联显示的DIV为信息图做了一个非常简单的布局。它是居中的，并且页面之间的高度不同，但页面的结构是相同的，唯一改变的是图像内容。每页680px的宽度相同，元素总是相同，总是在同一个位置。我不知道为什么页面会翻转，就好像容器DIV的页边距从页面更改为页面一样。

如下图所示：

http://andressa-casale.com.br/NV/flipping.jpg

以下是基本布局：

http://andressa-casale.com.br/NV/page_02.html

如果有人可以帮助我，我会非常高兴。

这是CSS：

body {
    margin:0;
    padding:0;
    text-align:center; 
    background: #FFF;
}

a img {
    border: none;
}


#container {
    width: 680px;
    margin:0 auto;          
    text-align:left;
    margin-left: auto;
    margin-left: auto;
}

#box_menu {
    width: 680px;
    height: 37px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
}

#mspace01 {
    width: 96px;
    height: 37px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
    background: #FFF;
}

#mspace02 {
    width: 9px;
    height: 37px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
    background: #FFF;
}

#mspace03 {
    width: 144px;
    height: 37px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
    background: #FFF;
}

#bt01 {
    width: 124px;
    height: 37px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
    background: #62BD80;
}

#bt02 {
    width: 107px;
    height: 37px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
    background: #1083D2;
}

#bt03 {
    width: 91px;
    height: 37px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
    background: #F36851;
}

#bt04 {
    width: 91px;
    height: 37px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
    background: #F68B1F;
}

#box_info{
    width: 680px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
}

#box_conteudo{
    width: 600px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
}

#vvbt{
    width: 40px;
    height: 40px;
    display: inline;
    float: left;
    padding: 0px;
    margin-top: 53px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    background: #FFF;

}

这是HTML结构：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Título</title>

<link type="text/css" media="all" href="CSS.css" rel="stylesheet" />

</head>



<!--==============================================
Início do Body
============================================== -->
<body>
<!-- Início do Container -->
<div id="container">

    <!-- Início do Menu --> 
    <div id="box_menu">

      <div id="mspace01"></div>

          <div id="bt01"><img src="imgs/bt_01.jpg" width="124" height="37" /></div>

          <div id="mspace02"></div>

          <div id="bt02"><a href="page_02.html" target="_self"><img src="imgs/bt_02.jpg" width="107" height="37" /></a></div>

          <div id="mspace02"></div>

          <div id="bt03"><a href="page_03.html" target="_self"><img src="imgs/bt_03.jpg" width="91" height="37" /></a></div>

          <div id="mspace02"></div>

          <div id="bt04"><a href="page_04.html" target="_self"><img src="imgs/bt_04.jpg" width="91" height="37" /></a></div>

          <div id="mspace03"></div>

     </div>
     <!-- Fim do Menu --> 

     <!-- Início do Infográfico -->
     <div id="box_info">


          <!-- Início do VV BT 01 -->

          <div id="vvbt"></div>

          <!-- Fim do VV BT 01 -->





          <!-- Início do Box Conteudo -->
          <div id="box_conteudo">

               <img src="imgs/conteudo_01.jpg" width="600" height="1011" />

          </div>
          <!-- Início do Box Conteudo -->





          <!-- Início do VV BT 02 -->

          <div id="vvbt"><a href="page_02.html" target="_self"><img src="imgs/vai.jpg" width="40" height="40" /></a></div>

          <!-- Fim do VV BT 02 -->


     </div>
     <!-- Fim do Infográfico --> 

</div>
<!-- Fim do Container -->
</body>
<!--==============================================
Fim do Body
============================================== -->



</html>

Answer 1

<强> CSS

html{
  min-height:101%;
}

Answer 2

您的链接对我来说很好。这几乎可以肯定是由您的浏览器滚动条打开和关闭引起的。即，当您的#box-conteudo容器高于浏览器的高度时，会出现垂直滚动条，从而将容器推入稍小的区域。尝试给你的#box-conteudo最小高度至少是浏览器的高度。

当我改变页面时，我的居中布局“翻转”了几个像素！如何解决这个问题？

2 个答案: