Question

首先，我被使用了

#copyright {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px
}

footer {
position: fixed;
bottom: 50px;
left: 0;
right: 0;
}

在我在较小的屏幕上测试我的网站并且意识到页脚与内容重叠之前，哪个工作正常。然后，我尝试将html和body高度设置为100%，并将我的wrapper设置为最小高度100%并将页脚放在下面，以期更相对的页脚。但现在它被困在顶端，是什么导致了这个？

#wrapper {
	display: block;
  	position: fixed;
  	text-align: center;
  	min-height: 100%;
  	width: 100%;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	right: 0;
}

#header p {
	font-size: 2em;
	margin: 0;
}

#header ul {
	list-style-type: none;
}

#header ul li {
	display: inline;
	padding: 20px 20px;
	font-size: 1.5em;
	margin: 0 30px;

}


#copyright {
	position: relative;
	height: 50px;
	width: 100%;
	text-align: center;
	font-size: 0.8em;
}

#footer {
	position: relative;
	margin-top: 15px;
	height: 50px;
	width: 100%;
	text-align: center;
	font-size: 0.8em;
}

#footer ul {
	list-style-type: none;
}

#footer ul li {
	display: inline;
	margin: 0 15px;
}

<div id="wrapper">
<div id="header">
<p>Pavel Design</p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="contentwrapper">
<div id="content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus     imperdiet nulla scelerisque bibendum. Praesent eu tempus dolor, vel venenatis purus.</p>
</div>
</div>
</div>

<footer id="footer">
    <ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="about.html">About</a></li>
	<li><a href="gallery.html">Gallery</a></li>
	<li><a href="services.html">Services</a></li>
	<li><a href="contact.html">Contact</a></li>
	<li><a href="mailto:info@pavel.co.nz">info@pavel.co.nz</a></li>
    </ul>
<p>© Pavel Design 2016  |  Photography, design and website construction by Pavel Design 2016</p>
</footer>

编辑：

我的包装使用固定位置，因此我可以指定top: 0 bottom: 0等等，因为当我只使用min-height和{时，我会使用覆盖整个屏幕的背景图像{1}}背景图片并未覆盖整个屏幕，而是在页面外部留下一个小的白色边框

Answer 1

您不需要提供两个页脚，也不需要提供id="footer" 因为HTML5已经为您提供了标签，如果适用于您，请尝试使用

在此处Fiddle

查看此演示

<强> HTML

<div id="wrapper">
<div id="header">
<p>Pavel Design</p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="contentwrapper">
<div id="content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus     imperdiet nulla scelerisque bibendum. Praesent eu tempus dolor, vel venenatis purus.</p>
</div>
</div>
</div>

<footer>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="mailto:info@pavel.co.nz">info@pavel.co.nz</a></li>
        </ul>
    <p>© Pavel Design 2016  |  Photography, design and website construction by Pavel Design 2016</p>
    </footer>

<强> CSS

 #wrapper {
    display: block;
    position: fixed;
    text-align: center;
    min-height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#header p {
    font-size: 2em;
    margin: 0;
}

#header ul {
    list-style-type: none;
}

#header ul li {
    display: inline;
    padding: 20px 20px;
    font-size: 1.5em;
    margin: 0 30px;

}
footer {
  position: fixed;
  margin-top: 2%;
  height: 50 width: 100%;
  text-align: center;
  font-size: 0.8em;
  bottom: 0;
}
footer ul {
  list-style-type: none;
}
footer ul li {
  display: inline;
  margin: 0 15px;
}

Answer 2

这是有效的

#wrapper {
  display: block;
  text-align: center;
  min-height: 100%;
  width: 100%;
  margin-bottom: 10%// or some other value depending on your requirements 

}
#header p {
  font-size: 2em;
  margin: 0;
}
#header ul {
  list-style-type: none;
}
#header ul li {
  display: inline;
  padding: 20px 20px;
  font-size: 1.5em;
  margin: 0 30px;
}
#copyright {
  position: relative;
  height: 50px;
  width: 100%;
  text-align: center;
  font-size: 0.8em;
}
#footer {
  position: fixed;
  margin-top: 15px;
  height: 50 width: 100%;
  text-align: center;
  font-size: 0.8em;
  bottom: 0;
}
#footer ul {
  list-style-type: none;
}
#footer ul li {
  display: inline;
  margin: 0 15px;
}

<div id="wrapper">
  <div id="header">
    <p>Pavel Design</p>
    <ul>
      <li><a href="index.html">Home</a>
      </li>
      <li><a href="about.html">About</a>
      </li>
      <li><a href="gallery.html">Gallery</a>
      </li>
      <li><a href="services.html">Services</a>
      </li>
      <li><a href="contact.html">Contact</a>
      </li>
    </ul>
  </div>
  <div id="contentwrapper">
    <div id="content">
      <h1>Lorem Ipsum</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus imperdiet nulla scelerisque bibendum. Praesent eu tempus dolor, vel venenatis purus.</p>
    </div>
  </div>
</div>

<footer id="footer">
  <ul>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="about.html">About</a>
    </li>
    <li><a href="gallery.html">Gallery</a>
    </li>
    <li><a href="services.html">Services</a>
    </li>
    <li><a href="contact.html">Contact</a>
    </li>
    <li><a href="mailto:info@pavel.co.nz">info@pavel.co.nz</a>
    </li>
  </ul>
</footer>

<footer id="copyright">
  <p>© Pavel Design 2016 | Photography, design and website construction by Pavel Design 2016</p>
</footer>

问题发生的原因是您将包装器位置设置为fixed，页脚位置设置为relative。至于“重叠”问题，为包装器设置margin-bottom:10%，这将确保包装器继续滚动直到所有包装器内容都可见

为什么我的页脚位于页面顶部？

2 个答案: