Question

有人可以帮我理解为什么我会看到我所看到的吗？

<!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%。我希望看到彩色背景。这很奇怪。是什么给了什么？

Answer 1

将overflow:auto添加到#Viewport

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

<强> jsFiddle example

由于您浮动了#two，因此您将其从文档流中移除。 overflow:auto恢复预期的行为。

Answer 2

另外，请记住，percentage value始终相对于另一个值，并且因为您在后代上声明50%高度而没有指定DOM的任何其他百分比高度（以及根目录） element）百分比高度不起作用。

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

Example

浏览器中出现意外结果

2 个答案: