Div在一页上向下移动

我的导航div内的我的页面链接（nav_btns）仅在联系页面上向下移动。该问题发生在页面加载时，在3种不同的浏览器（Chrome，Firefox，IE9）中，并且不依赖于页面滚动或调整大小。我似乎无法在堆栈或谷歌上找到我的解决方案，这让我觉得这是一个愚蠢的疏忽。如果是这样，我提前道歉，但我即将面临种植我的键盘。Div在一页上向下移动

我从这个网站和其他人那里学习，所以我希望代码是清晰的。我做了网站生活现在：http://ephelan.com

尝试：合并样式表，调整的iframe & contactbox大小，乞讨网教师/学生

来源

2011-11-01 please delete me

的doctype和HTML声明是您的联系人页面与不同所有其他页面。也许愚蠢的监督，但它可能发生在任何人身上。 :)

来源

2011-11-01 18:36:50 weir

我有点尴尬。当我遇到困难时，这从来没有超出我的想法。我忘记了涉及Boilerplate的联系表单教程。我应该自己打印此页面，而不是只更改内容。谢谢！ –

在contact.html的DOCTYPE是

<!DOCTYPE HTML>

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

在其他人。

来源

2011-11-01 18:45:08 Khan

这是票！ –

问题是您的div与id页脚的兄弟姐妹元素的总高度不同。因此，更具体....

从这里：http://ephelan.com/index.html

<div id="content"> 

    <!-- TOTAL HEIGHT OF 391 PIXELS --> 
    <ul id="accordion-slider" style="width: 806px; height: 261px; "> 
    <!-- some more stuff --> 
    </ul> 
    <div id="quote"> 
    <!-- some stuff --> 
    </div> 

    <div id="footer"> 
    <!-- contents of footer element --> 
    </div> 
</div>

现在比较这对您的联系页面：http://ephelan.com/contact.html

<div id="content"> 

    <!-- TOTAL HEIGHT OF 396 PIXELS --> 
    <div id="contactbox"> 
    <!-- Some other content --> 
    </div> 

    <div id="footer"> 
    <!-- Footer content... --> 
    </div> 
</div>

注意在计算（总）的高度差。因为页脚div上方的内容高出5个像素，所以它会将页脚比其他页面低5个像素。

为了解决这个问题，所有的页面的结构应当是这样的......

<div id="content"> 
    <div class="crap-above-footer-or-whatever-you-want-to-call-it"> 
    <!-- All of your crap --> 
    </div> 
    <div class="footer"> 
    <!-- Footer contents --> 
    </div> 
</div>

然后，在“废话上面页脚 - 或任何你想通话-it“类，请确保设置高度，并且此高度足够大以容纳其所有内容，而不管您正在查看哪个页面。

来源

2011-11-01 18:46:15 Dave

虽然第一个答案是最简单的修复方法，但很显然我需要重新评估我的div样式和布局。移动页脚也会使我不必猜测每个页面的内容区域内容的总像素高度。谢谢你这么彻底！ –

Div在一页上向下移动

回答

相关问题