页脚下方未固定页脚

时间：2017-10-05 03:31:10

标签： javascript html css

在这里，我想将页脚修复到页面下方。我似乎无法为此页面执行此操作，而footer的css代码在其他页面上运行良好。同样，我想将页脚固定在页面下方。

需要帮助。 

(function() {
  function onSubmitClicked(event) {

    var product = document.getElementById('product'),
      productVal = product.value,
      profile = document.getElementById('profile'),
      profileVal = profile.value;
    url = 'testPoint.html?product=' + encodeURIComponent(productVal) + '&profile=' + encodeURIComponent(profileVal);
    location.href = url;
  }

  var submitButton = document.getElementById('btngo');
  submitButton.addEventListener('click', onSubmitClicked);
})();
body {
  background-color: #d62929;
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: whitesmoke;
  font-weight: bold;
  font-size: 18px;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 22px 30px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: #c12525;
  color: white;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: whitesmoke;
  min-width: 250px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 20px 20px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 15px;
}

.dropdown-content a:hover {
  background-color: #c12525;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.active {
  background-color: #d62929;
  color: white;
  font-weight: bold;
  font-size: 18px;
}

@media screen and (max-width: 600px) {
  ul li,
  ul li {
    float: none;
  }
}

@media screen and (max-width: 300px) {
  footer {
    -webkit-order: 3;
    order: 3;
  }
}

h1 {
  font-size: 40px;
  font-weight: bold;
}

h2 {
  font-size: 20px;
  font-weight: bold;
}

p2 {
  font-size: 15px;
  font-weight: bold;
}

tr,
td {
  padding: 15px;
  text-align: left;
}

table {
  margin: auto;
  border-collapse: collapse;
  width: 30%;
  table-layout: fixed;
  text-align: center;
}

tr {
  height: 200px;
  vertical-align: middle;
  text-align: left;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button2 {
  background-color: white;
  color: black;
  border: 2px solid black;
  width: 8%;
}

.button2:hover {
  background-color: black;
  color: white;
}

.button3 {
  background-color: white;
  color: black;
  border: 2px solid black;
  width: 8%;
}

.button3:hover {
  background-color: black;
  color: white;
}

.rfloat {
  margin: 5px;
  text-align: center;
}

.clear {
  clear: both
}

footer {
  background: #aaa;
  color: #fff;
  text-align: center;
  padding: 1rem;
  clear: both;
  /* clearing floating affects from both left,right sides */
}

.footp {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  display: inline-block;
  line-height: 30px;
  vertical-align: top;
}
<ul>
  <li><a href="home.html">Home</a></li>
  <li class="dropdown">
    <a class="active dropbtn" href="javascript:void(0)">Capacity Study</a>
    <div class="dropdown-content">
      <a href="mainFrame.html">Conduct Study</a>
      <a href="report.html">Reports</a>
    </div>
  </li>
  <li><a href="contact.html">Contact</a></li>
</ul>
<div class="txt">
  <table>
    <tr>
      <td>
        <p2>Choose a Product : </p2>

        <select id="product"> 
	
	<!--Setting the 'NONE' value for the drop down menu list option when user do not want to choose any value. optgroup is used for the subtitles off the main product dept.-->
	<optgroup label="DEFAULT">
	<option value = "NONE">NONE</option>
	</optgroup>
	
	<!--Product List for PCR Legacy-->
	<br><br>
	<!--End of first drop down list-->
	</select>
        <br><br>

        <p2>Choose a Profile : </p2>
        <select id="profile"> 
	
	<optgroup label="DEFAULT">
	<option value = "NONE">NONE</option>
	</optgroup>
	</select>
      </td>
    </tr>
  </table>
  <br><br><br>

  <div class="rfloat">
    <input type="button" value="Back" onclick="goBack()" class="button button3" />
    <input type="submit" id="btngo" value="Go" class="button button2" />
  </div>

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

<div>
  <footer>
    <p class="footp">&copy;All rights reserved.</p>
    <p class="footp">|</p>
    <p class="footp">Internal Use Only</p>
    <p class="footp">|</p>
    <p class="footp">Maintained By</p>
  </footer>
</div>

2 个答案:

答案 0 :(得分：1)

请参阅下面的代码段。只有当内容不够高时，这才会强制页脚位于页面底部。

查看Staale @ How do you get the footer to stay at the bottom of a Web page?

的答案

＆＃13;
＆＃13; 
(function() {
  function onSubmitClicked(event) {

    var product = document.getElementById('product'),
      productVal = product.value,
      profile = document.getElementById('profile'),
      profileVal = profile.value;
    url = 'testPoint.html?product=' + encodeURIComponent(productVal) + '&profile=' + encodeURIComponent(profileVal);
    location.href = url;
  }

  var submitButton = document.getElementById('btngo');
  submitButton.addEventListener('click', onSubmitClicked);
})();
＆＃13; 
/* --- This below --- */ 
* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -62px;
  /* the bottom margin is the negative value of the footer's height */
}

.push {
  height: 62px;
  /* .push must be the same height as .footer */
}

/* --- This ahead --- */

body {
  background-color: #d62929;
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: whitesmoke;
  font-weight: bold;
  font-size: 18px;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 22px 30px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: #c12525;
  color: white;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: whitesmoke;
  min-width: 250px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 20px 20px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 15px;
}

.dropdown-content a:hover {
  background-color: #c12525;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.active {
  background-color: #d62929;
  color: white;
  font-weight: bold;
  font-size: 18px;
}

@media screen and (max-width: 600px) {
  ul li,
  ul li {
    float: none;
  }
}

@media screen and (max-width: 300px) {
  footer {
    -webkit-order: 3;
    order: 3;
  }
}

h1 {
  font-size: 40px;
  font-weight: bold;
}

h2 {
  font-size: 20px;
  font-weight: bold;
}

p2 {
  font-size: 15px;
  font-weight: bold;
}

tr,
td {
  padding: 15px;
  text-align: left;
}

table {
  margin: auto;
  border-collapse: collapse;
  width: 30%;
  table-layout: fixed;
  text-align: center;
}

tr {
  height: 200px;
  vertical-align: middle;
  text-align: left;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button2 {
  background-color: white;
  color: black;
  border: 2px solid black;
  width: 8%;
}

.button2:hover {
  background-color: black;
  color: white;
}

.button3 {
  background-color: white;
  color: black;
  border: 2px solid black;
  width: 8%;
}

.button3:hover {
  background-color: black;
  color: white;
}

.rfloat {
  margin: 5px;
  text-align: center;
}

.clear {
  clear: both
}

footer {
  background: #aaa;
  color: #fff;
  text-align: center;
  padding: 1rem;
  clear: both;
  /* clearing floating affects from both left,right sides */
}

.footp {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  display: inline-block;
  line-height: 30px;
  vertical-align: top;
}
＆＃13; 
<div class="wrapper"> <!-- START: Wrap everything in this div -->
  <ul>
    <li><a href="home.html">Home</a></li>
    <li class="dropdown">
      <a class="active dropbtn" href="javascript:void(0)">Capacity Study</a>
      <div class="dropdown-content">
        <a href="mainFrame.html">Conduct Study</a>
        <a href="report.html">Reports</a>
      </div>
    </li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <div class="txt">
    <table>
      <tr>
        <td>
          <p2>Choose a Product : </p2>

          <select id="product"> 
	
	<!--Setting the 'NONE' value for the drop down menu list option when user do not want to choose any value. optgroup is used for the subtitles off the main product dept.-->
	<optgroup label="DEFAULT">
	<option value = "NONE">NONE</option>
	</optgroup>
	
	<!--Product List for PCR Legacy-->
	<br><br>
	<!--End of first drop down list-->
	</select>
          <br><br>

          <p2>Choose a Profile : </p2>
          <select id="profile"> 
	
	<optgroup label="DEFAULT">
	<option value = "NONE">NONE</option>
	</optgroup>
	</select>
        </td>
      </tr>
    </table>
    <br><br><br>

    <div class="rfloat">
      <input type="button" value="Back" onclick="goBack()" class="button button3" />
      <input type="submit" id="btngo" value="Go" class="button button2" />
    </div>

    <div class="clear"></div>
    <br><br><br>
  </div>
  <div class="push"></div> <!-- START & END: Push div -->
</div> <!-- END: Wrap everything in this div -->
<div class="footer"> <!-- START: Footer WITH class -->
  <footer>
    <p class="footp">&copy;All rights reserved.</p>
    <p class="footp">|</p>
    <p class="footp">Internal Use Only</p>
    <p class="footp">|</p>
    <p class="footp">Maintained By</p>
  </footer>
</div> <!-- END: Footer WITH class -->
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：-1)

请使用以下css将页脚粘贴在底部：

    footer { 
/*it will allow to scroll page while staying at top incase page is long*/
    position: fixed;
    bottom: 0;
    width: 100%;
    }

<强> JSFIDDLE

此外，如果你不想要这种行为，你可以这样做，以便始终将页脚粘在底部。

footer { 
        position: absolute;
        bottom: 0;
        width: 100%;
        }
相关问题
最新问题