相关疑难解决方法(0)

我有以下页面(deadlink :) http://www.workingstorage.com/Sample.htm,它有一个我无法坐在页面底部的页脚.

我想要页脚

• 当页面很短并且屏幕未填满时,它会粘到窗口底部
• 当有多个屏幕内容(而不是重叠内容)时,保持文档结束并正常向下移动.

CSS继承并迷惑我; 我似乎无法正确地改变它以在内容上放置最小高度或使页脚移到底部.

我有一个简单的2列布局,页脚可以清除标记中的左右div.我的问题是我无法在所有浏览器中让页脚停留在页面底部.如果内容向下推动页脚,它就可以工作,但情况并非总是如此.

更新:

它在Firefox中无法正常工作.当页面上没有足够的内容将页脚一直向下推到浏览器窗口的底部时,我在页脚下方看到一条背景颜色条.不幸的是,这是页面的默认状态.

虽然我网站上的大多数页面都有足够的内容可以将页脚推到页面底部,适合大多数人.无论如何,无论屏幕尺寸如何,我都知道它始终固定在底部.

我已经尝试了很多方法,比如底部:0x; position:absolute:等等.似乎工作得很好,偶尔会将页脚从容器中推出,然后使用其中的一些示例将其固定到底部.

包括页脚两部分的HTML和CSS(页脚和版权栏).<section id="footer"> div无论如何,他们都在内心.

我删除了我的尝试,以便人们可以立即查看它,看看当前的代码是什么修改.

实时网址 - http://www.mangdevelopment.co.uk/nakedradish

(这是一个餐厅网站.不要担心'裸体'这个词).

HTML

<section id="footer">
  <div class="container">
    <div class="row">
      <div class="span1">
        <div id="small-logo">
          <img src="img/small-logo.png" />
        </div>
      </div>
      <div class="span2">
        <div class="footer-list">
          <h6>OUR BOXES</h6>
          <ul>
            <a href="#">
              <li>Classic Box</li>
            </a>
            <a href="#">
              <li>Vegetarian Box</li>
            </a>
            <a href="#">
              <li>Family Box</li>
            </a>
            <a href="#">
              <li>Dinner Party Box</li>
            </a>
            <a href="#">
              <li>Gift Box</li>
            </a>
          </ul>
        </div>
      </div>
      <div class="span2">
        <div class="footer-list">
          <h6>OUR RECIPES</h6>
          <ul>
            <a href="#">
              <li>Last Weeks Feature</li>
            </a> …

我希望看到一个页面的页脚所有的时间。所以我想要它粘。它不应该取决于页面上有多少内容。所以我想出了position:fixed和bottom:0。当然，这可以正常工作，但我不希望页脚位于浏览器底部，而是位于文档正文底部。

黑色边框是浏览器窗口

演示（jsfiddle）

有没有办法实现这一目标？

我目前正在构建一个页脚应该贴在底部的网站，在我的桌面上（使用 chrome 浏览器）它工作正常，但是当我在移动设备上尝试该网站时，页脚下方有一点间距，我的问题是如何解决这个问题？我的网站可以在：http : //block-smash.com/beta找到，我的代码如下：

<div id="wrapper">
<div id="header">
</div>
<div id="nav">
<center>
    <div class="circle">
    </div>
    <div class="circle">
    </div>
    <div class="circle">
    </div>
</center>
</div>
</div>
<div id="footer">
&copy; Mickael van Schie
</div>

这里是我的 CSS：

html{
position: relative;
min-height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
body{
background: rgb(230,230,220);
overflow-x: hidden;
margin: 0px;
}
#wrapper{
height: 100%;
width: 100%;
}
#header{
width: 100%;
height: 50%;
background: rgb(100,200,100);
}
#nav{
height: 125px;
margin-left: auto;
margin-right: auto;
margin-top: -62px;
}
#footer{
width: …