添加其他 div 时，标题 div 会更改其位置答案

【问题标题】：Header div changes its position when other divs are added添加其他 div 时，标题 div 会更改其位置
【发布时间】：2012-11-14 15:20:08
【问题描述】：

我在使用网页标题时遇到了一些问题。它有好几页，其中一页有几张大图。在那个特定的页面中，我观察到标题 div 向左移动了几个像素，这在页面之间切换时非常令人讨厌。

我知道当我删除第一张图片 (id="problem1") 或带有两张图片的一个 div ((id="problem2" 和 "problem3")) 时问题消失了，但我不能弄清楚发生了什么。

我正在使用这个 css 代码来生成两个列：

.contenedor { overflow: auto; }

.div1 { float:left; width:440px;}
.div2 { float:right; width:440px;}

这个是标题：

#header {
    height: 100px;
    background: #0072b8;
    font-family: Arial;
    font-size: 16px;
    color: white;

}

这是神奇地改变其位置的标题：

<div id="header">
        <a href="home.html"><img src="http://placekitten.com/237/100" width="237px" height="100px" border="0" style="padding: 0 3.5em; float: left;"></a>
    </div>

这是定义具有两个列的 div 之一的代码：

<div class="contenedor">
    <div class="div1">
      <a href="http://placekitten.com/300/305" class="lightbox"><img src="http://placekitten.com/300/305" width="300px" height="305px"/></a>         
    </div>
    <div class="div2">
       <a href="http://placekitten.com/300/305" class="lightbox"><img src="http://placekitten.com/300/305" width="300px" height="305px"/></a>
    </div>
</div>

您可以在此处查看其余代码及其结果： JSFiddle

最让我困惑的是，如果我只留下 2 个有问题的元素，div 的位置是正确的，与所有其他没有这些图片的页面中的位置相同，但是当我添加它移动的第三个。

【问题讨论】：

标签： css html web

【解决方案1】：

发生这种情况是因为您在某些页面上有滚动条，但在其他页面上没有滚动条，并且您的 DIV 元素设置为“自动”，因此它们扩展了可用的浏览器空间（我确信您知道调整浏览器大小时会发生变化，或者在这种情况下，当滚动条的存在改变了可用空间时）。

要解决这个问题，最简单的方法是使用

设计页面

html {
overflow-y:scroll;
}

这将确保页面上始终有滚动条，并且页面大小不会改变。

【讨论】：

【解决方案2】：

我认为问题在于问题页面上有滚动条。您的内容比浏览器窗口的高度长。当您的内容高于窗口时，页面中会添加一个滚动条。这是不可避免的。

【讨论】：