Question

我一直在尝试用百分比来处理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>

Answer 1

你的魔力42％来自这样一个事实：百分比的边距是根据包含块的宽度计算的。因此，您指定的上边距是包含#navigation div的块宽度的42％，在本例中为body。

以百分比形式查看w3c specification for margin。

我认为你对margin-top: 90%的意思是：在#navigate的顶部添加相当于视口高度的90％的空间。浏览器的作用是：为顶部操作添加空间尽可能多的空间#navigate等于视口宽度的90％。

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

Answer 2

将Pixel用作边距而不是使用百分比是一种很好的做法。

边缘顶部对齐与百分比值混淆

2 个答案: