网页不会自动调整到任何屏幕高度

【问题标题】：Webpage doesn't adjust to any screen height automatically网页不会自动调整到任何屏幕高度
【发布时间】：2016-02-17 12:41:48
【问题描述】：

我在页脚下方的空白处遇到问题。我设法通过添加一个 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 p a {
    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>

【问题讨论】：

    标签： javascript jquery html css sticky-footer


    【解决方案1】：

    在这种情况下可以派上用场的是 css 属性 vh。

    取决于您必须支持的浏览器，但要调整到视口的高度，您可以使用height: 100vh 或vmin。

    更多浏览器支持详情：http://caniuse.com/#feat=viewport-units

    【讨论】：

    • 我不知道有这样的选择。问题仍然存在，因为它不会自动调整到屏幕的高度。与调整.bg-photo 的高度相同。 ://
    【解决方案2】：

    你可以在没有任何插件的情况下实现sticky-footer。 Here 我只用 css 做了“粘性页脚和页眉”。您可以在表单下添加更多内容，并确保页面向下延伸而内容保持在页脚上方 - here。

        /**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。我也画了这个eventuality，但是因为它使用 vh 单位，

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

    它可能不适用于所有浏览器，所以请注意，我还使用 calc 来减去页眉和页脚。我希望它会为你可靠地工作。

    【讨论】：

      猜你喜欢
      • 2014-11-07
      • 2017-03-10
      • 2014-08-24
      • 2012-02-26
      • 1970-01-01
      • 1970-01-01
      • 2013-05-07
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode