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 回答