css - HTML div の高さが意図したよりも大きい

Question

HTML と CSS をもう一度ブラッシュアップしようとしていて、単純なレイアウトを作成しようとしていました。これが私のシンプルなサイトの HTML/CSS です。

<!DOCTYPE html> 
<HTML> 
<HEAD>
   <TITLE>My website</TITLE> 
   <META CHARSET="UTF-8">
<style type="text/css">
    * {
        padding: 0px;
        margin: 0px
    }

    html, body {
        margin:0;
        padding:0;
        height:100%;
        border: 0px;
    }

    #TopBar {
        width:100%;
        height:15%; 
        border-bottom:5px solid;
        border-color:#B30000;
    }

    #MidBar {
        background-color:black;
        height:70%;
        width:70%;
        margin-left:auto;
        margin-right:auto;
    }

    #BottomBar {
        position:absolute;
        bottom:0;
        width:100%;
        height:15%; 
        border-top:5px solid;
        border-color:#B30000;
    }

    h1 {
        font-family: sans-serif;
        font-size: 24pt;
    }

    #HEADER {
        text-align:center;
    }

    li {
        display:inline;
    }

    #copyright {
        text-align: center;
    }
</style>
</HEAD>

<BODY>

<DIV ID="TopBar">
<DIV ID="HEADER">
   <HEADER> 
   <H1>My website</H1> 
   <NAV> 
   <UL>
      <LI><A HREF="./about/index.html">About me</A> 
      <LI><A HREF="./contact/index.html">Contact me</A> 
      <LI><A HREF="http://throughbenslens.co.uk/blog">My blog</A> 
      <LI><A HREF="./portfolio/index.html">My portfolio</A> 
   </UL>
   </NAV> 
   </HEADER> 
</DIV>
</DIV>

<DIV ID="MidBar">
<DIV ID="PhotoSlideshow">
test
</DIV>
</DIV>


<DIV ID="BottomBar">
<FOOTER> 
<P ID="copyright">Name here &copy; 
<?PHP DATE("Y") ECHO ?> </P>
</FOOTER> 
</DIV>

</BODY>
</HTML>

div 要素に適用した高さを考えると、すべてがうまく整列することを期待していましたが、下部の div が意図した 15% よりも高く、中央の div に重なっているように見えます。 .. div が高すぎるどこが間違っているのでしょうか? シンプルなものだとおもいます。

score 1 · Accepted Answer

あなたのコードには多くの点がありますが、率直な答えは、境界線はボックスモデルの一部であるため、高さの計算の一部であるということです。したがって、div の高さは高さ + 境界線の幅の 15% であるため、大きすぎます。

ボックスモデルの説明を参照してください。

http://css-tricks.com/the-css-box-model/

score 0 · Accepted Answer

あなたの境界線（それぞれが5px）に関係していると思います。TopBar、MidBar、BottomBar の高さの合計が %100 になるため、追加の境界線を使用すると、有効な高さが %100 を超えるという問題が発生し、BottomBar に絶対位置があるため、下部では、ページを強制的にスクロールするわけではありませんが、MidBar と BottomBar の div の間でオーバーラップが生じます。

score 0 · Accepted Answer

0

#BottomBar から「位置: 絶対」を削除します。これでうまくいくはずです。

于 2013-07-24T16:51:40.640 に答える

css - HTML div の高さが意図したよりも大きい

4 に答える 4

Related

Reference