html - css: 模拟一个 "min-top"属性

Question

我有以下 div:

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

这个div是垂直居中放置在页面上的，而且是固定的，网页很高但是div一直在屏幕中央可见。使用这些属性，如果我调整窗口大小，菜单会移动，因为它必须保持在当前窗口大小的 50%。我想要的是:
1) 当我加载页面时，根据屏幕分辨率，div 必须放置 50% 顶部(我的代码可以)
2) 如果我调整窗口大小，它必须保持固定。我希望有一个像“min-top”之类的属性来强制顶层，但它不存在。你能帮帮我吗？

Answer 1

1) when I load the page, depending on the screen resolution, the div must place 50% top (ok with my code)

建议:对于(取决于屏幕分辨率)你应该有媒体查询，它是一个 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) if I resize the window, it must stay fixed. I hoped there was a property like "min-top" or something like this to force the top level, but it doesn't exist.

是的，没有代码可以在不编写任何东西的情况下完成您想做的事情。为此，您必须编写这些行。

1. stay fixed ？

   这样写:

   div {<br/>
position: fixed;<br/>
}

   它应该放在 media query 里面.然后，当您调整大小时，它将获得适用于第二个屏幕的第二种样式!

2. 强制到顶级？你可以使用这个:

   div {<br/>
position: absolute;<br/>
top: 0;<br/>
}

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

编辑:

您在评论中发布了这个:

I've googled on media query. I think it is not the solution to my problem. Different resolution are not a problem, with the actual css with every resolution the div is placed 50% top. The problem is when (with all resolutions) I resize the browser window. I'd like that resizing the window the menu doesn't move up or down

对于这一点，问题几乎完全相反!问题是百分比，当您调整 div 大小时，您正在使 div 变短或变大!哪个正在改变它的位置。

您可以将其用于 body标签。

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

这样，它将始终停留在 900px 上。 ，无论您将其调整为短路还是放大。在您使用媒体查询更改它之前，它不会或永远不会更改其宽度!我希望我现在能回答你的问题。