猿问

如何将页脚放在页面底部？我做错了什么？

当我尝试在 Ipad 或 Ipad Pro 上查看网页（使用 google chrome 开发人员工具）时，页脚没有停留在页面底部。在移动设备/智能手机和台式机上查看时没有任何问题。


我只包含了与页脚相关的 CSS 代码。


有人可以帮我解决这个问题吗？


footer {

  background: #212529;

  color: white;

  bottom: 0;

  

}


footer a {

  color: #fff;

  font-size: 14px;

  transition-duration: 0.2s;

}


footer a:hover {

  color: #ced3d7;

  text-decoration: none;

}


.copy {

  font-size: 12px;

  padding: 10px;

  border-top: 1px solid #FFFFFF;

}


.footer-middle {

  padding-top: 2em;

  color: white;

}


万千封印
浏览 123回答 4
4回答

青春有我

Bei addingposition: absolute;width: 100%;对于你的页脚来说，它将位于底部并且宽度为 100% - 所以你的 css 应该如下所示：footer {    position: absolute;    width: 100%;    background: #212529;    color: white;    bottom: 0;  }  footer a {    color: #fff;    font-size: 14px;    transition-duration: 0.2s;  }  footer a:hover {    color: #ced3d7;    text-decoration: none;  }  .copy {    font-size: 12px;    padding: 10px;    border-top: 1px solid #FFFFFF;  }  .footer-middle {    padding-top: 2em;    color: white;  }
0

慕丝7291255

您在结束部分标记之前有一个额外的 div 结束标记。尝试删除它，看看是否能解决问题。如果没有，我们可以尝试position:absolutefooter {&nbsp; background: #212529;&nbsp; color: white;&nbsp; bottom: 0;&nbsp;&nbsp;}body{&nbsp; &nbsp;height:100%;&nbsp; &nbsp;border:solid 1px red;&nbsp; &nbsp;}footer a {&nbsp; color: #fff;&nbsp; font-size: 14px;&nbsp; transition-duration: 0.2s;}footer a:hover {&nbsp; color: #ced3d7;&nbsp; text-decoration: none;}.copy {&nbsp; font-size: 12px;&nbsp; padding: 10px;&nbsp; border-top: 1px solid #FFFFFF;}.footer-middle {&nbsp; padding-top: 2em;&nbsp; color: white;}<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; &nbsp; <meta http-equiv="X-UA-Compatible" content="ie=edge">&nbsp; &nbsp; <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>&nbsp; &nbsp; <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>&nbsp; &nbsp; <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="text/css" />&nbsp; &nbsp; <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />&nbsp; &nbsp; <link rel="stylesheet" href="assets/css/style.css" type="text/css" />&nbsp; &nbsp; <title>Home|The Monkees</title></head><body>&nbsp; <header><!--------------------Navigation-->&nbsp; &nbsp; <nav class="navbar navbar-expand-sm bg-dark navbar-dark stroke">&nbsp; &nbsp; &nbsp; <a class="navbar-brand" href="index.html">&nbsp; &nbsp; &nbsp; &nbsp; <img src="assets/image/LOGO.png" id="logo-transparent" alt="logo" style="width:143px;">&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">&nbsp; &nbsp; &nbsp; &nbsp; <span class="navbar-toggler-icon"></span>&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <div class="collapse navbar-collapse" id="navbarCollapse">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <ul class="navbar-nav">&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link " id="navbar-select-color" href="index.html">Home</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" id="navbar-select-color2" href="photos.html">Photos</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" id="navbar-select-color3" href="video.html">Video</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" id="navbar-select-color4" href="contact.html">Contact</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; &nbsp; </nav>&nbsp; </header>&nbsp; <!-- Contact Us Section -->&nbsp; &nbsp; <section class="Material-contact-section section-padding section-dark">&nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row&nbsp; ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Section Title -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-12 wow animated fadeInLeft" data-wow-delay=".2s">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 class="section-title">Love to Hear From You</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- contact form -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-12 wow animated fadeInRight " data-wow-delay=".2s" id="centerForm">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form class="shake" role="form" method="post" id="contactForm" name="contact-form" data-toggle="validator">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Name -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group label-floating">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="control-label" for="name">Name</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="form-control" id="name" type="text" name="name" required data-error="Please enter your name">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="help-block with-errors"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- email -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group label-floating">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="control-label" for="email">Email</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="form-control" id="email" type="email" name="email" required data-error="Please enter your Email">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="help-block with-errors"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Subject -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group label-floating">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="control-label">Subject</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="form-control" id="msg_subject" type="text" name="subject" required data-error="Please enter your message subject">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="help-block with-errors"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Message -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group label-floating">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="message" class="control-label">Message</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea class="form-control" rows="3" id="message" name="message" required data-error="Write your message"></textarea>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="help-block with-errors"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Form Submit -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-submit mt-5">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="btn btn-common" type="submit" id="form-submit"><i class="material-icons mdi mdi-message-outline"></i> Send Message</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="msgSubmit" class="h3 text-center hidden"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="clearfix"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; </section><footer class="mainfooter bg-dark" role="contentinfo">&nbsp; <div class="footer-middle">&nbsp; &nbsp; &nbsp; <ul class="social-network social-circle">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li><a href="https://www.facebook.com/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li><a href="https://twitter.com/" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li><a href="https://www.youtube.com" class="icoYoutube" title="Youtube"><i class="fa fa-youtube"></i></a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; </ul>&nbsp;&nbsp; &nbsp; <div class="col-md-12 copy">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="text-center">&copy; Copyright 2019 - The Monkees.&nbsp; All rights reserved. //<a href="about.html"> About </a> //<a href="terms_of_use.html"> Terms of Use </a> //<a href="contact.html"> Contact </a></p>&nbsp;&nbsp;&nbsp; &nbsp; </div>&nbsp; </div></footer>&nbsp;&nbsp;</body></html>
0

白板的微信

这将是完整的 CSS 代码。@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah:100,200,300,400,500,600,700|Special+Elite:100,200,300,400,500,600,700');/*---------------------------------Navigation Bar*//*----Navbar Buttons*/.navbar-nav&nbsp; li&nbsp; a {&nbsp; color: #ffffff !important;&nbsp; font-family: "Gloria Hallelujah" , sans-serif;&nbsp; text-transform: uppercase;&nbsp; font-size: large;&nbsp; font-weight: 500;&nbsp; text-decoration: none;&nbsp; border:none;&nbsp; padding: 8px 8px;&nbsp; margin:4px 2px;}nav li&nbsp; a,nav li&nbsp; a:after,nav li&nbsp; a:before {&nbsp; transition: all .5s;}#navbar-select-color:hover {&nbsp; color: #c8c8c8 !important;}#navbar-select-color2:hover {&nbsp; color: #c8c8c8 !important;}#navbar-select-color3:hover {&nbsp; color: #c8c8c8 !important;}#navbar-select-color4:hover {&nbsp; color: #c8c8c8 !important;}#logo-transparent {&nbsp; opacity: 1.0;&nbsp; filter: alpha(opacity=50);&nbsp; transition-timing-function: ease-in-out;&nbsp; transition: all .5s;}#logo-transparent:hover {&nbsp; opacity: 0.8;&nbsp; filter: alpha(opacity=100);&nbsp; transition-timing-function: ease-in-out;&nbsp; transition: all .5s;}/*----Navbar Animation*/nav.stroke ul li a {&nbsp; position: relative;}nav.stroke ul li a:after {&nbsp; position: absolute;&nbsp; bottom: 0;&nbsp; left: 0;&nbsp; right: 0;&nbsp; margin: auto;&nbsp; width: 0%;&nbsp; content: '.';&nbsp; color: transparent;&nbsp; background: #aaa;&nbsp; height: 1px;}nav.stroke ul li a:hover:after {&nbsp; width:100%;}/*---------------------------------Footer*/footer {&nbsp; background: #212529;&nbsp; color: white;&nbsp; bottom: 0;&nbsp; position: absolute;&nbsp;&nbsp;}footer a {&nbsp; color: #fff;&nbsp; font-size: 14px;&nbsp; transition-duration: 0.2s;}footer a:hover {&nbsp; color: #ced3d7;&nbsp; text-decoration: none;}.copy {&nbsp; font-size: 12px;&nbsp; padding: 10px;&nbsp; border-top: 1px solid #FFFFFF;}.footer-middle {&nbsp; padding-top: 2em;&nbsp; color: white;}/*---------------------------------Social Icons*//* footer social icons */ul {&nbsp; list-style-type: none;&nbsp; display: flex;&nbsp; justify-content: center;}ul .social-network {&nbsp; display: inline;&nbsp; margin-left: 0 !important;&nbsp; padding: 0;&nbsp; float: inherit;}&nbsp;ul .social-network li {&nbsp; display: inline;&nbsp; margin: 0 5px;&nbsp; list-style: none;}.social-network a.icoTwitter:hover i {&nbsp; color: #007bb7;}.social-network a.icoFacebook:hover i {&nbsp; color: #3B5998;}.social-network a.icoYoutube:hover i {&nbsp; color: #c4302b;}.social-circle li a {&nbsp; display: block;&nbsp; position: relative;&nbsp; margin: 15px 15px 15px;&nbsp; -moz-border-radius: 50%;&nbsp; -webkit-border-radius: 50%;&nbsp; border-radius: 50%;&nbsp; text-align: center;&nbsp; width: 65px;&nbsp; height: 65px;&nbsp; font-size:40px;}.social-circle li i {&nbsp; margin: 0;&nbsp; line-height: 30px;&nbsp; text-align: center;}.social-circle li a:hover i,.triggeredHover {&nbsp; -moz-transform: rotate(360deg);&nbsp; -webkit-transform: rotate(360deg);&nbsp; -ms--transform: rotate(360deg);&nbsp; transform: rotate(360deg);&nbsp; -webkit-transition: all 0.2s;&nbsp; -moz-transition: all 0.2s;&nbsp; -o-transition: all 0.2s;&nbsp; -ms-transition: all 0.2s;&nbsp; transition: all 0.2s;}.social-circle i {&nbsp; color: #595959;&nbsp; -webkit-transition: all 0.8s;&nbsp; -moz-transition: all 0.8s;&nbsp; -o-transition: all 0.8s;&nbsp; -ms-transition: all 0.8s;&nbsp; transition: all 0.8s;}.social-network a {&nbsp; background-color: #F9F9F9;}/*---------------------------------Background*/#div-with-bg {&nbsp; &nbsp; background-image: url("https://i.imgur.com/qv5ZwaO.jpg");&nbsp;&nbsp; &nbsp; background-size: cover;&nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; background-position: center center;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; -webkit-background-size: cover;&nbsp; &nbsp; -moz-background-size: cover;&nbsp; &nbsp; -o-background-size: cover;&nbsp; &nbsp;&nbsp;}#footer {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; margin: 0 auto;}.image-box {&nbsp; position: relative;}.image-box__background,.image-box__overlay {&nbsp; position: absolute;&nbsp; left: 0;&nbsp; top: 0;&nbsp; right: 0;&nbsp; bottom: 0;}.image-box__background {&nbsp; background: var(--image-url) center no-repeat;&nbsp; background-size: cover;&nbsp; z-index: 1}.image-box__overlay {&nbsp; background: rgba(0, 0, 0, 0.5);&nbsp; z-index: 2;}.image-box__content {&nbsp; position: relative;&nbsp; z-index: 3;&nbsp; /* Finally, style and place the content */&nbsp; color: white;&nbsp; min-height: 100vh;&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content: center;}html{&nbsp; -webkit-background-size: cover;&nbsp; -moz-background-size: cover;&nbsp; -o-background-size: cover;&nbsp; &nbsp;background-size: cover;}body, html {&nbsp; height: 100%;&nbsp;&nbsp;}img {&nbsp; width:100%;&nbsp; height: auto;&nbsp; position: relative;}#bg {&nbsp; /* Full height */&nbsp; height: 100%;&nbsp; /* Center and scale the image nicely */&nbsp; background-position: center;&nbsp; background-repeat: no-repeat;&nbsp; background-size: cover;&nbsp; width: 100%;&nbsp; min-height: 100vh;&nbsp; position: relative;}/*---------------------------------Text*/.band_biography {&nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; margin-right: 30%;&nbsp; &nbsp; margin-top: 10%;&nbsp; &nbsp; width: 20em;&nbsp; &nbsp; color: white;&nbsp; &nbsp; background: rgba(0, 0, 0, 0.6);}.bio_image {&nbsp; border-radius: 50%;&nbsp; max-width:15%;&nbsp; margin-top: 12%;&nbsp; margin-left: 32%;&nbsp; background-size: contain;&nbsp; float: left;&nbsp; background: rgba(0, 0, 0, 0.6);}/*---------------------------------Contact Form*/.section-padding {&nbsp; &nbsp; padding: 45px 0;}.form-submit {background: #B9DFFF;color: #fff;border: 1px solid #eee;border-radius: 20px;box-shadow: 5px 5px 5px #eee;text-shadow:none;width: 35%;position: relative;margin-left: 35%;text-align: center;}.form-submit:hover {background: #016ABC;color: #fff;border: 1px solid #eee;border-radius: 20px;width: 35%;box-shadow: 5px 5px 5px #eee;text-shadow:none;}.section-dark {&nbsp; &nbsp; background-color: #f9f9f9;&nbsp; &nbsp; z-index: -2;}.form-control,.form-group .form-control {&nbsp; &nbsp; border: 0;&nbsp; &nbsp; background-image: -webkit-gradient(linear, left top, left bottom, from(#009688), to(#009688)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));&nbsp; &nbsp; background-image: -webkit-linear-gradient(#009688, #009688), -webkit-linear-gradient(#D2D2D2, #D2D2D2);&nbsp; &nbsp; background-image: -o-linear-gradient(#009688, #009688), -o-linear-gradient(#D2D2D2, #D2D2D2);&nbsp; &nbsp; background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);&nbsp; &nbsp; -webkit-background-size: 0 2px, 100% 1px;&nbsp; &nbsp; background-size: 0 2px, 100% 1px;&nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; background-position: center bottom, center -webkit-calc(100% - 1px);&nbsp; &nbsp; background-position: center bottom, center calc(100% - 1px);&nbsp; &nbsp; background-color: rgba(0, 0, 0, 0);&nbsp; &nbsp; -webkit-transition: background 0s ease-out;&nbsp; &nbsp; -o-transition: background 0s ease-out;&nbsp; &nbsp; transition: background 0s ease-out;&nbsp; &nbsp; float: none;&nbsp; &nbsp; -webkit-box-shadow: none;&nbsp; &nbsp; box-shadow: none;&nbsp; &nbsp; border-radius: 0}.form-control::-moz-placeholder,.form-group .form-control::-moz-placeholder {&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.form-control:-ms-input-placeholder,.form-group .form-control:-ms-input-placeholder {&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.form-control::-webkit-input-placeholder,.form-group .form-control::-webkit-input-placeholder {&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.form-control[disabled],.form-control[readonly],.form-group .form-control[disabled],.form-group .form-control[readonly],fieldset[disabled] .form-control,fieldset[disabled] .form-group .form-control {&nbsp; &nbsp; background-color: rgba(0, 0, 0, 0)}.form-control[disabled],.form-group .form-control[disabled],fieldset[disabled] .form-control,fieldset[disabled] .form-group .form-control {&nbsp; &nbsp; background-image: none;&nbsp; &nbsp; border-bottom: 1px dotted #D2D2D2}.form-group {&nbsp; &nbsp; position: relative}.form-group.label-floating label.control-label,.form-group.label-placeholder label.control-label,.form-group.label-static label.control-label {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; pointer-events: none;&nbsp; &nbsp; -webkit-transition: .3s ease all;&nbsp; &nbsp; -o-transition: .3s ease all;&nbsp; &nbsp; transition: .3s ease all}.form-group.label-floating label.control-label {&nbsp; &nbsp; will-change: left, top, contents}.form-group.label-placeholder:not(.is-empty) label.control-label {&nbsp; &nbsp; display: none}.form-group .help-block {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; display: none}.form-group.is-focused .form-control {&nbsp; &nbsp; outline: 0;&nbsp; &nbsp; background-image: -webkit-gradient(linear, left top, left bottom, from(#009688), to(#009688)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));&nbsp; &nbsp; background-image: -webkit-linear-gradient(#009688, #009688), -webkit-linear-gradient(#D2D2D2, #D2D2D2);&nbsp; &nbsp; background-image: -o-linear-gradient(#009688, #009688), -o-linear-gradient(#D2D2D2, #D2D2D2);&nbsp; &nbsp; background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);&nbsp; &nbsp; -webkit-background-size: 100% 2px, 100% 1px;&nbsp; &nbsp; background-size: 100% 2px, 100% 1px;&nbsp; &nbsp; -webkit-box-shadow: none;&nbsp; &nbsp; box-shadow: none;&nbsp; &nbsp; -webkit-transition-duration: .3s;&nbsp; &nbsp; -o-transition-duration: .3s;&nbsp; &nbsp; transition-duration: .3s}.form-group.is-focused .form-control .material-input:after {&nbsp; &nbsp; background-color: #009688}.form-group.is-focused label,.form-group.is-focused label.control-label {&nbsp; &nbsp; color: #009688}.form-group.is-focused.label-placeholder label,.form-group.is-focused.label-placeholder label.control-label {&nbsp; &nbsp; color: #BDBDBD}.form-group.is-focused .help-block {&nbsp; &nbsp; display: block}.form-group.has-warning .form-control {&nbsp; &nbsp; -webkit-box-shadow: none;&nbsp; &nbsp; box-shadow: none}.form-group.has-warning.is-focused .form-control {&nbsp; &nbsp; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff5722), to(#ff5722)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));&nbsp; &nbsp; background-image: -webkit-linear-gradient(#ff5722, #ff5722), -webkit-linear-gradient(#D2D2D2, #D2D2D2);&nbsp; &nbsp; background-image: -o-linear-gradient(#ff5722, #ff5722), -o-linear-gradient(#D2D2D2, #D2D2D2);&nbsp; &nbsp; background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#D2D2D2, #D2D2D2)}.form-group.has-warning .help-block,.form-group.has-warning label.control-label {&nbsp; &nbsp; color: #ff5722}.form-group.has-error .form-control {&nbsp; &nbsp; -webkit-box-shadow: none;&nbsp; &nbsp; box-shadow: none}.form-group.has-error .help-block,.form-group.has-error label.control-label {&nbsp; &nbsp; color: #f44336}.form-group.has-success .form-control {&nbsp; &nbsp; -webkit-box-shadow: none;&nbsp; &nbsp; box-shadow: none}.form-group.has-success.is-focused .form-control {&nbsp; &nbsp; background-image: -webkit-gradient(linear, left top, left bottom, from(#4caf50), to(#4caf50)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));&nbsp; &nbsp; background-image: -webkit-linear-gradient(#4caf50, #4caf50), -webkit-linear-gradient(#D2D2D2, #D2D2D2);&nbsp; &nbsp; background-image: -o-linear-gradient(#4caf50, #4caf50), -o-linear-gradient(#D2D2D2, #D2D2D2);&nbsp; &nbsp; background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2)}.form-group.has-success .help-block,.form-group.has-success label.control-label {&nbsp; &nbsp; color: #4caf50}.form-group.has-info .form-control {&nbsp; &nbsp; -webkit-box-shadow: none;&nbsp; &nbsp; box-shadow: none}.form-group.has-info.is-focused .form-control {&nbsp; &nbsp; background-image: -webkit-gradient(linear, left top, left bottom, from(#03a9f4), to(#03a9f4)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));&nbsp; &nbsp; background-image: -webkit-linear-gradient(#03a9f4, #03a9f4), -webkit-linear-gradient(#D2D2D2, #D2D2D2);&nbsp; &nbsp; background-image: -o-linear-gradient(#03a9f4, #03a9f4), -o-linear-gradient(#D2D2D2, #D2D2D2);&nbsp; &nbsp; background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#D2D2D2, #D2D2D2)}.form-group.has-info .help-block,.form-group.has-info label.control-label {&nbsp; &nbsp; color: #03a9f4}.form-group textarea {&nbsp; &nbsp; resize: none}.form-group textarea~.form-control-highlight {&nbsp; &nbsp; margin-top: -11px}.form-group select {&nbsp; &nbsp; -webkit-appearance: none;&nbsp; &nbsp; -moz-appearance: none;&nbsp; &nbsp; appearance: none}.form-group select~.material-input:after {&nbsp; &nbsp; display: none}.form-control {&nbsp; &nbsp; margin-bottom: 7px}.form-control::-moz-placeholder {&nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; line-height: 1.42857143;&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.form-control:-ms-input-placeholder {&nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; line-height: 1.42857143;&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.form-control::-webkit-input-placeholder {&nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; line-height: 1.42857143;&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.checkbox label,.radio label,label {&nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; line-height: 1.42857143;&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}label.control-label {&nbsp; &nbsp; font-size: 12px;&nbsp; &nbsp; line-height: 1.07142857;&nbsp; &nbsp; font-weight: 400;&nbsp; &nbsp; margin: 16px 0 0 0}.help-block {&nbsp; &nbsp; margin-top: 0;&nbsp; &nbsp; font-size: 12px}.form-group {&nbsp; &nbsp; padding-bottom: 7px;&nbsp; &nbsp; margin: 28px 0 0 0}.form-group .form-control {&nbsp; &nbsp; margin-bottom: 7px}.form-group .form-control::-moz-placeholder {&nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; line-height: 1.42857143;&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.form-group .form-control:-ms-input-placeholder {&nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; line-height: 1.42857143;&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.form-group .form-control::-webkit-input-placeholder {&nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; line-height: 1.42857143;&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.form-group .checkbox label,.form-group .radio label,.form-group label {&nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; line-height: 1.42857143;&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.form-group label.control-label {&nbsp; &nbsp; font-size: 12px;&nbsp; &nbsp; line-height: 1.07142857;&nbsp; &nbsp; font-weight: 400;&nbsp; &nbsp; margin: 16px 0 0 0}.form-group .help-block {&nbsp; &nbsp; margin-top: 0;&nbsp; &nbsp; font-size: 12px}.form-group.label-floating label.control-label,.form-group.label-placeholder label.control-label {&nbsp; &nbsp; top: -7px;&nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; line-height: 1.42857143}.form-group.label-floating.is-focused label.control-label,.form-group.label-floating:not(.is-empty) label.control-label,.form-group.label-static label.control-label {&nbsp; &nbsp; top: -30px;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; font-size: 12px;&nbsp; &nbsp; line-height: 1.07142857}.form-group.label-floating input.form-control:-webkit-autofill~label.control-label label.control-label {&nbsp; &nbsp; top: -30px;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; font-size: 12px;&nbsp; &nbsp; line-height: 1.07142857}.form-group.form-group-sm {&nbsp; &nbsp; padding-bottom: 3px;&nbsp; &nbsp; margin: 21px 0 0 0}.form-group.form-group-sm .form-control {&nbsp; &nbsp; margin-bottom: 3px}.form-group.form-group-sm .form-control::-moz-placeholder {&nbsp; &nbsp; font-size: 11px;&nbsp; &nbsp; line-height: 1.5;&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.form-group.form-group-sm .form-control:-ms-input-placeholder {&nbsp; &nbsp; font-size: 11px;&nbsp; &nbsp; line-height: 1.5;&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.form-group.form-group-sm .form-control::-webkit-input-placeholder {&nbsp; &nbsp; font-size: 11px;&nbsp; &nbsp; line-height: 1.5;&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.form-group.form-group-sm .checkbox label,.form-group.form-group-sm .radio label,.form-group.form-group-sm label {&nbsp; &nbsp; font-size: 11px;&nbsp; &nbsp; line-height: 1.5;&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.form-group.form-group-sm label.control-label {&nbsp; &nbsp; font-size: 9px;&nbsp; &nbsp; line-height: 1.125;&nbsp; &nbsp; font-weight: 400;&nbsp; &nbsp; margin: 16px 0 0 0}.form-group.form-group-sm .help-block {&nbsp; &nbsp; margin-top: 0;&nbsp; &nbsp; font-size: 9px}.form-group.form-group-sm.label-floating label.control-label,.form-group.form-group-sm.label-placeholder label.control-label {&nbsp; &nbsp; top: -11px;&nbsp; &nbsp; font-size: 11px;&nbsp; &nbsp; line-height: 1.5}.form-group.form-group-sm.label-floating.is-focused label.control-label,.form-group.form-group-sm.label-floating:not(.is-empty) label.control-label,.form-group.form-group-sm.label-static label.control-label {&nbsp; &nbsp; top: -25px;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; font-size: 9px;&nbsp; &nbsp; line-height: 1.125}.form-group.form-group-sm.label-floating input.form-control:-webkit-autofill~label.control-label label.control-label {&nbsp; &nbsp; top: -25px;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; font-size: 9px;&nbsp; &nbsp; line-height: 1.125}.form-group.form-group-lg {&nbsp; &nbsp; padding-bottom: 9px;&nbsp; &nbsp; margin: 30px 0 0 0}.form-group.form-group-lg .form-control {&nbsp; &nbsp; margin-bottom: 9px}.form-group.form-group-lg .form-control::-moz-placeholder {&nbsp; &nbsp; font-size: 18px;&nbsp; &nbsp; line-height: 1.3333333;&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.form-group.form-group-lg .form-control:-ms-input-placeholder {&nbsp; &nbsp; font-size: 18px;&nbsp; &nbsp; line-height: 1.3333333;&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.form-group.form-group-lg .form-control::-webkit-input-placeholder {&nbsp; &nbsp; font-size: 18px;&nbsp; &nbsp; line-height: 1.3333333;&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.form-group.form-group-lg .checkbox label,.form-group.form-group-lg .radio label,.form-group.form-group-lg label {&nbsp; &nbsp; font-size: 18px;&nbsp; &nbsp; line-height: 1.3333333;&nbsp; &nbsp; color: #BDBDBD;&nbsp; &nbsp; font-weight: 400}.form-group.form-group-lg label.control-label {&nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; line-height: .99999998;&nbsp; &nbsp; font-weight: 400;&nbsp; &nbsp; margin: 16px 0 0 0}.form-group.form-group-lg .help-block {&nbsp; &nbsp; margin-top: 0;&nbsp; &nbsp; font-size: 14px}.form-group.form-group-lg.label-floating label.control-label,.form-group.form-group-lg.label-placeholder label.control-label {&nbsp; &nbsp; top: -5px;&nbsp; &nbsp; font-size: 18px;&nbsp; &nbsp; line-height: 1.3333333}.form-group.form-group-lg.label-floating.is-focused label.control-label,.form-group.form-group-lg.label-floating:not(.is-empty) label.control-label,.form-group.form-group-lg.label-static label.control-label {&nbsp; &nbsp; top: -32px;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; line-height: .99999998}.form-group.form-group-lg.label-floating input.form-control:-webkit-autofill~label.control-label label.control-label {&nbsp; &nbsp; top: -32px;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; line-height: .99999998}select.form-control {&nbsp; &nbsp; border: 0;&nbsp; &nbsp; -webkit-box-shadow: none;&nbsp; &nbsp; box-shadow: none;&nbsp; &nbsp; border-radius: 0}.form-group.is-focused select.form-control {&nbsp; &nbsp; -webkit-box-shadow: none;&nbsp; &nbsp; box-shadow: none;&nbsp; &nbsp; border-color: #D2D2D2}.form-group.is-focused select.form-control[multiple],select.form-control[multiple] {&nbsp; &nbsp; height: 85px}.input-group-btn .btn {&nbsp; &nbsp; margin: 0 0 7px 0}.form-group.form-group-sm .input-group-btn .btn {&nbsp; &nbsp; margin: 0 0 3px 0}.form-group.form-group-lg .input-group-btn .btn {&nbsp; &nbsp; margin: 0 0 9px 0}.input-group .input-group-btn {&nbsp; &nbsp; padding: 0 12px}.input-group .input-group-addon {&nbsp; &nbsp; border: 0;&nbsp; &nbsp; background: 0 0}.form-group input[type=file] {&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; right: 0;&nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; z-index: 100}#contactForm {&nbsp; &nbsp; margin-top: 100px&nbsp; &nbsp;&nbsp;}#contactForm .form-group label.control-label {&nbsp; &nbsp; color: #8c8c8c}#contactForm .form-control {&nbsp; &nbsp; font-weight: 500;&nbsp; &nbsp; height: auto&nbsp; &nbsp;&nbsp;}.row {&nbsp; display: block;&nbsp; text-align: center;&nbsp; padding-top: 10%;}#centerForm {&nbsp; text-align: center;}.container{&nbsp; &nbsp; padding-bottom: 0%;}/*---------------------------------Biography*/.box{&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; background: rgba(0, 0, 0, 0.4);&nbsp; &nbsp; padding: 40px;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; color: white;&nbsp; &nbsp; font-family: 'Century Gothic' ,sans-serif;&nbsp; &nbsp; padding-bottom: 10%;&nbsp; &nbsp; padding-top: 5%;}.box-img{&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; width: 200px;&nbsp; &nbsp; height: 200px;}.box h1{&nbsp; &nbsp; font-size: 40px;&nbsp; &nbsp; letter-spacing: 4px;&nbsp; &nbsp; font-weight: 100;&nbsp; &nbsp;&nbsp;}.box h5{&nbsp; &nbsp; font-size: 25px;&nbsp; &nbsp; letter-spacing: 3px;&nbsp; &nbsp; font-weight: 100;}.box p{&nbsp; &nbsp; text-align: justify;&nbsp; &nbsp;&nbsp;}/*---------------------------------Photo Grid*/.row {&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; padding: 0 4px;}/* Create two equal columns that sits next to each other */.column {&nbsp; flex: 50%;&nbsp; padding: 0 4px;}.column img {&nbsp; margin-top: 8px;&nbsp; vertical-align: middle;}/*---------------------------------Media Queries*//* ----------- iPad Pro 10.5" ----------- */@media only screen&nbsp;&nbsp; and (min-width: 834px)&nbsp;&nbsp; and (max-width: 1112px)&nbsp; and (-webkit-min-pixel-ratio: 2) {&nbsp; .container {&nbsp; &nbsp; &nbsp; padding-bottom: 22%;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; }&nbsp; .row {&nbsp; &nbsp; &nbsp; padding-top: 20% !important;&nbsp; }}/* ----------- iPad Pro 12.9" ----------- */@media only screen&nbsp;&nbsp; and (min-width: 1024px)&nbsp;&nbsp; and (max-width: 1366px)&nbsp; and (-webkit-min-pixel-ratio: 2) {.container {&nbsp; &nbsp; &nbsp; padding-bottom: 22%;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; }&nbsp; .row {&nbsp; &nbsp; &nbsp; padding-top: 20% !important;&nbsp; }}/* ----------- Blackberry Playbook ----------- */@media (max-width: 600px) and (orientation: portrait) {&nbsp; &nbsp; .row {&nbsp; &nbsp; &nbsp; padding-top: 15%;&nbsp; }&nbsp;}&nbsp;@media only screen&nbsp;&nbsp; and (min-width: 834px)&nbsp;&nbsp; and (max-width: 1112px)&nbsp; and (-webkit-min-pixel-ratio: 2) {&nbsp; .container {&nbsp; &nbsp; &nbsp; padding-bottom: 22%;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; }&nbsp; .row {&nbsp; &nbsp; &nbsp; padding-top: 20% !important;&nbsp; }}/* ----------- Photo Gallery ----------- */img{&nbsp; &nbsp; width:100%;}&nbsp; &nbsp;&nbsp;.gallery a {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; display: block;}.overlay {&nbsp; &nbsp; background-color: rgba(0, 0, 0, 0.8);&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; display: block;&nbsp; &nbsp; font-size: 100px;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; padding-top:40px;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; transition: all 1s ease;}.overlay2{&nbsp; &nbsp; background-color: rgba(0, 0, 0, 0.8);&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; display: block;&nbsp; &nbsp; font-size: 100px;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; padding-top:100px;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; transition: all 1s ease;}.gallery a:hover .overlay ,.gallery a:hover .overlay2 {&nbsp; &nbsp; opacity: 0.8;}.img-space{&nbsp; &nbsp; margin:20px 0px;}/*---------Video Gallery--------*/
0

三国纷争

毕竟我自己已经找到了解决方案。我将在这里发布我所做的事情，以防万一有人遇到这个问题。块引用该解决方案将在一定程度上取决于 CSS 页面的其余部分。可能需要一些尝试和错误才能找到适合您的方法。我选择了 calc() 方法。您将所有内容包装在一个新的 div 中，其类名为“content”。确保在打开页脚之前关闭此 div。然后，您使用 devtools 找出页脚的高度，并使用 calc() 方法为 .content 类指定一个最小高度，该最小高度等于视图高度的 100% 减去页脚的高度。.content {&nbsp; &nbsp; min-height: calc(100vh - /* height of footer here */);}
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答