Question

我在制作响应式网站时遇到一些问题。我想使页脚像页眉一样，但我无法处理。我已经尝试了很多方法，但是即时通讯不是很擅长制作网站。请帮忙，如果可以的话，我应该怎么做才能使该页脚响应所有尺寸。

这是我的index.html和style.css

    body {
	font: 15px/1.5 Arial, Helvetica, sans-serif;
	/*padding: 0;*/
	margin: 0;
	background-color: #e7e7e7;
}

.container {
	width: 80%;
	margin: auto;
	overflow: hidden;
}

img { 
	padding-right: 55%;
	padding-top: 22%;
	/*width: 13%;*/
	min-height: 10%;
 }

.access { 
	transform: translate(-1%, -150%);
	 }

header { 
	background: #14a79d;
	color: #ffffff;
	text-align: center;
	min-height: 70px;
	margin-right: 18%;
	margin-left: 18%;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
 }

.footer { 
	position: relative;
	background: #14a79d;
	color: #ffffff;
	text-align: center;
	margin-right: 10%;
	margin-left: 10%;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
 }

.box {
	text-align: center;
	background-color: white;
	height: 78vh;
	background-size: cover;
	margin-left: 10%;
	margin-right: 10%;
}

/*footer {*/
	/*position: fixed;*/
	/*overflow: auto;*/
	/*padding: 0 20px;*/
	/*left: 0;*/
	/*bottom: 0;*/
	/*right: 0;*/
	/*width: 60%;*/
	/*margin-top: 100px;*/
	/*color: #ffffff;*/
	/*background-color: #14a79d;*/
	/*text-align: center;*/
	/*line-height: 50px;*/
	/*padding: 0 20px;*/
	/*margin-right: 18%;*/
	/*margin-left: 18%;*/
	/*height: 100%;*/
	/*margin-top: -2%;*/
	/*border-bottom-left-radius: 25px;*/
	/*border-bottom-right-radius: 25px;*/
	 /*}*/

<header>
  <div class="container">
    <div id="denied">
      <h1>Access Denied</h1>
    </div>
  </div>
</header>

<section id="boxes">
  <div class="container">
    <div class="box">
      <img src="x.png">
      <div class="access">

        <h1 style="color: red;">Page Blocked</h1>

        <p>You are attempting to access a forbidden Site.<br>It is blocked according to<br> the organization security policy.</p>

      </div>
    </div>

    <div class="footer">
      <p>&copy copyright ... 2018</p>
    </div>
  </div>

</section>

Answer 1

这怎么样？也许从主容器中取出页脚会有所帮助。

body {
    font: 15px/1.5 Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    background-color: #f4f4f4;
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

header { 
    background: #14a79d;
    color: #ffffff;
    text-align: center;
    height: 20vh;
    margin-right: 18%;
    margin-left: 18%;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
 }

footer {
    color: #ffffff;
    background-color: #14a79d;
    text-align: center;
    margin-right: 18%;
    margin-left: 18%;
    height: 10vh;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
     }

.box {
    text-align: center;
    background-color: grey;
    height: 70vh;
    background-size: cover;
    margin-left: 10%;
    margin-right: 10%;
}

<!DOCTYPE html>
<html>
<head>
    <title>Access Denied</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device=width">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <div id="denied">
                <h1>Access Denied</h1>
            </div>
        </div>
    </header>

    <section id="boxes">
        <div class="container">
            <div class="box">
                <img src="x.png">
                <div class="access">
                  <h1 style="color: red;">Page Blocked</h1>

                  <p>You are attempting to access a forbidden Site.<br>It is blocked according to<br> the organization security policy.</p>

                </div>
            </div>
        </div>
    </section>
    
    <footer>
      <div class='container'>
         <p>&copy copyright ... 2018</p>
    </div>
    </footer>
</body>
</html>

Answer 2

* {
  box-sizing: border-box;
}

body {
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

header {
  background: #14a79d;
  color: #ffffff;
  text-align: center;
  /*padding-top: 30px;*/
  min-height: 70px;
  margin-right: 18%;
  margin-left: 18%;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

footer {
  /*position: fixed;*/
  /*overflow: auto;*/
  padding: 0 10px;
  /*left: 0;*/
  /*bottom: 0;*/
  /*right: 0;*/
  /*width: 60%;*/
  /*margin-top: 100px;*/
  color: #ffffff;
  background-color: #14a79d;
  text-align: center;
  /*margin-left: 18%;*/
  /*margin-right: 10%;*/
  /*line-height: 50px;*/
  /*padding: 0 20px;*/
  margin-right: 18%;
  margin-left: 18%;
  /*height: 100%;*/
  /*margin-top: -2%;*/
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

.footer {
  height: 50px;
}

.box {
  text-align: center;
  background-color: grey;
  height: 85vh;
  background-size: cover;
  margin-left: 10%;
  margin-right: 10%;
}

.footer-inner {
  margin-top: 0;
  background-color: #1f5cff;
  text-align: center;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

<header>
  <div class="container">
    <div id="denied">
      <h1>Access Denied</h1>
    </div>
  </div>
</header>
<section id="boxes">
  <div class="container">
    <div class="box">
      <img src="x.png">
      <div class="access">
        <h1 style="color: red;">Page Blocked</h1>
        <p>You are attempting to access a forbidden Site.<br>It is blocked according to<br> the organization security policy.</p>
      </div>
    </div>
    <div class="footer">
      <div class="container footer-inner">
        <p class="text-center">&copy copyright ... 2018</p>
      </div>
    </div>
  </div>
</section>

Answer 3

尝试使用em单位的文本大小， em-相对于元素的字体大小（2em表示当前字体大小的2倍）

回应文字

3 个答案: