0

誰かが私が見ているものを見ている理由を理解するのを手伝ってもらえますか?

コード:

<!doctype html>
<html lang="en">
    <head>
        <style>
            #Viewport { width:50%; height:50%; margin: 0 auto; position: relative; background-color: blue; }
            #one { position: absolute; width: 5%; height: 70%; background-color: green;}
            #two { width: 5%; float: right; }
        </style>
    </head>
    <body>
        <div id="Viewport">
            <section id="one">
                <p>hi</p>
            </section>
            <section id="two">
                <p>hi</p>
            </section>
        </div>
    </body>
</html>

5%~ ではなく、の幅を持つことを期待してい20%ます。色付きの背景が表示されることを期待しています。これは奇妙です。何を与える？

4

2 に答える 2

3

overflow:autoに追加#Viewport

#Viewport {
     width:50%;
     height:50%;
     margin: 0 auto;
     position: relative;
     background-color: blue;
     overflow:auto;
}

jsFiddle の例

フロートしたので#two、ドキュメントの流れから削除しました。overflow:auto期待される動作を復元します。

于 2013-05-17T14:50:10.100 に答える
2

また、percentage値は常に別の値に対して相対的であることを覚えておいてください50%。DOM のさらに上のパーセンテージの高さを指定せずに子孫の高さを宣言しているため (およびルート要素の場合)、パーセンテージの高さは機能しません。

追加html, body {height: 100%:}

例

于 2013-05-17T14:51:24.180 に答える