Веб-страница автоматически не настраивается на любую высоту экрана

Question

У меня была проблема с пустым пространством ниже нижнего колонтитула. Мне удалось решить эту проблему, добавив липкий нижний колонтитул jQuery, поскольку методы CSS не работают для меня.

Однако у меня есть проблема с основным содержанием веб-страницы. Если я отрегулирую высоту .bg-photo, это повлияет на то, насколько низкий или высокий уровень будет ниже.

Любое содержимое в пределах .bg-фотографии вообще не влияет на размещение нижнего колонтитула.

Я думаю, что это может быть мой 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>    

Answer 1

Что может пригодиться в ситуации, как это CSS свойство В.Х..

В зависимости от того, какие браузеры вам необходимо поддерживать, но для регулировки высоты порта просмотра вы можете сделать height: 100vh или vmin.

Подробнее о поддержке браузера: http://caniuse.com/#feat=viewport-units

Answer 2

Вы можете достичь липкую колонтитула без каких-либо плагинов. 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-фото # главных укладывают под верхний и нижние колонтитулы (который я сделал непрозрачным с целью продемонстрировать, как блоки располагаются), таким образом, Буры вашего фона. Вы бы инстинктивно захотели перенести фон на внутренний непосредственный div внутри основной секции. Я набросал это eventuality как хорошо, однако, так как это использует Vh единиц,

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

он не может работать во всех браузерах, так что будьте осторожны, я также использовал известково вычитать заголовок и нижний колонтитулы. Надеюсь, он будет надежно работать для вас.