主要内容div重叠页脚

时间：2016-09-30 03:15:26

标签： html css

我一直在参加网页设计课程，我开始自己动手测试一些东西。我为网页设置了一堆面板，当我制作页脚时，我发现了一个问题。

每当我的主体div开始填满并到达页脚时，它就会在页脚下面而不是调整网页并将其向下推。有什么想法吗？

div的图片：

Picture of div going under 

body,
html {
  background-color: #bee9e4;
  height: 100%;
  width: 100%;
}
.center {
  text-align: center;
}
#banner {
  background-color: lightgrey;
  background: linear-gradient(to right, #99ffcc, white, #99ffcc);
  border-style: groove;
}
#aboutme {
  border-style: groove;
  border-width: 2px;
  border-color: lightblue;
  box-shadow: 0px 2px 2px grey;
}
#wrapper {
  min-height: 100%;
  position: relative;
}
#middlepanel {
  margin-top: 20px;
  background-color: lightgrey;
  margin-left: 21%;
  width: 58%;
  border-style: groove;
  overflow: auto;
}
#bannerpic {
  float: right;
  margin: 5px 20px 10px 5px;
  border-style: inset;
  border-width: 7px;
  border-color: lightblue;
  padding: 3px;
  box-shadow: 6px 6px 6px red;
}
#leftpanel {
  float: left;
  background-color: lightgrey;
  width: 20%;
  border-style: groove;
  overflow: auto;
}
#rightpanel {
  float: right;
  background-color: lightgrey;
  width: 20%;
  border-style: groove;
  overflow: auto;
}
#footer {
  background-color: lightgrey;
  border-style: groove;
  overflow: auto;
  width: 100%;
  height: 75px;
  position: absolute;
  bottom: 0;
  left: 0;
}
#content {
  padding-bottom: 75px;
  /* Height of the footer element */
}
.videoleft {
  float: left;
  width: 45%;
}
.videoright {
  float: right;
  width: 45%;
}
@media only screen and (max-width: 640px) {
  #leftpanel {
    display: none;
  }
  #rightpanel {
    display: none;
  }
  #footer {
    display: none;
  }
  #middlepanel {
    width: 100%;
    margin-left: 0%;
  }
}
.clearfloat {
  clear: both;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-left: 5px;
}
<div id="infoaboutme">
  <p>I am a Junior at //</p>
  <p>I like to learn at school.</p>
  <p>I love to spend time on the computer</p>
</div>

<br class="clearfloat">
</div>

<div>
  <ul class="w3-navbar w3-card-2 w3-grey">
    <li>
      <a href="http://192.168.1.100/a2school">Mr. M</a>
    </li>
    <li>
      <a href="http://192.168.1.113/a2carlson">Home</a>
    </li>
    <li class="w3-dropdown-hover w3-hover-light-grey">
      <a class="w3-hover-grey" href="#">My Favs<i class="fa fa-caret-down"> </i></a>
      <div class="w3-dropdown-content w3-white w3-card-4">
        <a href="http://google.com">Google</a>
        <a href="http://twitch.tv">Twitch</a>
        <a href="http://youtube.com">Youtube</a>
      </div>
    </li>
    <li class="w3-dropdown-hover w3-hover-light-grey">
      <a class="w3-hover-grey" href="#">CHS<i class="fa fa-caret-down"> </i></a>
      <div class="w3-dropdown-content w3-white w3-card-4">
        <a href="http://192.168.1.104/a2school">Eli T</a>
        <a href="http://192.168.1.105/a2school">Ashley X</a>
        <a href="http://192.168.1.115/a2school">Andrew H</a>
        <a href="http://192.168.1.106/a2school">Savannah C</a>
        <a href="http://192.168.1.107/a2school">Robert G</a>
      </div>
    </li>

    <li class="w3-dropdown-hover w3-hover-light-grey">
      <a class="w3-hover-grey" href="#">EHS<i class="fa fa-caret-down"> </i></a>
      <div class="w3-dropdown-content w3-white w3-card-4">
        <a href="http://192.168.1.123/a2school">Ethan P</a>
        <a href="http://192.168.1.169/a2school">Richard M</a>
      </div>
    </li>

    <li class="w3-dropdown-hover w3-hover-light-grey">
      <a class="w3-hover-grey" href="#">MA<i class="fa fa-caret-down"> </i></a>
      <div class="w3-dropdown-content w3-white w3-card-4">
        <a href="http://192.168.1.103/a2school">Bryan H</a>
      </div>
    </li>

    <li class="w3-dropdown-hover w3-hover-light-grey">
      <a class="w3-hover-grey" href="#">MHS<i class="fa fa-caret-down"> </i></a>
      <div class="w3-dropdown-content w3-white w3-card-4">
        <a href="http://192.168.1.112/a2school">Tyler P</a>
        <a href="http://192.168.1.114/a2school">Neomi B</a>
        <a href="http://192.168.1.116/a2school">Tanis S B</a>
        <a href="http://192.168.1.130/a2school">Nicole C</a>
        <a href="http://192.168.1.124/a2school">Vic S</a>
      </div>
    </li>

    <li class="w3-dropdown-hover w3-hover-light-grey">
      <a class="w3-hover-grey" href="#">MVHS<i class="fa fa-caret-down"> </i></a>
      <div class="w3-dropdown-content w3-white w3-card-4">
        <a href="http://192.168.1.113/a2school">Daniel C</a>
        <a href="http://192.168.1.121/a2school">Brendon S</a>
        <a href="http://192.168.1.122/a2school">Micah G</a>
      </div>
    </li>

    <li class="w3-dropdown-hover w3-hover-light-grey">
      <a class="w3-hover-grey" href="#">RHS<i class="fa fa-caret-down"> </i></a>
      <div class="w3-dropdown-content w3-white w3-card-4">
        <a href="http://192.168.1.120/a2school">Cole P</a>
        <a href="http://192.168.1.108/a2school">Andrew W</a>
        <a href="http://192.168.1.107/a2school">Alexis B</a>
        <a href="http://192.168.1.110/a2school">Chase S</a>
        <a href="http://192.168.1.152/a2school">David B</a>
      </div>
    </li>
  </ul>
</div>

<div id="wrapper">
  <div id="leftpanel">
    <p>Test left float</p>
  </div>

  <div id="rightpanel">
    <p>This is a test right float</p>
  </div>

  <div id="middlepanel">
    <h1 class="center">Pictures taken for and of class!</h1>
    <div id="slideShow" class="w3-content" style="max-width:600px;position:relative">
      <div>
        <div class="w3-display-container mySlides">
          <img src="images/code.png" style="width:100%" height="360px" alt="code.jpg">
          <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
            Code
          </div>
        </div>

        <div class="w3-display-container mySlides">
          <img src="images/class.JPG" style="width:100%" height="360px" alt="class.jpg">
          <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
            Class
          </div>
        </div>

        <div class="w3-display-container mySlides">
          <img src="images/graded.JPG" style="width:100%" height="360px" alt="graded.jpg">
          <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
            Class
          </div>
        </div>
        <a class="w3-btn-floating w3-hover-dark-grey" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">[</a>
        <a class="w3-btn-floating w3-hover-dark-grey" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">]</a>
        <script src="js/slideshow.js"></script>

      </div>
    </div>

    <h1 class="center">Videos for the class!</h1>
    <div class="videoleft">
      <video width="100%" height="100%" controls>
        <source src="videos/video_converted.ogg" type="video/ogg">
          <source src="videos/video_converted2.webm" type="video/webm">
            <source src="videos/video_converted3.webm" type="video/webm">
              Your browser does not support the video tag.
      </video>
    </div>

    <div class="videoright">
      <video width="100%" height="100%" controls>
        <source src="#" type="video/ogg">
          <source src="#" type="video/webm">
            <source src="#" type="video/webm">
              Your browser does not support the video tag.
      </video>
    </div>
  </div>

  <div id="footer">
    <h3>Stest</h3>
  </div>
</div>

2 个答案:

答案 0 :(得分：2)

以下是问题的根源：

#footer {
    background-color: lightgrey;
    border-style: groove;
    overflow: auto;
    width: 100%;
    height: 75px;
    position: absolute;  /*  <--- REMOVES ELEMENT FROM NORMAL FLOW */
    bottom: 0;
    left: 0;
}

当你绝对定位一个元素时，你可以从＆＃34;正常流程中删除它＆＃34; （也称为＃34;文件流＆＃34;）。这意味着该元素不会占据文档中的任何空间，并且周围的元素甚至不知道它存在。

您的主要内容div与页脚重叠，因为就内容div而言，空格为空。在绝对定位之前，页脚更像是一堵墙。之后，它更像是一个云，周围的元素直接穿过它。

为了理解其工作原理，您需要掌握两个概念：

答案 1 :(得分：0)

检查jsbin中的输出

Link to Jsbin

按如下方式更新你的css 

#footer {
    background-color: lightgrey;
    border-style: groove;
    overflow: auto;
    width: 100%;
    height: 75px;

}

＆＃13;
＆＃13; 
body,
html {
	margin:0;
	padding:0;
    background-color: #bee9e4;
    
    width: 100%;
}

.center {
    text-align: center;
}

#banner {
    background-color: lightgrey;
    background: linear-gradient(to right, #99ffcc, white, #99ffcc);
    border-style: groove;
}

#aboutme {
    border-style: groove;
    border-width: 2px;
    border-color: lightblue;
    box-shadow: 0px 2px 2px grey;
}

#wrapper {
    min-height: 100%;
    position: relative;
}

#middlepanel {
    margin-top: 20px;
    background-color: lightgrey;
    margin-left: 21%;
    width: 58%;
    border-style: groove;
    overflow: auto;
}

#bannerpic {
    float: right;
    margin: 5px 20px 10px 5px;
    border-style: inset;
    border-width: 7px;
    border-color: lightblue;
    padding: 3px;
    box-shadow: 6px 6px 6px red;
}

#leftpanel {
    float: left;
    background-color: lightgrey;
    width: 20%;
    border-style: groove;
    overflow: auto;
}

#rightpanel {
    float: right;
    background-color: lightgrey;
    width: 20%;
    border-style: groove;
    overflow: auto;
}

#footer {
    background-color: lightgrey;
    border-style: groove;
    overflow: auto;
    width: 100%;
    height: 75px;
    
}

#content {
    padding-bottom: 75px;
    /* Height of the footer element */
}

.videoleft {
    float: left;
    width: 45%;
}

.videoright {
    float: right;
    width: 45%;
}

@media only screen and (max-width: 640px) {
    #leftpanel {
        display: none;
    }
    #rightpanel {
        display: none;
    }
    #footer {
        position:relative;
			   top:50px;
    }
    #middlepanel {
        width: 100%;
        margin-left: 0%;
    }
}

.clearfloat {
    clear: both;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-left: 5px;
}
＆＃13; 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Daniel's Intro Website</title>
		<script src="js/jquery-3.1.0.min.js"></script>
		<script src="js/main.js"></script>
		<link rel="stylesheet" type="text/css" href="css/w3.css">
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
	</head>

	<body>
		<div id="banner">
			<img id="bannerpic" src="images/graded.JPG" alt="class.jpg">
			<h1 id="Welcome">Welcome!</h1>
			<h4>Created by Daniel C.</h4>

			<input id="aboutme" type="button" value="About Me!">
			<div id="infoaboutme">
				<p>I am a Junior at Mountain View High School.</p>
				<p>I like to learn at school.</p>
				<p>I love to spend time on the computer</p>
			</div>

			<br class="clearfloat">
		</div>

		<div>
			<ul class="w3-navbar w3-card-2 w3-grey">
				<li>
					<a href="http://192.168.1.100/a2school">Mr. M</a>
				</li>
				<li>
					<a href="http://192.168.1.113/a2carlson">Home</a>
				</li>
				<li class="w3-dropdown-hover w3-hover-light-grey">
					<a class="w3-hover-grey" href="#">My Favs<i class="fa fa-caret-down"> </i></a>
					<div class="w3-dropdown-content w3-white w3-card-4">
						<a href="http://google.com">Google</a>
						<a href="http://twitch.tv">Twitch</a>
						<a href="http://youtube.com">Youtube</a>
					</div>
				</li>
				<li class="w3-dropdown-hover w3-hover-light-grey">
					<a class="w3-hover-grey" href="#">CHS<i class="fa fa-caret-down"> </i></a>
					<div class="w3-dropdown-content w3-white w3-card-4">
						<a href="http://192.168.1.104/a2school">Eli T</a>
						<a href="http://192.168.1.105/a2school">Ashley X</a>
						<a href="http://192.168.1.115/a2school">Andrew H</a>
						<a href="http://192.168.1.106/a2school">Savannah C</a>
						<a href="http://192.168.1.107/a2school">Robert G</a>
					</div>
				</li>

				<li class="w3-dropdown-hover w3-hover-light-grey">
					<a class="w3-hover-grey" href="#">EHS<i class="fa fa-caret-down"> </i></a>
					<div class="w3-dropdown-content w3-white w3-card-4">
						<a href="http://192.168.1.123/a2school">Ethan P</a>
						<a href="http://192.168.1.169/a2school">Richard M</a>
					</div>
				</li>

				<li class="w3-dropdown-hover w3-hover-light-grey">
					<a class="w3-hover-grey" href="#">MA<i class="fa fa-caret-down"> </i></a>
					<div class="w3-dropdown-content w3-white w3-card-4">
						<a href="http://192.168.1.103/a2school">Bryan H</a>
					</div>
				</li>

				<li class="w3-dropdown-hover w3-hover-light-grey">
					<a class="w3-hover-grey" href="#">MHS<i class="fa fa-caret-down"> </i></a>
					<div class="w3-dropdown-content w3-white w3-card-4">
						<a href="http://192.168.1.112/a2school">Tyler P</a>
						<a href="http://192.168.1.114/a2school">Neomi B</a>
						<a href="http://192.168.1.116/a2school">Tanis S B</a>
						<a href="http://192.168.1.130/a2school">Nicole C</a>
						<a href="http://192.168.1.124/a2school">Vic S</a>
					</div>
				</li>

				<li class="w3-dropdown-hover w3-hover-light-grey">
					<a class="w3-hover-grey" href="#">MVHS<i class="fa fa-caret-down"> </i></a>
					<div class="w3-dropdown-content w3-white w3-card-4">
						<a href="http://192.168.1.113/a2school">Daniel C</a>
						<a href="http://192.168.1.121/a2school">Brendon S</a>
						<a href="http://192.168.1.122/a2school">Micah G</a>
					</div>
				</li>

				<li class="w3-dropdown-hover w3-hover-light-grey">
					<a class="w3-hover-grey" href="#">RHS<i class="fa fa-caret-down"> </i></a>
					<div class="w3-dropdown-content w3-white w3-card-4">
						<a href="http://192.168.1.120/a2school">Cole P</a>
						<a href="http://192.168.1.108/a2school">Andrew W</a>
						<a href="http://192.168.1.107/a2school">Alexis B</a>
						<a href="http://192.168.1.110/a2school">Chase S</a>
						<a href="http://192.168.1.152/a2school">David B</a>
					</div>
				</li>
			</ul>
		</div>

		<div id="wrapper">
			<div id="leftpanel">
				<p>Test left float</p>
			</div>

			<div id="rightpanel">
				<p>This is a test right float</p>
			</div>

			<div id="middlepanel">
				<h1 class="center">Pictures taken for and of class!</h1>
				<div id="slideShow" class="w3-content" style="max-width:600px;position:relative">
					<div>
						<div class="w3-display-container mySlides">
							<img src="images/code.png" style="width:100%" height="360px" alt="code.jpg">
							<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
								Code
							</div>
						</div>

						<div class="w3-display-container mySlides">
							<img src="images/class.JPG" style="width:100%" height="360px" alt="class.jpg">
							<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
								Class
							</div>
						</div>

						<div class="w3-display-container mySlides">
							<img src="images/graded.JPG" style="width:100%" height="360px" alt="graded.jpg">
							<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
								Class
							</div>
						</div>
						<a class="w3-btn-floating w3-hover-dark-grey" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">[</a>
						<a class="w3-btn-floating w3-hover-dark-grey" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">]</a>
						<script src="js/slideshow.js"></script>

					</div>
				</div>

				<h1 class="center">Videos for the class!</h1>
				<div class="videoleft">
					<video width="100%" height="100%" controls>
						<source src="videos/video_converted.ogg" type="video/ogg">
						<source src="videos/video_converted2.webm" type="video/webm">
						<source src="videos/video_converted3.webm" type="video/webm">
						Your browser does not support the video tag.
					</video>
				</div>

				<div class="videoright">
					<video width="100%" height="100%" controls>
						<source src="#" type="video/ogg">
						<source src="#" type="video/webm">
						<source src="#" type="video/webm">
						Your browser does not support the video tag.
					</video>
				</div>
			</div>

			<div id="footer">
				<h3>Stest</h3>
			</div>
		</div>

	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题