为了账号安全，请及时绑定邮箱和手机立即绑定

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

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

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

Html5
万千封印 2023-10-24 17:20:58
当我尝试在 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;}
查看完整描述

4 回答

?
青春有我

TA贡献1784条经验 获得超8个赞

Bei adding


position: 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;

  }


查看完整回答
反对 回复 2023-10-24
?
慕丝7291255

TA贡献1859条经验 获得超6个赞

您在结束部分标记之前有一个额外的 div 结束标记。尝试删除它，看看是否能解决问题。如果没有，我们可以尝试position:absolute


footer {

  background: #212529;

  color: white;

  bottom: 0;

  

}


body{

   height:100%;

   border:solid 1px red;

   }


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;

}

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="text/css" />

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />

    <link rel="stylesheet" href="assets/css/style.css" type="text/css" />

    <title>Home|The Monkees</title>

</head>

<body>

  <header>

<!--------------------Navigation-->

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark stroke">

      <a class="navbar-brand" href="index.html">

        <img src="assets/image/LOGO.png" id="logo-transparent" alt="logo" style="width:143px;">

      </a>

      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">

        <span class="navbar-toggler-icon"></span>

      </button>

    

    <div class="collapse navbar-collapse" id="navbarCollapse">  

      <ul class="navbar-nav">

        <li class="nav-item">

          <a class="nav-link " id="navbar-select-color" href="index.html">Home</a>

        </li>

        

        <li class="nav-item">

          <a class="nav-link" id="navbar-select-color2" href="photos.html">Photos</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" id="navbar-select-color3" href="video.html">Video</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" id="navbar-select-color4" href="contact.html">Contact</a>

        </li>

      </ul>

    </div>

    </nav>

  </header>

  <!-- Contact Us Section -->

    <section class="Material-contact-section section-padding section-dark">

      <div class="container">

          <div class="row  ">

              <!-- Section Title -->

              <div class="col-md-12 wow animated fadeInLeft" data-wow-delay=".2s">

                  <h1 class="section-title">Love to Hear From You</h1>

              </div>

          </div>

              <!-- contact form -->

              <div class="col-md-12 wow animated fadeInRight " data-wow-delay=".2s" id="centerForm">

                  <form class="shake" role="form" method="post" id="contactForm" name="contact-form" data-toggle="validator">

                      <!-- Name -->

                      <div class="form-group label-floating">

                        <label class="control-label" for="name">Name</label>

                        <input class="form-control" id="name" type="text" name="name" required data-error="Please enter your name">

                        <div class="help-block with-errors"></div>

                      </div>

                      <!-- email -->

                      <div class="form-group label-floating">

                        <label class="control-label" for="email">Email</label>

                        <input class="form-control" id="email" type="email" name="email" required data-error="Please enter your Email">

                        <div class="help-block with-errors"></div>

                      </div>

                      <!-- Subject -->

                      <div class="form-group label-floating">

                        <label class="control-label">Subject</label>

                        <input class="form-control" id="msg_subject" type="text" name="subject" required data-error="Please enter your message subject">

                        <div class="help-block with-errors"></div>

                      </div>

                      <!-- Message -->

                      <div class="form-group label-floating">

                          <label for="message" class="control-label">Message</label>

                          <textarea class="form-control" rows="3" id="message" name="message" required data-error="Write your message"></textarea>

                          <div class="help-block with-errors"></div>

                      </div>

                      <!-- Form Submit -->

                      <div class="form-submit mt-5">

                          <button class="btn btn-common" type="submit" id="form-submit"><i class="material-icons mdi mdi-message-outline"></i> Send Message</button>

                          <div id="msgSubmit" class="h3 text-center hidden"></div>

                          <div class="clearfix"></div>

                      </div>

                  </form>

              </div>

          </div>

     

    </section>


<footer class="mainfooter bg-dark" role="contentinfo">

  <div class="footer-middle">

      <ul class="social-network social-circle">

             <li><a href="https://www.facebook.com/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>

             <li><a href="https://twitter.com/" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>

             <li><a href="https://www.youtube.com" class="icoYoutube" title="Youtube"><i class="fa fa-youtube"></i></a></li>

             

      </ul> 

    <div class="col-md-12 copy">

            <p class="text-center">&copy; Copyright 2019 - The Monkees.  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>

  

    </div>

  </div>

</footer>

  

</body>

</html>


查看完整回答
反对 回复 2023-10-24
?
白板的微信

TA贡献1883条经验 获得超3个赞

这将是完整的 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  li  a {

  color: #ffffff !important;

  font-family: "Gloria Hallelujah" , sans-serif;

  text-transform: uppercase;

  font-size: large;

  font-weight: 500;

  text-decoration: none;

  border:none;

  padding: 8px 8px;

  margin:4px 2px;

}


nav li  a,

nav li  a:after,

nav li  a:before {

  transition: all .5s;

}

#navbar-select-color:hover {

  color: #c8c8c8 !important;

}


#navbar-select-color2:hover {

  color: #c8c8c8 !important;

}


#navbar-select-color3:hover {

  color: #c8c8c8 !important;

}


#navbar-select-color4:hover {

  color: #c8c8c8 !important;

}


#logo-transparent {

  opacity: 1.0;

  filter: alpha(opacity=50);

  transition-timing-function: ease-in-out;

  transition: all .5s;

}


#logo-transparent:hover {

  opacity: 0.8;

  filter: alpha(opacity=100);

  transition-timing-function: ease-in-out;

  transition: all .5s;

}

/*----Navbar Animation*/

nav.stroke ul li a {

  position: relative;

}


nav.stroke ul li a:after {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  margin: auto;

  width: 0%;

  content: '.';

  color: transparent;

  background: #aaa;

  height: 1px;

}

nav.stroke ul li a:hover:after {

  width:100%;

}


/*---------------------------------Footer*/

footer {

  background: #212529;

  color: white;

  bottom: 0;

  position: absolute;

  

}


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;

}



/*---------------------------------Social Icons*/


/* footer social icons */


ul {

  list-style-type: none;

  display: flex;

  justify-content: center;


}


ul .social-network {

  display: inline;

  margin-left: 0 !important;

  padding: 0;

  float: inherit;


}


 ul .social-network li {

  display: inline;

  margin: 0 5px;

  list-style: none;

}



.social-network a.icoTwitter:hover i {

  color: #007bb7;

}

.social-network a.icoFacebook:hover i {

  color: #3B5998;

}


.social-network a.icoYoutube:hover i {

  color: #c4302b;

}



.social-circle li a {

  display: block;

  position: relative;

  margin: 15px 15px 15px;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;

  border-radius: 50%;

  text-align: center;

  width: 65px;

  height: 65px;

  font-size:40px;


}


.social-circle li i {

  margin: 0;

  line-height: 30px;

  text-align: center;

}


.social-circle li a:hover i,

.triggeredHover {

  -moz-transform: rotate(360deg);

  -webkit-transform: rotate(360deg);

  -ms--transform: rotate(360deg);

  transform: rotate(360deg);

  -webkit-transition: all 0.2s;

  -moz-transition: all 0.2s;

  -o-transition: all 0.2s;

  -ms-transition: all 0.2s;

  transition: all 0.2s;

}


.social-circle i {

  color: #595959;

  -webkit-transition: all 0.8s;

  -moz-transition: all 0.8s;

  -o-transition: all 0.8s;

  -ms-transition: all 0.8s;

  transition: all 0.8s;

}


.social-network a {

  background-color: #F9F9F9;

}


/*---------------------------------Background*/

#div-with-bg {


    background-image: url("https://i.imgur.com/qv5ZwaO.jpg"); 

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center center;

    position: relative;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    

}


#footer {

    position: relative;

    bottom: 0;

    width: 100%;

    margin: 0 auto;

}



.image-box {

  position: relative;

}


.image-box__background,

.image-box__overlay {

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

}


.image-box__background {

  background: var(--image-url) center no-repeat;

  background-size: cover;


  z-index: 1

}


.image-box__overlay {

  background: rgba(0, 0, 0, 0.5);


  z-index: 2;

}


.image-box__content {

  position: relative;


  z-index: 3;


  /* Finally, style and place the content */

  color: white;

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

}


html{

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

   background-size: cover;

}


body, html {

  height: 100%;

  

}


img {

  width:100%;

  height: auto;

  position: relative;


}


#bg {


  /* Full height */

  height: 100%;



  /* Center and scale the image nicely */

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  width: 100%;

  min-height: 100vh;

  position: relative;


}


/*---------------------------------Text*/


.band_biography {

    margin-left: auto;

    margin-right: 30%;

    margin-top: 10%;

    width: 20em;

    color: white;

    background: rgba(0, 0, 0, 0.6);


}


.bio_image {

  border-radius: 50%;

  max-width:15%;

  margin-top: 12%;

  margin-left: 32%;

  background-size: contain;

  float: left;

  background: rgba(0, 0, 0, 0.6);

}


/*---------------------------------Contact Form*/


.section-padding {

    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 {

    background-color: #f9f9f9;

    z-index: -2;

}

.form-control,

.form-group .form-control {

    border: 0;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#009688), to(#009688)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));

    background-image: -webkit-linear-gradient(#009688, #009688), -webkit-linear-gradient(#D2D2D2, #D2D2D2);

    background-image: -o-linear-gradient(#009688, #009688), -o-linear-gradient(#D2D2D2, #D2D2D2);

    background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);

    -webkit-background-size: 0 2px, 100% 1px;

    background-size: 0 2px, 100% 1px;

    background-repeat: no-repeat;

    background-position: center bottom, center -webkit-calc(100% - 1px);

    background-position: center bottom, center calc(100% - 1px);

    background-color: rgba(0, 0, 0, 0);

    -webkit-transition: background 0s ease-out;

    -o-transition: background 0s ease-out;

    transition: background 0s ease-out;

    float: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    border-radius: 0

}


.form-control::-moz-placeholder,

.form-group .form-control::-moz-placeholder {

    color: #BDBDBD;

    font-weight: 400

}


.form-control:-ms-input-placeholder,

.form-group .form-control:-ms-input-placeholder {

    color: #BDBDBD;

    font-weight: 400

}


.form-control::-webkit-input-placeholder,

.form-group .form-control::-webkit-input-placeholder {

    color: #BDBDBD;

    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 {

    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 {

    background-image: none;

    border-bottom: 1px dotted #D2D2D2

}


.form-group {

    position: relative

}


.form-group.label-floating label.control-label,

.form-group.label-placeholder label.control-label,

.form-group.label-static label.control-label {

    position: absolute;

    pointer-events: none;

    -webkit-transition: .3s ease all;

    -o-transition: .3s ease all;

    transition: .3s ease all

}


.form-group.label-floating label.control-label {

    will-change: left, top, contents

}


.form-group.label-placeholder:not(.is-empty) label.control-label {

    display: none

}


.form-group .help-block {

    position: absolute;

    display: none

}


.form-group.is-focused .form-control {

    outline: 0;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#009688), to(#009688)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));

    background-image: -webkit-linear-gradient(#009688, #009688), -webkit-linear-gradient(#D2D2D2, #D2D2D2);

    background-image: -o-linear-gradient(#009688, #009688), -o-linear-gradient(#D2D2D2, #D2D2D2);

    background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);

    -webkit-background-size: 100% 2px, 100% 1px;

    background-size: 100% 2px, 100% 1px;

    -webkit-box-shadow: none;

    box-shadow: none;

    -webkit-transition-duration: .3s;

    -o-transition-duration: .3s;

    transition-duration: .3s

}


.form-group.is-focused .form-control .material-input:after {

    background-color: #009688

}


.form-group.is-focused label,

.form-group.is-focused label.control-label {

    color: #009688

}


.form-group.is-focused.label-placeholder label,

.form-group.is-focused.label-placeholder label.control-label {

    color: #BDBDBD

}


.form-group.is-focused .help-block {

    display: block

}


.form-group.has-warning .form-control {

    -webkit-box-shadow: none;

    box-shadow: none

}


.form-group.has-warning.is-focused .form-control {

    background-image: -webkit-gradient(linear, left top, left bottom, from(#ff5722), to(#ff5722)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));

    background-image: -webkit-linear-gradient(#ff5722, #ff5722), -webkit-linear-gradient(#D2D2D2, #D2D2D2);

    background-image: -o-linear-gradient(#ff5722, #ff5722), -o-linear-gradient(#D2D2D2, #D2D2D2);

    background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#D2D2D2, #D2D2D2)

}


.form-group.has-warning .help-block,

.form-group.has-warning label.control-label {

    color: #ff5722

}


.form-group.has-error .form-control {

    -webkit-box-shadow: none;

    box-shadow: none

}


.form-group.has-error .help-block,

.form-group.has-error label.control-label {

    color: #f44336

}


.form-group.has-success .form-control {

    -webkit-box-shadow: none;

    box-shadow: none

}


.form-group.has-success.is-focused .form-control {

    background-image: -webkit-gradient(linear, left top, left bottom, from(#4caf50), to(#4caf50)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));

    background-image: -webkit-linear-gradient(#4caf50, #4caf50), -webkit-linear-gradient(#D2D2D2, #D2D2D2);

    background-image: -o-linear-gradient(#4caf50, #4caf50), -o-linear-gradient(#D2D2D2, #D2D2D2);

    background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2)

}


.form-group.has-success .help-block,

.form-group.has-success label.control-label {

    color: #4caf50

}


.form-group.has-info .form-control {

    -webkit-box-shadow: none;

    box-shadow: none

}


.form-group.has-info.is-focused .form-control {

    background-image: -webkit-gradient(linear, left top, left bottom, from(#03a9f4), to(#03a9f4)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));

    background-image: -webkit-linear-gradient(#03a9f4, #03a9f4), -webkit-linear-gradient(#D2D2D2, #D2D2D2);

    background-image: -o-linear-gradient(#03a9f4, #03a9f4), -o-linear-gradient(#D2D2D2, #D2D2D2);

    background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#D2D2D2, #D2D2D2)

}


.form-group.has-info .help-block,

.form-group.has-info label.control-label {

    color: #03a9f4

}


.form-group textarea {

    resize: none

}


.form-group textarea~.form-control-highlight {

    margin-top: -11px

}


.form-group select {

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none

}


.form-group select~.material-input:after {

    display: none

}


.form-control {

    margin-bottom: 7px

}


.form-control::-moz-placeholder {

    font-size: 16px;

    line-height: 1.42857143;

    color: #BDBDBD;

    font-weight: 400

}


.form-control:-ms-input-placeholder {

    font-size: 16px;

    line-height: 1.42857143;

    color: #BDBDBD;

    font-weight: 400

}


.form-control::-webkit-input-placeholder {

    font-size: 16px;

    line-height: 1.42857143;

    color: #BDBDBD;

    font-weight: 400

}

.checkbox label,

.radio label,

label {

    font-size: 16px;

    line-height: 1.42857143;

    color: #BDBDBD;

    font-weight: 400

}


label.control-label {

    font-size: 12px;

    line-height: 1.07142857;

    font-weight: 400;

    margin: 16px 0 0 0

}


.help-block {

    margin-top: 0;

    font-size: 12px

}


.form-group {

    padding-bottom: 7px;

    margin: 28px 0 0 0

}


.form-group .form-control {

    margin-bottom: 7px

}


.form-group .form-control::-moz-placeholder {

    font-size: 16px;

    line-height: 1.42857143;

    color: #BDBDBD;

    font-weight: 400

}


.form-group .form-control:-ms-input-placeholder {

    font-size: 16px;

    line-height: 1.42857143;

    color: #BDBDBD;

    font-weight: 400

}


.form-group .form-control::-webkit-input-placeholder {

    font-size: 16px;

    line-height: 1.42857143;

    color: #BDBDBD;

    font-weight: 400

}


.form-group .checkbox label,

.form-group .radio label,

.form-group label {

    font-size: 16px;

    line-height: 1.42857143;

    color: #BDBDBD;

    font-weight: 400

}


.form-group label.control-label {

    font-size: 12px;

    line-height: 1.07142857;

    font-weight: 400;

    margin: 16px 0 0 0

}


.form-group .help-block {

    margin-top: 0;

    font-size: 12px

}


.form-group.label-floating label.control-label,

.form-group.label-placeholder label.control-label {

    top: -7px;

    font-size: 16px;

    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 {

    top: -30px;

    left: 0;

    font-size: 12px;

    line-height: 1.07142857

}


.form-group.label-floating input.form-control:-webkit-autofill~label.control-label label.control-label {

    top: -30px;

    left: 0;

    font-size: 12px;

    line-height: 1.07142857

}


.form-group.form-group-sm {

    padding-bottom: 3px;

    margin: 21px 0 0 0

}


.form-group.form-group-sm .form-control {

    margin-bottom: 3px

}


.form-group.form-group-sm .form-control::-moz-placeholder {

    font-size: 11px;

    line-height: 1.5;

    color: #BDBDBD;

    font-weight: 400

}


.form-group.form-group-sm .form-control:-ms-input-placeholder {

    font-size: 11px;

    line-height: 1.5;

    color: #BDBDBD;

    font-weight: 400

}


.form-group.form-group-sm .form-control::-webkit-input-placeholder {

    font-size: 11px;

    line-height: 1.5;

    color: #BDBDBD;

    font-weight: 400

}


.form-group.form-group-sm .checkbox label,

.form-group.form-group-sm .radio label,

.form-group.form-group-sm label {

    font-size: 11px;

    line-height: 1.5;

    color: #BDBDBD;

    font-weight: 400

}


.form-group.form-group-sm label.control-label {

    font-size: 9px;

    line-height: 1.125;

    font-weight: 400;

    margin: 16px 0 0 0

}


.form-group.form-group-sm .help-block {

    margin-top: 0;

    font-size: 9px

}


.form-group.form-group-sm.label-floating label.control-label,

.form-group.form-group-sm.label-placeholder label.control-label {

    top: -11px;

    font-size: 11px;

    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 {

    top: -25px;

    left: 0;

    font-size: 9px;

    line-height: 1.125

}


.form-group.form-group-sm.label-floating input.form-control:-webkit-autofill~label.control-label label.control-label {

    top: -25px;

    left: 0;

    font-size: 9px;

    line-height: 1.125

}


.form-group.form-group-lg {

    padding-bottom: 9px;

    margin: 30px 0 0 0

}


.form-group.form-group-lg .form-control {

    margin-bottom: 9px

}


.form-group.form-group-lg .form-control::-moz-placeholder {

    font-size: 18px;

    line-height: 1.3333333;

    color: #BDBDBD;

    font-weight: 400

}


.form-group.form-group-lg .form-control:-ms-input-placeholder {

    font-size: 18px;

    line-height: 1.3333333;

    color: #BDBDBD;

    font-weight: 400

}


.form-group.form-group-lg .form-control::-webkit-input-placeholder {

    font-size: 18px;

    line-height: 1.3333333;

    color: #BDBDBD;

    font-weight: 400

}


.form-group.form-group-lg .checkbox label,

.form-group.form-group-lg .radio label,

.form-group.form-group-lg label {

    font-size: 18px;

    line-height: 1.3333333;

    color: #BDBDBD;

    font-weight: 400

}


.form-group.form-group-lg label.control-label {

    font-size: 14px;

    line-height: .99999998;

    font-weight: 400;

    margin: 16px 0 0 0

}


.form-group.form-group-lg .help-block {

    margin-top: 0;

    font-size: 14px

}


.form-group.form-group-lg.label-floating label.control-label,

.form-group.form-group-lg.label-placeholder label.control-label {

    top: -5px;

    font-size: 18px;

    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 {

    top: -32px;

    left: 0;

    font-size: 14px;

    line-height: .99999998

}


.form-group.form-group-lg.label-floating input.form-control:-webkit-autofill~label.control-label label.control-label {

    top: -32px;

    left: 0;

    font-size: 14px;

    line-height: .99999998

}


select.form-control {

    border: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

    border-radius: 0

}


.form-group.is-focused select.form-control {

    -webkit-box-shadow: none;

    box-shadow: none;

    border-color: #D2D2D2

}


.form-group.is-focused select.form-control[multiple],

select.form-control[multiple] {

    height: 85px

}


.input-group-btn .btn {

    margin: 0 0 7px 0

}


.form-group.form-group-sm .input-group-btn .btn {

    margin: 0 0 3px 0

}


.form-group.form-group-lg .input-group-btn .btn {

    margin: 0 0 9px 0

}


.input-group .input-group-btn {

    padding: 0 12px

}


.input-group .input-group-addon {

    border: 0;

    background: 0 0

}


.form-group input[type=file] {

    opacity: 0;

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 100

}



#contactForm {

    margin-top: 100px

    

}


#contactForm .form-group label.control-label {

    color: #8c8c8c

}


#contactForm .form-control {

    font-weight: 500;

    height: auto

    

}


.row {

  display: block;

  text-align: center;

  padding-top: 10%;

}


#centerForm {

  text-align: center;

}


.container{

    padding-bottom: 0%;

}


/*---------------------------------Biography*/




.box{

    width: 100%;

    background: rgba(0, 0, 0, 0.4);

    padding: 40px;

    text-align: center;

    color: white;

    font-family: 'Century Gothic' ,sans-serif;

    padding-bottom: 10%;

    padding-top: 5%;

}


.box-img{

    border-radius: 50%;

    width: 200px;

    height: 200px;

}


.box h1{

    font-size: 40px;

    letter-spacing: 4px;

    font-weight: 100;

    

}


.box h5{

    font-size: 25px;

    letter-spacing: 3px;

    font-weight: 100;

}


.box p{

    text-align: justify;

    

}


/*---------------------------------Photo Grid*/


.row {

  display: flex;

  flex-wrap: wrap;

  padding: 0 4px;

}


/* Create two equal columns that sits next to each other */

.column {

  flex: 50%;

  padding: 0 4px;

}


.column img {

  margin-top: 8px;

  vertical-align: middle;

}


/*---------------------------------Media Queries*/



/* ----------- iPad Pro 10.5" ----------- */


@media only screen 

  and (min-width: 834px) 

  and (max-width: 1112px)

  and (-webkit-min-pixel-ratio: 2) {

  .container {

      padding-bottom: 22%;

      

  }

  .row {

      padding-top: 20% !important;

  }

}




/* ----------- iPad Pro 12.9" ----------- */


@media only screen 

  and (min-width: 1024px) 

  and (max-width: 1366px)

  and (-webkit-min-pixel-ratio: 2) {

.container {

      padding-bottom: 22%;

      

  }

  .row {

      padding-top: 20% !important;

  }

}


/* ----------- Blackberry Playbook ----------- */

@media (max-width: 600px) and (orientation: portrait) {

    .row {

      padding-top: 15%;

  }

 }

 

@media only screen 

  and (min-width: 834px) 

  and (max-width: 1112px)

  and (-webkit-min-pixel-ratio: 2) {

  .container {

      padding-bottom: 22%;

      

  }

  .row {

      padding-top: 20% !important;

  }

}


/* ----------- Photo Gallery ----------- */


img{

    width:100%;

}    


.gallery a {

    position: relative;

    display: block;

}


.overlay {

    background-color: rgba(0, 0, 0, 0.8);

    color: #fff;

    cursor: pointer;

    display: block;

    font-size: 100px;

    height: 100%;

    width: 100%;

    padding-top:40px;

    top: 0;

    left: 0;

    opacity: 0;

    overflow: hidden;

    position: absolute;

    text-align: center;

    transition: all 1s ease;

}


.overlay2{

    background-color: rgba(0, 0, 0, 0.8);

    color: #fff;

    cursor: pointer;

    display: block;

    font-size: 100px;

    height: 100%;

    width: 100%;

    padding-top:100px;

    top: 0;

    left: 0;

    opacity: 0;

    overflow: hidden;

    position: absolute;

    text-align: center;

    transition: all 1s ease;

}


.gallery a:hover .overlay ,

.gallery a:hover .overlay2 {

    opacity: 0.8;

}


.img-space{

    margin:20px 0px;

}


/*---------Video Gallery--------*/


查看完整回答
反对 回复 2023-10-24
?
三国纷争

TA贡献1804条经验 获得超7个赞

毕竟我自己已经找到了解决方案。


我将在这里发布我所做的事情，以防万一有人遇到这个问题。


块引用


该解决方案将在一定程度上取决于 CSS 页面的其余部分。可能需要一些尝试和错误才能找到适合您的方法。我选择了 calc() 方法。


您将所有内容包装在一个新的 div 中，其类名为“content”。确保在打开页脚之前关闭此 div。


然后，您使用 devtools 找出页脚的高度，并使用 calc() 方法为 .content 类指定一个最小高度，该最小高度等于视图高度的 100% 减去页脚的高度。


.content {

    min-height: calc(100vh - /* height of footer here */);

}


查看完整回答
反对 回复 2023-10-24
  • 4 回答
  • 0 关注
  • 122 浏览

添加回答

了解更多

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信