2017-01-28 1 views
-2

내 웹 페이지에 문제가 있습니다.내 페이지가 세로보기에서 화면 하단에 흰색 부분을 표시하는 이유

친구의 템플릿을 새 웹 페이지로 변환하고 있습니다.

원래의 템플릿 모양은 세로 및 가로 모두 휴대 전화에 매우 적합하지만 편집 한 후에는 가로 및 PC에서만 작동합니다.

세로보기에서는 웹 페이지 아래에 큰 흰색 부분이 나타납니다. 꽤 이상한데, 왜냐하면 PC와 가로보기에서 바닥 글과 함께 페이지 하단에 멈추기 때문입니다.

내가 CSS와 조정할 수있는 부분이 하나 밖에 없으므로 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 %로 설정되지 않은

답변

0

body { 
height: 100%; 
} 
+0

내가 말했듯이, 그것은 100 %로 설정되었지만, 그래서 나는 그것을 변화시키지 않은 배경 이미지의 최대 높이로 설정하는 것을 돕지 않았다. – FGOD

0

N 영원히, 문제를 직접 발견했습니다. 저는이 작업을 수행하는 바닥 글에 밑줄을 긋습니다. 이것이 없으면 나는 매력처럼 작동한다 :

관련 문제