如何将页脚放在页面底部？我做错了什么？
当我尝试在 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; } -
慕丝7291255
您在结束部分标记之前有一个额外的 div 结束标记。尝试删除它，看看是否能解决问题。如果没有，我们可以尝试position:absolutefooter { 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">© 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> -
白板的微信
这将是完整的 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--------*/ -
三国纷争
毕竟我自己已经找到了解决方案。我将在这里发布我所做的事情，以防万一有人遇到这个问题。块引用该解决方案将在一定程度上取决于 CSS 页面的其余部分。可能需要一些尝试和错误才能找到适合您的方法。我选择了 calc() 方法。您将所有内容包装在一个新的 div 中，其类名为“content”。确保在打开页脚之前关闭此 div。然后，您使用 devtools 找出页脚的高度，并使用 calc() 方法为 .content 类指定一个最小高度，该最小高度等于视图高度的 100% 减去页脚的高度。.content { min-height: calc(100vh - /* height of footer here */);}
随时随地看视频慕课网APP
相关分类
Html5