Почему моя страница показывает белую часть внизу экрана в портретном виде

Question

У меня проблема с моей страницей.

Я конвертирую шаблон для друга на новую веб-страницу.

Оригинальные шаблоны очень хороши для телефонов как в портретном, так и в ландшафтном дизайне, но после редактирования я сделал это только в пейзаже и на ПК.

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

Я сделал только несколько настроек на css и только настройку, которую я сделал, которая может иметь какое-либо отношение к ней, - это высота html, которую я установил от 100% до 1500 пикселей, но это тоже было сделано из-за этой проблемы, поэтому я сомневаюсь это будет иметь какое-либо отношение к этому.

Я просто не могу понять, почему он больше не формируется на экране.

html { 
 
    height: 100%;} 
 

 
* 
 
{ margin: 0; 
 
    padding: 0;} 
 

 
body 
 
{ font: normal 85% Arial, Helvetica, sans-serif; 
 
    background: #FFF url(../images/background.jpg) repeat; 
 
    color: #000; 
 
} 
 

 
p 
 
{ padding: 0 0 10px 0; 
 
    color: #FFF; 
 
    line-height: 1.7em; 
 
    font-size: 100% } 
 

 
img 
 
{ border: 0;} 
 

 
h1, h2, h3, h4, h5, h6 
 
{ font: normal 175% Arial, Helvetica, sans-serif; 
 
    color: #FFF; 
 
    text-shadow: 1px 1px #1D1D1D; 
 
    letter-spacing: -1px; 
 
    margin: 0 0 10px 0;} 
 

 
h2 
 
{ font: normal 165% Arial, Helvetica, sans-serif;} 
 

 
h3 
 
{ font: normal 130% Arial, Helvetica, sans-serif; 
 
} 
 

 
h4, h5, h6 
 
{ margin: 0; 
 
    padding: 0 0 0px 0; 
 
    font: normal 150% Arial, Helvetica, sans-serif; 
 
    line-height: 1.5em;} 
 

 
h5, h6 
 
{ font: normal 95% Arial, Helvetica, sans-serif; 
 
    color: #888; 
 
    padding-bottom: 15px;} 
 

 
a 
 
{ color: #FFF; 
 
    font-weight: bold; 
 
    background: transparent; 
 
    outline: none; 
 
    text-decoration: underline;} 
 

 
a:hover 
 
{ text-decoration: none;} 
 

 
ul 
 
{ margin: 2px 0 22px 30px; 
 
    line-height: 1.7em; 
 
    font-style: normal; 
 
    font-size: 100%;} 
 

 
ol 
 
{ margin: 8px 0 22px 20px;} 
 

 
ol li 
 
{ margin: 0 0 11px 0;} 
 

 
#main, #header, #banner, #menubar, #site_content, #footer, #content_bottom, #footercopyright 
 
{ margin-left: auto; 
 
    margin-right: auto;} 
 
    
 
#footercopyright{ 
 
\t height: 20px; 
 
\t width: 960px; 
 
\t font-size: 14px; 
 
\t text-align:center; 
 
\t top:auto; 
 
\t padding-top: 20px; 
 
    \t text-align: center; 
 
    \t background: transparent; 
 
    \t color: #1D1D1D; 
 
    \t text-shadow: 1px 1px #FFF;} \t 
 

 
#footercopyright a, #footercopyright a:hover 
 
{ color: #1D1D1D; 
 
    text-decoration: none; 
 
    padding-bottom: 20px;} 
 

 
#footercopyright a:hover 
 
{ text-decoration: underline;} 
 

 
#main 
 
{ background: transparent;} 
 
    
 
#header 
 
{ width: 960px; 
 
    height: 120px; 
 
    background: transparent;} 
 

 
#banner 
 
{ width: 960px; 
 
    position: relative; 
 
    height: 50px; 
 
    padding: 15px 0 0 0; 
 
    background: transparent;} 
 

 
#menubar 
 
{ width: 960px; 
 
    height: 50px; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    background: #0043A8; 
 
    background: -moz-linear-gradient(#43A9FF, #0043A8); 
 
    background: -o-linear-gradient(#43A9FF, #0043A8); 
 
    background: -webkit-linear-gradient(#43A9FF, #0043A8); 
 
    border-radius: 15px 15px 0px 0px; 
 
    -moz-border-radius: 15px 15px 0px 0px; 
 
    -webkit-border: 15px 15px 0px 0px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;} 
 
    
 
#welcome 
 
{ width: 960px; 
 
    float: left; 
 
    height: 50px; 
 
    margin: 0 auto; 
 
    padding-left: 20px; 
 
    background: transparent;} 
 
    
 
#welcome_slogan 
 
{ width: 960px; 
 
    float: left; 
 
    height: 50px; 
 
    margin: 0 auto; 
 
    padding-left: 20px; 
 
    background: transparent;} 
 
    
 
#welcome H1 
 
{ font: normal 300% Arial, Helvetica, sans-serif; 
 
    letter-spacing: -3px; 
 
    color: #FFF; 
 
    text-shadow: 1px 1px #1D1D1D;} 
 

 
#welcome_slogan H1 
 
{ font: normal 200% Arial, Helvetica, sans-serif; 
 
    letter-spacing: -2px; 
 
    color: #FFF; 
 
    text-shadow: 1px 1px #1D1D1D;} 
 
    
 
ul#menu 
 
{ margin:0; 
 
    margin: 0 0 0 20px;} 
 

 
ul#menu li 
 
{ padding: 0 0 0 0px; 
 
    list-style: none; 
 
    margin: 2px 0 0 0; 
 
    display: inline; 
 
    background: transparent;} 
 

 
ul#menu li a 
 
{ float: left; 
 
    font: bold 120% Arial, Helvetica, sans-serif; 
 
    text-align: center; 
 
    color: #FFF; 
 
    text-decoration: none; 
 
    height: 24px; 
 
    text-shadow: 0px -1px 0px #000; 
 
    padding: 16px 20px 10px 20px; 
 
    background: transparent; } 
 
    
 
ul#menu li.current a 
 
{ color: #FFF; 
 
    background: #323232; 
 
    text-shadow: none;} 
 
    
 
ul#menu li:hover a 
 
{ color: #FFF; 
 
    background: #323232; 
 
    text-shadow: none;} 
 

 
#site_content 
 
{ width: 940px; 
 
    padding-left: 20px; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    background: #323232; 
 
    border-radius: 0px 0px 15px 15px; 
 
    -moz-border-radius: 0px 0px 15px 15px; 
 
    -webkit-border: 0px 0px 15px 15px;} 
 

 
.sidebar_container 
 
{ float: left; 
 
    margin: 10px 20px 0 0; 
 
    width: 215px; 
 
    padding: 0;} 
 

 
.sidebar 
 
{ float: left; 
 
    width: 250px; 
 
    padding: 0; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px;} 
 

 
.sidebar_item 
 
{ font: normal 100% Arial, Helvetica, sans-serif; 
 
    width: 215px;} 
 

 
.sidebar h2 
 
{ padding: 5px 0 0 10px; 
 
    font: normal 140% Arial, Helvetica, sans-serif; 
 
    height: 30px; 
 
    text-shadow: 0px -1px 0px #000; 
 
    color: #fff; 
 
    background: #0043A8; 
 
    background: -moz-linear-gradient(#43A9FF, #0043A8); 
 
    background: -o-linear-gradient(#43A9FF, #0043A8); 
 
    background: -webkit-linear-gradient(#43A9FF, #0043A8); 
 
    border-radius: 15px 15px 15px 15px; 
 
    -moz-border-radius: 15px 15px 15px 15px; 
 
    -webkit-border: 15px 15px 15px 15px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;} 
 

 
#content 
 
{ width: 680px; 
 
    margin-bottom: 20px; 
 
    float: left;} 
 

 
.content_item 
 
{ width: 680px; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px;} 
 
    
 
.content_image 
 
{ float: left; 
 
    width: 150px; 
 
    height: 150px; 
 
    margin: 0 20px 10px 0; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;} 
 
    
 
.content_container 
 
{ width: 320px; 
 
    padding: 5px; 
 
    margin-right: 10px; 
 
    float: left;} 
 
    
 
#content_bottom 
 
{ width: 960px; 
 
    height: 160px; 
 
    text-align: center;} 
 
    
 
#content_bottom p 
 
{ color: #000; 
 
    text-shadow: 1px 1px #FFF; } 
 

 
#content_bottom h4 
 
{ color: #000; 
 
    text-shadow: none;} 
 
    
 
.content_bottom_container_box 
 
{ width: 295px; 
 
    padding: 5px; 
 
    text-align: center; 
 
    margin: 20px 0 10px 10px; 
 
    float: left;} 
 

 
.content_bottom_container_boxl 
 
{ width: 295px; 
 
    padding: 5px; 
 
    text-align: center; 
 
    margin: 20px 0 10px 10px; 
 
    float: left;} 
 
    
 
#footer 
 
{ width: 960px; 
 
    height: 20px; 
 
    padding-top: 20px; 
 
    text-align: center; 
 
    background: transparent; 
 
    color: #1D1D1D; 
 
    text-shadow: 1px 1px #FFF;} 
 

 
#footer a, #footer a:hover 
 
{ color: #1D1D1D; 
 
    text-decoration: none; 
 
    padding-bottom: 20px;} 
 

 
#footer a:hover 
 
{ text-decoration: underline;} 
 
    
 
.readmore 
 
{ font: bold 110% Arial, Helvetica, sans-serif; 
 
    height: 15px; 
 
    margin-left: 95px; 
 
    width: 90px; 
 
    padding: 5px 5px 10px 7px; 
 
    background: #fff; 
 
    background: -moz-linear-gradient(#fff, #ccc); 
 
    background: -o-linear-gradient(#fff, #ccc); 
 
    background: -webkit-linear-gradient(#fff, #ccc); 
 
    border-radius: 15px 15px 15px 15px; 
 
    -moz-border-radius: 15px 15px 15px 15px; 
 
    -webkit-border: 15px 15px 15px 15px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;} 
 
    
 
.readmore a 
 
{ color: #1D1D1D;} 
 
    
 
.button_small 
 
{ font: normal 110% Arial, Helvetica, sans-serif; 
 
    height: 15px; 
 
    width: 90px; 
 
    padding: 5px 5px 10px 7px; 
 
    background: #0043A8; 
 
    background: -moz-linear-gradient(#43A9FF, #0043A8); 
 
    background: -o-linear-gradient(#43A9FF, #0043A8); 
 
    background: -webkit-linear-gradient(#43A9FF, #0043A8); 
 
    border-radius: 15px 15px 15px 15px; 
 
    -moz-border-radius: 15px 15px 15px 15px; 
 
    -webkit-border: 15px 15px 15px 15px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;} 
 
    
 
.button_small a 
 
{ color: #FFF; 
 
    padding-left: 5px;} 
 

 
.form_settings 
 
{ margin: 15px 0 0 0;} 
 

 
.form_settings p 
 
{ padding: 0 0 4px 0;} 
 

 
.form_settings span 
 
{ float: left; 
 
    width: 280px; 
 
    text-align: left;} 
 
    
 
.form_settings input, .form_settings textarea 
 
{ padding: 2px; 
 
    width: 299px; 
 
    font: 100% arial; 
 
    border: 1px solid #E5E5DB; 
 
    background: #FFF; 
 
    color: #47433F;} 
 
    
 
.form_settings input[type="checkbox"] 
 
{ padding: 2px 0; 
 
    width: 15px; 
 
    font: 100% arial; 
 
    border: 0; 
 
    background: #FFF; 
 
    color: #47433F; 
 
    margin: 28px 0;} 
 

 
.form_settings .submit 
 
{ font: 100% arial; 
 
    width: 99px; 
 
    margin: 0 0 0 206px; 
 
    height: 26px; 
 
    padding: 2px 0 3px 0; 
 
    cursor: pointer; 
 
    background: #0043A8; 
 
    background: -moz-linear-gradient(#43A9FF, #0043A8); 
 
    background: -o-linear-gradient(#43A9FF, #0043A8); 
 
    background: -webkit-linear-gradient(#43A9FF, #0043A8); 
 
    border-radius: 7px 7px 7px 7px; 
 
    -moz-border-radius: 7px 7px 7px 7px; 
 
    -webkit-border: 7px 7px 7px 7px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    color: #FFF;} 
 

 
.slideshow { 
 
    width: 680px; 
 
    height: 250px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    margin-top: 20px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;} 
 
    
 
/* styling for the slideshow on the homepage */ 
 
ul.slideshow { 
 
    list-style: none; 
 
    width: 680px; 
 
    height: 250px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    margin: 0; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;} 
 
    
 
ul.slideshow li { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
    left: 0; 
 
    right: 0;} 
 
    
 
ul.slideshow li.show { 
 
    z-index: 500;} 
 
    
 
ul img { 
 
    border: none;} 
 
    
 
ul.white{ 
 
    color:#FFF; 
 
} 
 
    
 
#slideshow-caption { 
 
    width: 680px; 
 
    height: 38px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 500;} 
 
    
 
#slideshow-caption .slideshow-caption-container { 
 
    padding: 10px 25px 10px 25px; 
 
    background: transparent url(../images/transparent.png) repeat; 
 
    z-index: 1000;} 
 
    
 
#slideshow-caption p { 
 
    padding: 0; 
 
    font: normal 130% arial, sans-serif; 
 
    color: #FFF;} 
 

 
.linkwithoutline A:link {text-decoration: none} 
 
.linkwithoutline A:visited {text-decoration: none} 
 
.linkwithoutline A:active {text-decoration: none} 
 
.linkwithoutline A:hover {text-decoration: underline;} 
 

 
.linkwithoutline-black A:link {text-decoration: none} 
 
.linkwithoutline-black A:visited {text-decoration: none} 
 
.linkwithoutline-black A:active {text-decoration: none} 
 
.linkwithoutline-black A:hover {text-decoration: underline;} 
 
.linkwithoutline-black {color:#FFF; left:50%;} 
 

 
#news{width:208px; margin:23px 0 22px 19px} 
 
#news h2{ height:23px; background:url(../images/h_news.gif) 0 0 no-repeat; position:relative; border-bottom: #545400 3px dotted; margin-bottom:5px} 
 
.newsstory{width:201px; margin-left:7px; border-bottom: #545400 3px dotted; margin-bottom:5px} 
 
.newsstory p span.date{display:block; width:74px; height:16px; padding:2px 0 0 11px; font:12px/14px Trebuchet MS, sans-serif; font-weight:bold; background:#d3d7db; color:#22454d; margin-bottom:7px;} 
 
.newsstory p {margin-bottom:5px;} 
 
.newsstory p a{color:#22454d; font:10px/14px Tahoma, sans-serif; text-decoration:none} 
 
.newsstory p a:hover{color:#a65b99; } 
 
#news ul.bullet{margin:0 0 0 108px}

<?php 
 
// Get our database connector 
 
require("includes/(connection-file)"); 
 
?> 
 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
 

 
<head> 
 
    <title>Massagetherapeut Henk Dias</title> 
 
    <meta name="description" content="Massagetherapeut Henk Dias" /> 
 
    <meta name="keywords" content="Massage Therapeut Henk Dias Massagetherapeut" /> 
 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=9" /> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css" /> 
 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
 
    <script type="text/javascript" src="js/image_slide.js"></script> 
 
</head> 
 

 
<body> 
 

 
<!-- facebook likes en shares script --> 
 

 
<div id="fb-root"></div> 
 
<script>(function(d, s, id) { 
 
    var js, fjs = d.getElementsByTagName(s)[0]; 
 
    if (d.getElementById(id)) return; 
 
    js = d.createElement(s); js.id = id; 
 
    js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1"; 
 
    fjs.parentNode.insertBefore(js, fjs); 
 
}(document, 'script', 'facebook-jssdk'));</script> 
 

 
    <div id="main"> 
 
    <div id="header"> 
 
\t <div id="banner"> 
 
\t  <div id="welcome"> 
 
\t  <h1>Massagetherapeut Henk Dias</h1> 
 
\t  </div><!--close welcome--> 
 
\t  <div id="welcome_slogan"> 
 
\t  <h1>Your Company Slogan Here</h1> 
 
\t  </div><!--close welcome_slogan--> 
 
\t </div><!--close banner--> 
 
    </div><!--close header--> 
 

 
\t <div id="menubar"> 
 
     <ul id="menu"> 
 
     <li><a href="/" title="Home">Home</a></li> 
 
     <li><a href="about/" title="Over Mij">Over Mij</a></li> 
 
     <li><a href="intake/" title="Intake">Intake</a></li> 
 
     <li><a href="massage/" title="Massages">Massages</a></li> 
 
     <li><a href="tarieven/" title="Tarieven">Tarieven</a></li> 
 
     <li><a href="contact/" title="Contact">Contact</a></li> 
 
     </ul> 
 
    </div><!--close menubar--> \t 
 
    
 
\t <div id="site_content"> \t \t 
 

 
\t <div class="sidebar_container">  
 
\t \t <div class="sidebar"> 
 
      <div class="sidebar_item"> 
 
      <h2>Nieuws</h2> 
 
      <?php 
 

 

 
       $sql = "SELECT * FROM news ORDER BY ID DESC"; 
 
       $result = mysqli_query($conn, $sql) or die ("Could not access DB: " . mysql_error()); 
 

 
while ($row = mysqli_fetch_assoc($result)) { 
 

 
    echo "<div class=\"newsstory\" style=\"border-bottom: #1867c7 3px dotted;\">"; 
 
    echo "<p>"; 
 
    echo !empty($row['date']) ? ("<h3> <u>". $row['date'] . "</u></h3>") : ''; 
 
\t echo "<p>"; 
 
    echo $row['news']; 
 
\t echo "</p>"; 
 
    echo "</p>"; 
 
    echo "</div>"; 
 
} 
 

 
?> 
 
      </div><!--close sidebar_item--> 
 
     </div><!--close sidebar--> 
 
\t <div class="sidebar"> 
 
    \t <div class="sidebar_item"> 
 
     <div class="fb-like" data-href="https://www.facebook.com/massagetherapeutHenkDias/" data-width="232" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div> 
 
<br /> <br /> 
 
<div class="fb-share-button" data-href="http://www.massagepraktijkanne.nl/" data-width="232" data-type="button_count"></div> 
 
      </div><!--close sidebar_item--> 
 
     </div><!--close sidebar-->  \t \t 
 
     </div><!--close sidebar_container--> \t 
 
\t 
 
\t <div class="slideshow"> 
 
\t  <ul class="slideshow"> 
 
      <li class="show"><img width="680" height="250" src="images/home_1.jpg" alt="&quot;Time to relax&quot;" /></li> 
 
      <li><img width="680" height="250" src="images/home_2.jpg" alt="&quot;Give yourself a moment&quot;" /></li> 
 
     </ul> 
 
     </div> \t \t 
 
\t 
 
\t <div id="content"> 
 
     <div class="content_item"> 
 
\t \t \t <p>bla</p> 
 
\t \t </div><!--close content_item--> 
 
     </div><!--close content--> 
 
\t </div><!--close site_content--> 
 
    
 
\t </br> 
 
    </br> 
 
    
 
    </div><!--close main--> 
 
    
 
    <div id="footer"> 
 
    <a href="/" title="Home">HOME</a> | <a href="about/" title="Over Mij">OVER MIJ</a> | <a href="intake/" title="Intake">INTAKE</a> | <a href="massage/" title="Massages">MASSAGES</a> | <a href="tarieven/" title="Tarieven">TARIEVEN</a> | <a href="contact/" title="Contact">CONTACT</a> 
 

 
\t </div> \t <!--close footer--> 
 

 
\t <div id="footercopyright"> 
 
    \t <strong>Copyright &copy; Massagetherapeut Henk Dias | Designed by <span class="linkwithoutline-black"><a class="linkwithoutline-black" href="mailto:webmaster@massagetherapeuthenkdias.be">W. Vermeylen</a></span></strong> </div> \t <!--close footercopyright--> 
 
    
 
    </br> 
 
    </br> 
 
    
 
</body> 
 
</html>

Edit: только что заметил мое авторское колонтитула завинчивания с ним, но не знаю, почему ...

Answer 1

Ваше тело не установлен на 100%

body { 
height: 100%; 
} 

Answer 2

N evermind, сам нашел проблему :) Я установил нижнюю часть нижнего колонтитула, которая делала это. Без этого я работаю как шарм :)