1. ホーム
  2. 質問と答え
  3. 画面の下部に白い部分が表示されるのはなぜですか？

画面の下部に白い部分が表示されるのはなぜですか？

2017-01-28 14 views
-2

私のウェブページに問題があります。画面の下部に白い部分が表示されるのはなぜですか？

友達のテンプレートを新しいウェブページに変換しています。

元のテンプレートの形状は、ポートレートとランドスケープの両方に適していますが、編集した後は、ランドスケープとPCのみで動作します。

肖像画を見ると、ウェブページの下に大きな白い部分ができます。これは、PC上や横長のビューでは、ページの一番下にあるので、フッターですべきであるため、かなり奇妙です。

私は100％から1500pxに設定したhtmlの高さと何か関係がありますが、この問題のために行われた調整だけを行いました。これはこれと何か関係があります。

私はもう画面に形作られない理由を理解できないようです。

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:[email protected]">W. Vermeylen</a></span></strong> </div> \t <!--close footercopyright--> 
 
    
 
    </br> 
 
    </br> 
 
    
 
</body> 
 
</html>

Screenshot of portrait view

編集：ちょうど私のフッターには、それにねじ込むされている著作権が、なぜノーアイデアを...気づい

あなたの体が100％に設定されていない

出典

2017-01-28 FGOD

答えて

0 

body { 
height: 100%; 
}

出典

2017-01-28 12:38:21 Omnitored

+0

私が言ったように、それは100％に設定されていましたが、私はそれを設定していませんでした。 – FGOD

0

N evermindは自分自身で問題を見つけました:)私はこれをやっているフッタのためのパディングボトムを設定しました。これがなければ私は魅力のように動作します:)

出典

2017-01-28 12:42:17 FGOD

関連する問題

 関連する問題