时间戳

首页 > 解决方案 > 如何定位页脚以隐藏在所有内容下，如下所示？

html - 如何定位页脚以隐藏在所有内容下，如下所示？

问题描述

我正在尝试从该网站复制页脚。https://pulice.com/。

如您所见，页脚隐藏在其他部分下，只有在您一直滚动到底部时才会显示出来。

我使用了我的开发工具，发现页脚的位置是固定的。我对我的也做了同样的事情，这产生了两个问题。

我可以在这两个问题上获得一些帮助吗？

body,
html {
  margin: 0;
  padding: 0;
}


/*---HEADER---*/

header {
  background-image: url(img/wall2.jpeg);
  height: 100vh;
  background-attachment: fixed;
}

nav {
  background-color: white;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  box-shadow: 0px 0px 100px grey;
}

.logo,
ul {
  flex-basis: 30%;
  list-style-type: none;
}

ul {
  margin-right: 30px;
  margin-top: 25px;
}

li {
  display: inline-block;
  font-size: 1.55rem;
  margin-right: 20px;
  font-family: 'Rajdhani';
  color: rgba(102, 102, 102, 0.75);
}

li:hover {
  cursor: pointer;
  color: #1a1a1a;
  transition: all 0.7s ease;
}

.after:after {
  position: relative;
  left: 12px;
  top: 2px;
  display: inline-block;
  content: "";
  width: 1px;
  height: 20px;
  background-color: rgba(102, 102, 102, 0.25);
}

.logo {
  color: red;
  font-size: 3.7rem;
  margin: 10px;
  opacity: 1;
  margin-left: 30px;
}

.phrase {
  text-align: center;
  position: relative;
  top: 300px;
}

.phrase p {
  color: white;
  font-size: 3.5rem;
  font-family: 'Arvo';
  margin-bottom: 30px;
}

.phrase a {
  background-color: red;
  border-radius: 25px;
  color: white;
  font-family: 'Bitter';
  font-size: 1.8rem;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.phrase a:hover {
  background-color: #cc2900;
  transition: all 0.2s ease;
  cursor: pointer;
}

.phrase .fas {
  display: block;
  color: white;
  font-size: 3.5rem;
  margin-top: 15px;
}


/*---ABOUT---*/

.stats {
  width: 100%;
  display: flex;
  box-shadow: 0px 0px 150px grey;
  position: relative;
  z-index: 1;
}

.stats div {
  display: inline-block;
  flex-basis: 35%;
  text-align: center;
  padding-bottom: 30px;
}

.stats p {
  font-size: 2rem;
  color: rgba(102, 102, 102, 1);
  font-family: 'Rajdhani';
  margin-bottom: 0;
  margin-top: 10px;
}

.stats div:before {
  display: inline-block;
  content: '';
  width: 2px;
  height: 35px;
  background-color: rgba(102, 102, 102, 0.60);
}

.about .wrapper {
  width: 100%;
  background-image: url('img/concrete.jpg');
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

.about h1 {
  position: relative;
  top: 40px;
  color: white;
  font-family: 'Rajdhani';
  font-size: 4rem;
  text-align: center;
  margin-top: 0;
  word-spacing: 7px;
  text-shadow: 0px 0px 100px grey;
}

.underline {
  width: 100px;
  height: 2.5px;
  background-color: red;
  margin-right: auto;
  margin-left: auto;
  margin-top: -15px;
  border-radius: 4px;
}

.about p {
  color: white;
  font-size: 1.8rem;
  font-family: 'Arvo';
  margin-bottom: 0;
  padding-bottom: 60px;
  text-align: center;
  margin-top: 40px;
  padding-left: 50px;
  padding-right: 50px;
}


/*---FOOTER---*/

.footer .wrapper {
  width: 100%;
  background-color: red;
  height: 500px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: -1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Kane Concrete And Construction LLC</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>

<body>
  <header>
    <nav>
      <div class="logo">
        <i class="fab fa-accusoft"></i>
      </div>

      <div class="nav">
        <ul>
          <li class="after">Home</li>
          <li class="after">About</li>
          <li class="after">Services</li>
          <li class="after">Job Openings</li>
          <li class="after">Gallery</li>
          <li>Contact</li>
        </ul>
      </div>
    </nav>

    <div class="phrase">
      <p>It all starts at the foundation.</p>
      <a>Get a Quote</a>
      <i class="fas fa-angle-down"></i>
    </div>
  </header>

  <main>
    <div class="stats">
      <div id="start-year">
        <p>Established</p><br>
        <p style="color: red; font-size: 2.3rem; font-family: 'Roboto'; font-weight: bold;">2015</p>
      </div>

      <div id="projects">
        <p>Projects</p><br>
        <p style="color: red; font-size: 2.3rem; font-family: 'Roboto'; font-weight: bold;">200+</p>
      </div>

      <div id="claims">
        <p>Insurance claims</p><br>
        <p style="color: red; font-size: 2.3rem; font-family: 'Roboto'; font-weight: bold;">87%</p>
      </div>
    </div>

    <section class="about">
      <div class="wrapper">
        <h1>About Us</h1>
        <div class="underline"></div>

        <p><span style="color: red;">W</span>e believe that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum doloremque impedit laudantium magnam eos quae ipsum, rem, dolorum saepe laboriosam ipsam nobis architecto debitis, vel aut provident
          tenetur perferendis, aliquid commodi magni sequi hic quia nemo! Nam odio fugiat, similique eum saepe. Laboriosam officiis delectus reiciendis, est tenetur voluptates ducimus! Ducimus enim dolor, eos id porro, amet culpa alias sunt reprehenderit
          necessitatibus deserunt eum. Sunt quia accusamus facilis quo, cum maiores nam illum sit quisquam, tempora fugit? Quod voluptate debitis voluptatum illo. Est, rerum sequi. Corporis atque incidunt placeat aliquam error veniam quis, minus voluptatem,
          qui, a pariatur voluptatibus, ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe labore aliquid magnam velit, nisi consequuntur!</p>
      </div>
    </section>

    <section class="footer">
      <div class="wrapper">

      </div>
    </section>
  </main>
</body>

</html>

标签： htmlcss

解决方案

一种方法是...

你可以在你的页面主体周围有一个包装器（我的例子叫它inner-wrap）。在您的页面底部，有另一个 div （兄弟 to inner-wrap）将页面底部向上推到足以看到固定页脚 - 如果第二个 div 有透明背景......所以，给第二个 div透明背景。

所以重点是俯卧撑 div 和页脚需要相同的高度。

注意：我将页脚 div（和页脚窗口 div）只设置了 150 像素高，这样它们就可以在片段窗口中看到而无需全屏显示。

body, html{margin:0;padding:0;}

/*---HEADER---*/
#inner-wrap{background:pink;}
header{background-image:url(img/wall2.jpeg);height:100vh;background-attachment:fixed;}

nav{background-color:white;width:100%;display:flex;justify-content:space-between;align-items:center;position:relative;top:0;left:0;z-index:2;box-shadow:0px 0px 100px grey;}

.logo, ul{flex-basis:30%;list-style-type:none;}

ul{margin-right:30px;margin-top:25px;}

li{display:inline-block;font-size:1.55rem;margin-right:20px;font-family:'Rajdhani';color:rgba(102,102,102,0.75);}

li:hover{cursor:pointer;color:#1a1a1a;transition:all 0.7s ease;}

.after:after{position:relative;left:12px;top:2px;display:inline-block;content:"";width:1px;height:20px;background-color:rgba(102,102,102,0.25);}

.logo{color:red;font-size:3.7rem;margin:10px;opacity:1;margin-left:30px;}

.phrase{text-align:center;position:relative;top:300px;}

.phrase p{color:white;font-size:3.5rem;font-family:'Arvo';margin-bottom:30px;}

.phrase a{background-color:red;border-radius:25px;color:white;font-family:'Bitter';font-size:1.8rem;padding-left:15px;padding-right:15px;padding-bottom:10px;padding-top:10px;}

.phrase a:hover{background-color:#cc2900;transition:all 0.2s ease;cursor:pointer;}

.phrase .fas{display:block;color:white;font-size:3.5rem;margin-top:15px;}

/*---ABOUT---*/

.stats{width:100%;display:flex;box-shadow:0px 0px 150px grey;position:relative;z-index:1;}

.stats div{display:inline-block;flex-basis:35%;text-align:center;padding-bottom:30px;}
.stats p{font-size:2rem;color:rgba(102,102,102, 1);font-family:'Rajdhani';margin-bottom:0;margin-top:10px;}
.stats div:before{display:inline-block;content:'';width:2px;height:35px;background-color:rgba(102,102,102, 0.60);}
.about .wrapper{width:100%;background-image:url('img/concrete.jpg');background-position:center;background-attachment:fixed;background-size:cover;}
.about h1{position:relative;top:40px;color:white;font-family:'Rajdhani';font-size:4rem;text-align:center;margin-top:0;word-spacing:7px;text-shadow:0px 0px 100px grey;}
.underline{width:100px;height:2.5px;background-color:red;margin-right:auto;margin-left:auto;margin-top:-15px;border-radius:4px;}
.about p{color:white;font-size:1.8rem;font-family:'Arvo';margin-bottom:0;padding-bottom:60px;text-align:center;margin-top:40px;padding-left:50px;padding-right:50px;}

/*---FOOTER---*/
.footer-window{width:100%;height:150px;background:transparent;}
.footer{width:100%;background-color:purple;height:150px;position:fixed;bottom:0;left:0;z-index:-1;padding:20px;}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Kane Concrete And Construction LLC</title>
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
  <div id="inner-wrap">
	<header>
		<nav>
			<div class="logo">
				<i class="fab fa-accusoft"></i>
			</div>

			<div class="nav">
				<ul>
					<li class="after">Home</li>
					<li class="after">About</li>
					<li class="after">Services</li>
					<li class="after">Job Openings</li>
					<li class="after">Gallery</li>
					<li>Contact</li>
				</ul>
			</div>
		</nav>
		
		<div class="phrase">
			<p>It all starts at the foundation.</p>
			<a>Get a Quote</a>
			<i class="fas fa-angle-down"></i>
		</div>	
	</header>

	<main>
		<div class="stats">
			<div id="start-year">
				<p>Established</p><br>
				<p style="color: red; font-size: 2.3rem; font-family: 'Roboto'; font-weight: bold;">2015</p>
			</div>

			<div id="projects">
				<p>Projects</p><br>
				<p style="color: red; font-size: 2.3rem; font-family: 'Roboto'; font-weight: bold;">200+</p>
			</div>

			<div id="claims">
				<p>Insurance claims</p><br>
				<p style="color: red; font-size: 2.3rem; font-family: 'Roboto'; font-weight: bold;">87%</p>
			</div>
		</div>

		<section class="about">
			<div class="wrapper">
				<h1>About Us</h1>
				<div class="underline"></div>

				<p><span style="color: red;">W</span>e believe that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum doloremque impedit laudantium magnam eos quae ipsum, rem, dolorum saepe laboriosam ipsam nobis architecto debitis, vel aut provident tenetur perferendis, aliquid commodi magni sequi hic quia nemo! Nam odio fugiat, similique eum saepe. Laboriosam officiis delectus reiciendis, est tenetur voluptates ducimus! Ducimus enim dolor, eos id porro, amet culpa alias sunt reprehenderit necessitatibus deserunt eum. Sunt quia accusamus facilis quo, cum maiores nam illum sit quisquam, tempora fugit? Quod voluptate debitis voluptatum illo. Est, rerum sequi. Corporis atque incidunt placeat aliquam error veniam quis, minus voluptatem, qui, a pariatur voluptatibus, ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe labore aliquid magnam velit, nisi consequuntur!</p>
			</div>
		</section>
  </div>
    <section class="footer-window"></section>

		<section class="footer">
			<div class="wrapper">
				This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. 
			</div>
		</section>
	</main>
</body>
</html>

推荐阅读