html - 文本超过页脚

Question

我目前正在为几个 friend 创建一个网站，每当我使用

时，我的文字都会越过页脚。我已经包含了 HTML 和 CSS 文件，我似乎无法解决我的问题。那可能是因为我对这一切还很陌生，但我愿意学习。当页面滚动时，我是页脚要说的地方，文本可以自由地沿着页面向下移动，而不需要让页脚留在原地并与文本重叠。谢谢大家!

@font-face {
  font-family: pricedown;
  src: url('fonts/pricedown.TTF');
}

body {
  margin: 0;
  padding: 0;
  font-family: Verdana;
  font-size: 16px;
  background-color: #0e0e0e;
}


/*hr {
  color: #000000;
  background-color: #000000;
}*/

#header-wrapper {
  height: 274px;
  background: url(images/panorama.jpg) repeat-x;
}

#header {
  width: 800px;
  height: 275px;
  margin: 0 auto;
  padding: 0px 20px;
}

#header-text h1 {
  font-size: 36px;
  padding: 50px 0px 0px 0px;
  text-shadow: 0px 0px 5px #000000;
  color: white;
}

#header-text p {
  font-size: 12px;
  color: white;
}

#toolbar {
  width: 800px;
  height: 50px;
  margin: 0 auto;
  padding: 0px 20px;
  background: url(images/tb-bg.png) repeat-x;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  box-shadow: 0px 0px 5px #000000;
  /*position: fixed;*/
}

#menu {
  float: right;
  width: 450px;
  margin: 0 auto;
  padding: 0;
  text-transform: uppercase;
}

#menu ul {
  float: right;
  margin: 0;
  padding: 12px 0px 0px 0px;
  list-style: none;
  line-height: normal;
}

#menu li {
  float: left;
}

#menu a {
  display: block;
  margin-right: 1px;
  text-decoration: none;
  padding: 0px 0px 0px 10px;
  font-size: 18px;
  /*font-weight: bold;*/
  color: white;
}

#toolbar2 {
  height: 50px;
  background: url(images/tb-bg.png) repeat-x;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  box-shadow: 0px 0px 5px #000000;
}

#search {
  width: 800px;
  height: 50px;
  margin: 0 auto;
  padding-top: 10px;
  float: right;
}

#content {
  width: 680px;
  height: 1200px;
  margin: 0 auto;
  padding-top: 20px;
}

#welcomee-message {
  width: 610px;
  height: 70px;
  float: middle;
}

#welcome-message {
  width: 110px;
  height: 1120px;
  float: left;
}

#welcome-message h1 {
  color: white;
}

#welcomee-message p {
  color: white;
}

#welcomee-message h1 {
  color: white;
}

#welcomee-message p {
  color: white;
}

#statistics {
  padding-top: 45px;
}

#statistics h1 {
  color: white;
  font-size: 18px;
}

#statistics p {
  color: white;
  font-size: 11px;
}

#contact {
  padding-top: 45px;
}

#contact h1 {
  color: white;
  font-size: 18px;
}

#contact p {
  color: white;
  font-size: 11px;
}

#information-center {
  width: 250px;
  height: 500px;
  float: right;
}

#information-center p {
  color: white;
}

#first-post {
  width: 500px;
  height: 470px;
  padding-top: 10px;
  float: left;
  background-color: black;
  border: solid 1px white;
}

#first-post h1 {
  color: white;
  padding-left: 10px;
  font-size: 18px;
}

#first-post h2 {
  color: white;
  float: right;
  font-size: 18px;
  padding-right: 10px;
}

#first-post p {
  color: white;
  padding-left: 10px;
  font-size: 11px;
}

#first-post a {
  text-decoration: none;
  font-size: 18px;
  color: white;
}

#second-post {
  width: 500px;
  height: 440px;
  padding-top: 10px;
  float: left;
  background-color: black;
  border: solid 1px white;
}

#second-post h1 {
  color: white;
  padding-left: 10px;
  font-size: 18px;
}

#second-post h2 {
  color: white;
  float: right;
  font-size: 18px;
  padding-right: 10px;
}

#second-post p {
  color: white;
  padding-left: 10px;
  font-size: 11px;
}

#second-post a {
  text-decoration: none;
  font-size: 18px;
  color: white;
}

#footer {
  background: url(images/tb-bg.png) repeat-x;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  box-shadow: 0px 0px 5px #000000;
  overflow: auto
}

#footer-text {
  width: 800px;
  margin: 0 auto;
  padding-top: 2px;
}

#menu2 {
  float: right;
  width: 450px;
  margin: 0 auto;
  padding: 0;
  text-transform: uppercase;
}

#menu2 ul {
  float: right;
  margin: 0;
  padding: 5px 0px 0px 0px;
  list-style: none;
  line-height: normal;
}

#menu2 li {
  float: left;
}

#menu2 a {
  display: block;
  margin-right: 1px;
  text-decoration: none;
  padding: 0px 0px 0px 10px;
  font-size: 11px;
  /*font-weight: bold;*/
  color: white;
}

#copyrights {
  float: right;
}

#copyrights p {
  float: right;
  color: white;
  font-size: 11px;
}

#changelog {
  width: 500px;
  height: 500px;
}

#changelog h1 {
  color: white;
  font-size: 16px;
}

#changelog p {
  color: white;
  font-size: 11px;
}


/*#changelog hr{
	width: 300px;
	float: left;
}*/

#post {
  width: 475px;
  padding-top: 120px;
}

#post p {
  color: white;
  font-size: 11px;
}

#welcome-message-post {
  width: 500px;
  height: 50px;
  float: left;
}

#welcome-message-post h1 {
  color: white;
}


/*#comments {
	width: 400px;
	height: 100px;
	background-color: black;
	border: 1px solid white;
} 

#comments h2{
	font-size: 14px;
	color: white;
	padding-left: 10px;
}

#profile-picture {
	width: 50px;
	height: 20px;
	padding-left: 10px;
	padding-bottom: 30px;
	background-color:white;
}

#profile-picture {
	width: 50px;
	padding-left: 10px;
}

#profile-name {
	width: 0px;
	float: right;
	padding-left: 20px;
}	

#profile-name  p{
	font-size: 14px;
	color: white;
}*/

<!DOCTYPE html>
<html>

<head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
  <title>Roleplay Server of Kane </title>

</head>

<body>
  <div id="header-wrapper">
    <div id="header">
      <div id="toolbar">

        <div id="menu">
          <ul>
            <li class="current_page_item"><a href="index.html">Home</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Ucp</a></li>
            <li><a href="changelog.html">Changelog</a></li>
          </ul>
        </div>
      </div>

    </div>
  </div>
  <div id="content-wrapper">
    <div id="toolbar2">

    </div>
  </div>
  <div id="main-wrapper">
    <div id="content">
      <div id="welcomee-message">
        <center>
          <h1>General Website Changelog</h1>
        </center>
        <hr>
      </div>
      <div id="information-center">


      </div>
      <div id="changelog">
        <h1> Version 1.0 - 15.09.2017</h1>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>

        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        < </div>
      </div>
    </div>
    <div style="clear:both;">
      <div id="footer">
        <div id="footer-text">

          <div id="menu2">
            <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="#">Forum</a></li>
              <li><a href="#">Ucp</a></li>
              <li class="current_page_item"><a href="changelog.html">Changelog</a></li>
            </ul>
          </div>
          <div id="copyrights">
            <p>---- Roleplay © 2017 - Code and Design by Hazard </p>
          </div>
        </div>
      </div>
    </div>
</body>

</html>

Answer 1

删除所有这些类的高度并进行测试

Fiddle

    #changelog {
        width: 500px;
        /* height: 500px; */
    }
    #information-center {
        width: 250px;
        /* height: 500px; */
        float: right;
    }
    #content {
        width: 680px;
        /* height: 1200px; */
        margin: 0 auto;
        padding-top: 20px;
    }

并且您的 html 结构不是以正确的方式尝试验证它