1

我一直在尝试用百分比来处理 CSS 中的流体布局，并认为我已经到了某个地方，直到我在测试一些东西时遇到了这个问题。使用下面的代码，我有两个应该放在视图之外的 div，因此如果您滚动，您应该立即看到它们。

与左边距对齐的效果完美，但与上边距对齐的 div 的结果让我摸不着头脑。为了得到想要的结果，我不得不将上边距设置为 42%，我不确定这个数字是从哪里来的。我认为这将是 90%（100% - 顶部栏的高度），起初我认为这可能与包含的浏览器界面有关，但我的界面不可能是 48%，并且将浏览器置于全屏模式并没有修理它。真正让我感动的是，将导航的高度设置为 90% 加上顶部栏的高度为 10% 完全符合预期，那么为什么高度边距不同呢？

非常感谢您的帮助，如果您能尽可能多地解释任何事情，我会很高兴的，因为我仍在尝试理解这些属性以及它们是如何工作的。

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
    background-color:#988557;
    width:100%;
    height:100%;
    margin:0%;
}
#topbar {
    margin-left:100%;
    background-color:#3F4A66;
    width:100%;
    height:10%;
}
#navigation {
    margin-top:42%;
    background-color:#3F4A66;
    width:10%;
    height:90%;
}
</style>
</head>
<body>

<div id="topbar">
</div>
<div id="navigation">
</div>

</body>
</html>
4

2 回答 2

1

您的神奇 42% 来自于百分比边距是根据包含块的宽度计算的事实。因此，您指定的上边距是包含您的#navigation div 的块宽度的 42%，在本例中为body.

查看w3c的百分比边距规范。

我认为您的意思margin-top: 90%是：在 #navigate 的顶部添加与视口高度的 90% 相同的空间。浏览器所做的是：将空间添加到顶部操作 #navigate 等于视口宽度的 90% 。

如果您将浏览器视口设置为完全正方形，您将看到 90% 完全符合您的要求。但是，如果您将视口设置为更常见的矩形，您会看到定位是关闭的，符合“宽度百分比”而不是“高度百分比”。

于 2013-05-24T07:24:13.930 回答
0

使用像素作为边距而不是使用百分比被认为是一种很好的做法。

于 2013-05-24T06:40:04.927 回答