網頁不會自動調整為任何屏幕高度

Question

頁腳下方的空白出現問題。 我已經設法通過添加jQuery粘貼頁腳來解決此問題，因為CSS方法對我不起作用。

但是，我確實對網頁的主要內容有疑問。 如果我調整.bg-photo的高度，它將影響頁腳放置的高度或較低。

.bg-photo中的任何內容完全不會影響頁腳的位置。

我認為這可能是我的HTML或CSS造成的。 雖然，我不確定。

我想要的是頁面自動調整為任何屏幕的高度，並且用戶不必向下滾動即可僅查看頁腳。

這是網頁： http : //planet.nu/dev/test/index.html

這是jsFiddle： https ://jsfiddle.net/mqfrnjaa/

還有代碼，如果您需要立即查看它們。

 $(window).bind("load", function() { var footerHeight = 0, footerTop = 0, $footer = $(".footer"); positionFooter(); function positionFooter() { footerHeight = $footer.height(); footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px"; if ( ($(document.body).height()+footerHeight) < $(window).height()) { $footer.css({ position: "absolute" }).animate({ top: footerTop }) } else { $footer.css({ position: "static" }) } } $(window) .scroll(positionFooter) .resize(positionFooter) }); 

 html, body { height: 100%; } *{ margin: 0; } body { background: #fff; min-height: 600px; } body * { font-family: 'Open Sans', sans-serif; font-size: 14px; color: #393c3d; line-height: 22px; } #fw_header { margin: 0 auto; position: relative; width: 980px; } #fw_header ul { list-style-type: none; } .forums #fw_header { margin-bottom: 0; } #fw_header ul { padding-left: 12px; padding-top: 6px; } #fw_header li { float: left; padding: 0 3px; } #fw_header li a { padding: 0 8px; } #fw_header li a:hover { border-bottom: 5px solid #829AC6; text-decoration: none; } #fw_header li a.active { border-bottom: 5px solid #4E6CA3; } #fw_header ul.submenu li a.active, #fw_header ul.subsubmenu li a.active { border-bottom: 5px solid #829AC6; } #fw_header ul.submenu, #fw_header ul.subsubmenu { margin-top: 1em; padding-top: 0; } #fw_header ul.submenu_usage { padding-left: 32px; } #fw_header ul.submenu_plugins { padding-left: 20px; } #fw_header ul.submenu_development { padding-left: 23px; } #fw_header ul.submenu_extras { padding-left: 14px; } #fw_header ul.submenu_testing { padding-left: 480px; } #fw_header ul.submenu_styling { padding-left: 80px; } #fw_header ul.subsubmenu { padding-left: 120px; } #fw_header ul.submenu li, #fw_header ul.subsubmenu li { font-size: 80%; } #fw_header { font-size: 16px; } #fw_header a { color: #4E6CA3 !important; } #fw_header h1 { border-bottom: medium none; color: black; font-size: 2em; line-height: 1.45em; margin-top: 32px; vertical-align: middle; } #fw_header h1 img { margin-top: -5px; vertical-align: middle; } #fw_header h1 a { color: black !important; } #fw_header h1 a:hover { text-decoration: none; } #header_options { position: absolute; right: 150px; top: -32px; width: 495px; } #header_options .option { float: left; padding: 12px 0; text-align: center; width: 165px; } #header_options a:hover { text-decoration: none; } #header_options .option:hover { background-color: #F5F7FA; } #header_options div.option img { margin-right: 7px; vertical-align: middle; } #header_options .option table { margin: 0 auto; } #header_options .option table td {} #header_options #options_search { padding: 7px 0; width: 495px; } #header_options #options_download {} #options_search input[type="text"] { height: 20px; width: 350px; } #header_download { background: url("../images/dl_button_220.jpg") no-repeat scroll left top transparent; font-size: 0.9em; height: 36px; padding-top: 13px; position: absolute; right: 0; text-align: center; top: -8px; width: 220px; } #header_donate { background: url("../images/donate_button.jpg") no-repeat scroll left top transparent; font-size: 0.9em; height: 36px; padding-top: 13px; position: absolute; right: 220px; text-align: center; top: -8px; width: 220px; } #header_download a, #header_donate a { color: white; } #header_download a:hover, #header_donate a:hover { text-decoration: none; } #dontate_wrapper { background-color: #FCFCFC; border: 1px dotted #A5A5A5; color: #555555; font-size: 0.8em; margin: 0 0 1.5em; padding: 5px; text-align: center; } #header_advert { background-color: white; height: 200px; overflow: visible; position: absolute; right: 0; top: -32px; width: 150px; } body .adpacks {} body .one .bsa_it_ad { background: none repeat scroll 0 0 transparent; border: medium none; color: #999999; margin: 0; text-align: left; } body .one .bsa_it_ad:hover { background-color: #F5F7FA; color: black; } body .one .bsa_it_ad .bsa_it_i { display: block; float: none; font-size: 11px !important; margin: 0; padding: 0; text-align: center; } body .one .bsa_it_ad .bsa_it_d { font-size: 11px !important; } body .one .bsa_it_ad .bsa_it_i img { border: medium none; padding: 0; } body .one .bsa_it_ad .bsa_it_t { padding: 6px 0 0; } body .one .bsa_it_p { display: none; } .one .bsa_it_ad { color: #F5F7FA; padding: 4px 0 0 !important; } body #bsap_aplink, body #bsap_aplink:hover { display: block; font-size: 10px; left: 104px; position: absolute; text-decoration: none; top: 45px; transform: rotate(90deg); width: 100px; } .css_small { font-size: 75%; line-height: 1.45em; } .css_vsmall { font-size: 65%; line-height: 1.45em; } #dt_example #container { margin: 64px auto 30px !important; } .header { width: 100%; background: rgba(255, 255, 255, 0.6); color: #034e7c; text-align: center; padding: 20px 0; height: 115px; // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D73000', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */ } .header img.logo { height: 105px; } .header ul.breadcrumb li a { font-family: 'Open Sans'; font-size: 23px; color: #4a4a4a } .header ul.log-in { list-style-type: none; display: inline; float: right; margin-top: 55px; margin-right: 40px; } .header ul li { display: inline; color: red; margin-right: 35px; } .header ul.log-in li, .header ul.log-in li a { display: inline; font-size: 19px; color: red; text-decoration: none } .header .dateButton, .dateButton { width: 300px; height: 45px; background: #e63308; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #e63308 0%, #db3304 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e63308), color-stop(100%, #db3304)); background: -webkit-linear-gradient(top, #e63308 0%, #db3304 100%); background: -o-linear-gradient(top, #e63308 0%, #db3304 100%); background: -ms-linear-gradient(top, #e63308 0%, #db3304 100%); background: linear-gradient(to bottom, #e63308 0%, #db3304 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e63308', endColorstr='#db3304', GradientType=0); float: right; -webkit-border-radius: 2px; border-radius: 2px; margin-right: 70px; text-align: center; cursor: pointer; margin-top: -8px; } .header .dateButton a, .dateButton a { height: 30px; vertical-align: middle; line-height: 45px; font-weight: bold; color: #f0f0f0; font-size: 23px; } .header .dateButton img, .dateButton img { padding-right: 5px } .footer { width: 100%; background: #FFF; text-align: center; height: 40px; } .footer p { color: #4a4a4a; font-family: 'Open Sans', sans-serif; padding: 30px 0; } .footer pa { color: #9fcf64; } .navigation { min-width: 1300px; width: 100%; border-top: solid 1px #d6d6d6; border-bottom: solid 1px #d6d6d6; height: 60px; background: linear-gradient(to bottom, #f5f5f5 0%, #ececec 10%, #ededed 100%); } .navigation ul.breadcrumb { padding: 0px; margin: 0; margin-left: 50px; margin-top: 15px; margin-right: 0px; width: 1000px; } .navigation ul li { list-style-type: none; } .navigation ul li a { color: #4a4a4a; text-decoration: none; font-weight: bold; font-size: 23px; float: left; margin-right: 10px; } .triangle { width: 0px; height: 0px; border-style: solid; border-width: 3px 0 3px 5.2px; border-color: transparent transparent transparent #4a4a4a; float: left; margin-top: 8px; margin-right: 10px; } .top-section { height: 100px; } body * { font-family: 'Open Sans', sans-serif; font-size: 16px; color: #393c3d; line-height: 22px; } .bg-photo{ background:url(http://planet.nu/dev/test/images/bg.jpg); background-size: cover; height: 75%; text-align: center; } .bg-photo:before{ content: ''; display: inline-block; vertical-align: middle; margin-right: -0.25em; } .loginText{ font-size: 16px; } #createCampaignButton { transition-property: background-color, color; transition-duration: 1s; transition-timing-function: ease-out; font-size: 18px; /* font-weight: bold; */ color: #fff; background: #8bbd3a; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } table{ margin-bottom: 20px; background: rgba(255, 255, 255, 0.9); } h1{ color: #4a4a4a; font-size: 48px; } table th{ color: #666666; padding-top: 10px; text-align: left; padding-left: 15px; } table td { padding-left: 15px; } table td input{ padding-left: 5px; height: 30px; font-size: 22px; margin-bottom: 20px; width: 100%; } tbody{ width: 95%; display: table; } 

  <div class="header"> <div class="top-section"> <img class="logo" src="http://planet.nu/dev/test/images/littleforest_logo.jpg"> </div> </div> <div class="bg-photo col-md-12 col-xs-12"> <div class="col-md-6 col-sm-9"> <h1 style="font-size: 35px; text-align:center; color:#FFF;margin:20px 0 0 0"> Welcome to LFi </h1> <p style="text-align:center; color: #FFF; font-size: 20px; padding: 28px 0 0 0;">Insight that drives web success</p> <br> <form method="post" action="/crawler/LoginServlet"> <table style="width: 40%; padding: 20px 30px; display: inline-block; vertical-align: middle; margin: 30px 0 0 0; background: rgba(255,255,255, 0.9);"> <tbody> <tr> <th> User Name </th> </tr> <tr> <td> <input type="text" name="username" class="textInput loginText" placeholder="User Name"> </td> </tr> <tr> <th> Password </th> </tr> <tr> <td> <input type="password" name="password" value="" class="textInput loginText" placeholder="Password"> </td> </tr> </tbody> </table> <div> <p class="submit"> <input type="submit" name="commit" class="button" id="createCampaignButton" value="Log in" style="width:260px; display: inline-block; vertical-align: middle; margin: 20px 0 0 0;"> </p> </div> </form> </div> </div> <div class="footer col-md-12 col-xs-12"> <p> Powered by <a href="http://www.littleforest.co.uk/" style="color: #65892a; text-decoration: none; font-weight: bold;">Little Forest</a> a tool that encourages continuous improvement towards web success. </p> </div> 

Answer 1

在這種情況下可以派上用場的是CSS屬性vh。

取決於您必須支持的瀏覽器，但是要調整視口的高度，您可以設置height: 100vh或vmin 。

有關瀏覽器支持的更多詳細信息： http : //caniuse.com/#feat=viewport-units

Answer 2

您可以在沒有任何插件的情況下實現粘性。 在這里，我僅使用CSS做過“粘性頁腳和頁眉”。 人們可以在形式下加起來更多的內容並得到保證，頁面一直延伸下來，而內容不需頁腳以上- 在這里 。

    /**sticky-footer layout**/
body {
min-height: 500px;  
} 

.header,
#main,
.footer {
  -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.header {
height:120px !important; 
overflow:hidden;
background:#ffffff !important;
position:relative;
z-index: 10;
padding:0 !important;
 opacity:0.9;
}

.footer {
height:100px !important;
background:#ffffff !important;
overflow:hidden;
opacity:0.9;
padding:0 !important;
}

#main {
  min-height:100%;
  margin:-120px 0 -100px;
  height:auto !important;

}

#main:after,
#main:before {
content:"";
display:block !important;
margin:0;
}

#main:before {
height:120px;
}

#main:after {
height:100px;
}

但是，您可能不喜歡這樣的事實，即bg容器.bg-photo＃main放置在頁眉和頁腳（我故意使之不透明，以演示塊的位置）之下，從而切割了樹葉背景。 您本能地希望將背景轉移到主要部分內的內部立即div中。 我也描述了這種可能性 ，但是由於它使用的是vh單位，

min-height: calc( 100vh - 220px);   

它可能不適用於所有瀏覽器，所以請注意，我還使用calc減去了頁眉和頁腳。 希望它能為您可靠地工作。