Question

我有以下div：

#leftmenu{
position: fixed;
top: 50%;
margin-top: -65x;
height: 130px;
}

此div垂直居中放置在页面上并固定，网页非常高，但div始终在屏幕中央可见。使用这些属性，如果我调整窗口大小，菜单会移动，因为它必须保持当前窗口大小的50％。我想要的是：
1）当我加载页面时，根据屏幕分辨率，div必须放置50％顶部（确定我的代码）
2）如果我调整窗口大小，它必须保持固定。我希望有一个像“min-top”这样的属性或类似的东西来强制顶级，但它不存在。你能救我吗？

Answer 1

1）当我加载页面时，根据屏幕分辨率，div必须放置50％顶部（确定我的代码）

建议：对于（取决于屏幕分辨率）你应该有媒体查询，它是一个css，它可以让你根据屏幕对你的div有特定的属性解析度。假设您有一个默认的960px宽度，当屏幕显示为330px时，您可以使用它：

@media only screen and (max-width: 330px) {
  /*change the div position or what so ever. 
  This will work like javascript but is better!*/
}

然后你会看到div的位置或宽度和bla bla的样式的变化。

2）如果我调整窗口大小，它必须保持固定。我希望有一个像“min-top”这样的属性来强制顶级，但它不存在。

是的，没有代码可以在没有编写内容的情况下执行您想要的操作。为此你必须写下这些行。

对于stay fixed？

写下这个：

div { position: fixed; }

它应该进入media query。然后当你调整大小时，它将获得第二个屏幕的第二种风格！
强制到顶级？你可以用这个：

div { position: absolute; top: 0; }

top: 0;会确保它应该margin-top: 0;。您可以使用此代码。

修改

您在评论中发布了此内容：

我在谷歌搜索媒体查询。我认为这不是我的问题的解决方案。不同的分辨率不是问题，实际的css与div的每个分辨率都放在50％的顶部。问题是（在所有分辨率下）我调整浏览器窗口的大小。我希望调整窗口的大小，菜单不会向上或向下移动

为此，问题几乎完全相反！问题是百分比，当你调整div的大小时，你正在使div更短或更大！这正在改变其立场。

您可以将其用于body标记。

body { min-width: 900px; max-width: 900px; }

通过这种方式，无论您将其缩小还是缩小，它始终只会保持900px。它不会改变或永远不会改变它的宽度，直到您使用媒体查询更改它！我希望我现在回答你的问题。

Answer 2

是相对于浏览器窗口的位置。

使用position: absolute;相对于document定位。

css：模拟“min-top”属性

2 个答案: