0

CSSの高さタグに問題があります。スクロールバーなしでページを表示したいのですが、bodyタグの「高さ」を99％から100％に変更すると、突然スクロールバーが表示されてデザインが壊れてしまう理由がわかりません。

なぜこれが起こるのか、そしてその理由を知りたいのです。

ありがとう！

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

html {
    height:100%;
}

body {
    height: 99%;
    margin-left: 20px;
    margin-top:0px;

}

.gallerytitle {
    position: absolute;
    top: 20px;
    font-family: serif;
    font-size: 20px;
    text-align: left;
}

.fullgallerytitle {
text-align: left;
font-family: sans-serif;
font-size: 12px;}

.events{
position: absolute;
font-family: sans-serif;
font-size: 12px;
top: 20px;
right: 20px;}

/* Center Text Section */

.area {
  width: 100%;
  height: 100%;

  position: relative;
}

.middlespace {
  position: absolute;
  left: 50%;
  top: 50%;
  display: table;
}

.middlespace p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}



.bottom-left {

    position: absolute;
    font:sans-serif;
    bottom: 15px;
    left: 15px;
}



.contact {
    font-size: 11px;
    font-family: sans-serif;
    border-bottom: 1px black dotted;
}

.exhibitiontitle {
    color: #d4d4d4;
    font-style: italic;
    font-family: sans-serif;
    font-size: 10px;
    text-align: center;
}

.contact {
    font-size: 11px;
    font-family: sans-serif;
    border-bottom: 1px black dotted;
}

.bold {
    font-family: serif;
}


.about {
    font-size: 11px;
    font-family: sans-serif;
}


.address {
font-size: 11px;
border-bottom: 1px grey dotted;
}




.bottom-right {
    position: absolute;
    bottom: 15px;
    right:15px;
      font-style: italic;
    color: #8e8e8e;
    font-size: 11px;
}

.openinghours {
    font-style: italic;
    color: #8e8e8e;
    font-size: 11px;
    }
.subscribebutton
{

height:10px;
font-size: 9px;

}

.subscribebox
{

height:10px;
font-size: 9px;

}



</style>

<title>XYZ</title>

</head>
<body>
    <div class="gallerytitle">XYZ<br /></div>
    <div class="events">LOREM</div>




<div class="bottom-left">
        <span class="about">

            <span class="bold">XYZ</span> is a project by XZY.&nbsp;&nbsp;&#124;&nbsp;
            <span="address">Website Information</span> &mdash; <a href="mailto:info@info.eu">info@info.com</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


        </span>
</div>


<div class="bottom-right">
    <span class="openinghours">Open by Appointment</span><span class="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sponsored by XYZ</span>
</div>


</body>
</html>
4

3 に答える 3

2

本体にも下余白があります。

body {
    height: 100%;
    margin: 0 0 0 20px;    
}

eric meyers reset や normalize などの CSS リセットの使用を検討する必要がありますが、

于 2012-08-13T20:53:13.860 に答える
0

ページの 99% を使用してから、すべてを 20px の右側に移動するため、ページが壊れます。99% を外側に移動し、さらに使用します。これが解決策です。両方とも機能すると思います：

body {
    height: 100%;
    margin-left: 20px;
    margin-right: -20px;
    margin-top:0px;
}

また

body {
    height: 100%;
    padding-left: 20px;
    padding-right: -20px;
    margin-top:0px;
}
于 2012-08-13T21:27:15.997 に答える
0

ボディスタイルをこれに置き換えると、問題が解決するはずです:

body {
height: 100%;
margin-left: 20px;
margin:0px;

}

于 2012-08-13T20:50:56.550 に答える