如何在页脚和页面底部之间放置 space？

Question

我想在我的页面页脚和屏幕底部之间放置一些 space 以便人们可以看到背景。我也想知道为什么 'content' div 左右的阴影没有到达它的底部？我对阴影使用了错误的代码吗？我希望阴影只出现在左侧和右侧。谢谢！

* {
  box-sizing: border-box;
}

@font-face {
 font-family: 'zcool';
 src:  url('fonts/zcool.ttf') format('ttf');
 local:  url('fonts/zcool.ttf') format('ttf');
 font-weight: normal;
 font-style: normal;
}

html,
body {
  height: 100%;
  width: 100%;
  
}

body {
 padding: 0;
 margin: 0;
 border: 0;
 background-attachment: fixed;
 background-size: 100% auto;
 background-image: url("img/background.jpg");
 background-repeat: no-repeat;
 background-size: 100% 100%;
}

ul#horizontal-list {
  list-style: none;
}

ul#horizontal-list li {
  display: inline;
}

ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: center;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: red;
}

.navbar {
 position: fixed;
 top: 0;
 height: 50px;
 width: 100%;
 background-color: black;
 color: white;
 text-align: center;
 left: 0;
 right: 0;
 z-index: 1;
}

.navbar ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  margin-top: 0px;
}

.header {
 background-image: url(img/johnswork.png);
 background-image: 
  -webkit-image-set(
  url(img/johnsworkm.png) 1x,
  url(img/johnswork.png) 2x,
  );
 background-image: 
  image-set(
  url(img/johnsworkm.png) 1x,
  url(img/johnswork.png) 2x,
  );
 background-repeat: no-repeat;
 background-size: 100% 100%;
 height: 100%;
 width: 100%;
    
}

.body {
 height: 100%;
 width: 90%;
 margin: auto;
 padding: 0;
 border: 0;
 color: black;
 padding-left: 5%;
 padding-right: 5%;
 overflow: hidden;
 
 /*background-color: grey;*/
}

.content {
 margin: auto;
 height: 100%;
 width: 90%;
 background-color: white;
 color: black;
 border-right: double;
 border-left: double;
 box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
 text-align: justify;
 font-size: 20px;
 padding-top: 10%;
 padding-bottom: 10%;
 padding-left: 5%;
 padding-right: 5%;
}

.social {
 margin: auto;
 display: flex;
 justify-content: center;
}


.me {
 float: left;
 margin-right: 3%;
 height: 100%;
}


.footer {
  height: 50px;
  width: 72%;
  background-color: black;
  color: white;
  margin: auto;
  vertical-align: middle;
}

#copyright {
 display: table;
}


#cpy{
    display: table-cell;
    vertical-align: middle;
}

<!DOCTYPE html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
  <meta name="description" content="My Personal Portfolio">
  <title>John's Work</title>
</head>

<body>


 <div class="navbar">

  <ul>
   <li><a href="index.html">HOME</a></li>
   <li><a href="about.html">ABOUT</a></li>
   <li><a href="contact.html">CONTACT</a></li>
  </ul>

 </div>


 <div class="header">
  <!--Can stay empty-->
  <img src="img/johnswork.jpg" alt="John's Work" height="235px" width="900px">
 </div>

  <div class="body">
   <div class="content">
   
   Lorem ipsum dolor sit amet, consectetur adipiscing.
   
   </div>
  </div>

 <div class="footer" id="copyright" style="text-align:center">
 <div id="cpy">&copy; DA COSTA JOAO (2019)</div>
 </div>



</body>

</html>

Answer 1

如果您不希望页脚与屏幕底部齐平，只需在 .footer 中添加一点 margin-bottom。在我的示例中，我使用了 30px。

至于影子的长度，这是您要查找的第二个值（逗号前后）。我已将其更改为 4px:

box-shadow: 12px 4px 15px -4px rgba(31, 73, 125, 0.8), -12px 4px 8px -4px rgba(31, 73, 125, 0.8);

请注意，这会使您的阴影向下移动。
您可能需要增加宽度以适应这一点。

这两个都可以在以下（格式化的）示例中看到：

* {
  box-sizing: border-box;
}

@font-face {
  font-family: 'zcool';
  src: url('fonts/zcool.ttf') format('ttf');
  local: url('fonts/zcool.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  padding: 0;
  margin: 0;
  border: 0;
  background-attachment: fixed;
  background-size: 100% auto;
  background-image: url("img/background.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

ul#horizontal-list {
  list-style: none;
}

ul#horizontal-list li {
  display: inline;
}

ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: center;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: red;
}

.navbar {
  position: fixed;
  top: 0;
  height: 50px;
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
  left: 0;
  right: 0;
  z-index: 1;
}

.navbar ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  margin-top: 0px;
}

.header {
  background-image: url(img/johnswork.png);
  background-image: -webkit-image-set( url(img/johnsworkm.png) 1x, url(img/johnswork.png) 2x, );
  background-image: image-set( url(img/johnsworkm.png) 1x, url(img/johnswork.png) 2x, );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
}

.body {
  height: 100%;
  width: 90%;
  margin: auto;
  padding: 0;
  border: 0;
  color: black;
  padding-left: 5%;
  padding-right: 5%;
  overflow: hidden;
  /*background-color: grey;*/
}

.content {
  margin: auto;
  height: 100%;
  width: 90%;
  background-color: white;
  color: black;
  border-right: double;
  border-left: double;
  box-shadow: 12px 4px 15px -4px rgba(31, 73, 125, 0.8), -12px 4px 8px -4px rgba(31, 73, 125, 0.8);
  text-align: justify;
  font-size: 20px;
  padding-top: 10%;
  padding-bottom: 10%;
  padding-left: 5%;
  padding-right: 5%;
}

.social {
  margin: auto;
  display: flex;
  justify-content: center;
}

.me {
  float: left;
  margin-right: 3%;
  height: 100%;
}

.footer {
  height: 50px;
  width: 72%;
  background-color: black;
  color: white;
  margin: auto;
  vertical-align: middle;
  margin-bottom: 30px;
}

#copyright {
  display: table;
}

#cpy {
  display: table-cell;
  vertical-align: middle;
}

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link rel="icon" type="image/x-icon" href="img/favicon.ico" />
  <meta name="description" content="My Personal Portfolio">
  <title>John's Work</title>
</head>

<body>
  <div class="navbar">
    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </div>

  <div class="header">
    <!--Can stay empty-->
    <img src="img/johnswork.jpg" alt="John's Work" height="235px" width="900px">
  </div>
  
  <div class="body">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing.
    </div>
  </div>

  <div class="footer" id="copyright" style="text-align:center">
    <div id="cpy">&copy; DA COSTA JOAO (2019)</div>
  </div>
</body>

</html>

Answer 2

你可以做类似的东西。

我改你的box-shadow: 0px 0px 18px 3px rgba(31, 73, 125, 0.8);，把margin-bottom加到class.footer;

* {
  box-sizing: border-box;
}
@font-face {
 font-family: 'zcool';
 src:  url('fonts/zcool.ttf') format('ttf');
 local:  url('fonts/zcool.ttf') format('ttf');
 font-weight: normal;
 font-style: normal;
}
html,
body {
  height: 100%;
  width: 100%;      
}
body {
 padding: 0 0 10px 0;
 margin: 0;
 border: 0;
 background-attachment: fixed;
 background-size: 100% auto;
 background-image: url("img/background.jpg");
 background-repeat: no-repeat;
 background-size: 100% 100%;
}
ul#horizontal-list {
  list-style: none;
}
ul#horizontal-list li {
  display: inline;
}
ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: center;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
li a:hover {
  background-color: red;
}
.navbar {
 position: fixed;
 top: 0;
 height: 50px;
 width: 100%;
 background-color: black;
 color: white;
 text-align: center;
 left: 0;
 right: 0;
 z-index: 1;
}
.navbar ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  margin-top: 0px;
}
.header {
 background-image: url(img/johnswork.png);
 background-image: 
  -webkit-image-set(
  url(img/johnsworkm.png) 1x,
  url(img/johnswork.png) 2x,
  );
 background-image: 
  image-set(
  url(img/johnsworkm.png) 1x,
  url(img/johnswork.png) 2x,
  );
 background-repeat: no-repeat;
 background-size: 100% 100%;
 height: 100%;
 width: 100%;
    
}

.body {
 height: 100%;
 width: 90%;
 margin: auto;
 padding: 0;
 border: 0;
 color: black;
 padding-left: 5%;
 padding-right: 5%;
 overflow: hidden;     
 /*background-color: grey;*/
}
.content {
 margin: auto;
 height: 100%;
 width: 90%;
 background-color: white;
 color: black;
 border-right: double;
 border-left: double;
 box-shadow: 0px 0px 18px 3px rgba(31, 73, 125, 0.8);
 text-align: justify;
 font-size: 20px;
 padding-top: 10% 5%;     
}
.social {
 margin: auto;
 display: flex;
 justify-content: center;
}
.me {
 float: left;
 margin-right: 3%;
 height: 100%;
}
.footer {
  height: 50px;
  width: 72%;
  background-color: black;
  color: white;
  margin: auto auto 20px;
  vertical-align: middle;
}
#copyright {
 display: table;
}
#cpy{
    display: table-cell;
    vertical-align: middle;
}

<!DOCTYPE html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
  <meta name="description" content="My Personal Portfolio">
  <title>John's Work</title>
</head>
<body>
 <div class="navbar">
   <ul>
     <li><a href="index.html">HOME</a></li>
  <li><a href="about.html">ABOUT</a></li>
  <li><a href="contact.html">CONTACT</a></li>
      </ul>
 </div>
 <div class="header">
   <!--Can stay empty-->
   <img src="img/johnswork.jpg" alt="John's Work" height="235px" width="900px">
 </div>
    <div class="body">
   <div class="content">       
     Lorem ipsum dolor sit amet, consectetur adipiscing.       
      </div>
 </div>
 <div class="footer" id="copyright" style="text-align:center">
 <div id="cpy">&copy; DA COSTA JOAO (2019)</div>
   </div>
 </body>
   </html>

如何在页脚和页面底部之间放置 space？

How to put space between footer and bottom of page?

html

css

footer

shadow

spacing