Html css:模拟一个;“最小顶部”;财产
我有以下部门:Html css:模拟一个;“最小顶部”;财产,html,css,alignment,margin,Html,Css,Alignment,Margin,我有以下部门: #leftmenu{ position: fixed; top: 50%; margin-top: -65x; height: 130px; } 这个div垂直放置在页面的中心,并且是固定的,网页很高,但是div在屏幕的中心总是可见的。使用这些属性,如果我调整窗口大小,菜单将移动,因为它必须保持当前窗口大小的50%。我想要的是: 1) 当我加载页面时,根据屏幕分辨率,div必须放置50%的顶部(我的代码可以) 2) 如果我调整窗口大小,它必须保持固定。 我希望有一个像“min
#leftmenu{
position: fixed;
top: 50%;
margin-top: -65x;
height: 130px;
}
这个div垂直放置在页面的中心,并且是固定的,网页很高,但是div在屏幕的中心总是可见的。使用这些属性,如果我调整窗口大小,菜单将移动,因为它必须保持当前窗口大小的50%。我想要的是:1) 当我加载页面时,根据屏幕分辨率,div必须放置50%的顶部(我的代码可以)
2) 如果我调整窗口大小,它必须保持固定。 我希望有一个像“min top”或类似的属性来强制顶级,但它不存在。
您能帮助我吗?是相对于浏览器窗口的位置 使用
位置:绝对代码>相对于文档的位置
1) 当我加载页面时,根据屏幕分辨率,div必须位于50%的顶部(我的代码可以)
建议:对于(取决于屏幕分辨率)您应该有媒体查询,这是一个css,它可以让您根据屏幕分辨率为div提供特定属性。假设您有一个默认的960px
width,当屏幕变得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”或类似的属性来强制顶级,但它不存在
是的,没有代码可以不写任何东西就做你想做的事情。为此,你必须写下这些行
对于保持固定
写下:
div{
位置:固定;
}
它应该进入媒体查询
中。然后,当你将调整大小,它将得到第二个风格,将为第二个屏幕
强行进入高层?您可以使用以下选项:
@media only screen and (max-width: 330px) {
/*change the div position or what so ever.
This will work like javascript but is better!*/
}
div{
位置:绝对;
顶部:0;
}
top:0
将确保它应该具有页边距顶部:0代码>。您可以使用此代码
编辑:
您在评论中发布了以下内容:
我在谷歌上搜索了媒体查询。我认为这不是解决我问题的办法。不同的分辨率不是问题,实际css的每个分辨率都将div置于50%的顶部。问题是(使用所有分辨率)调整浏览器窗口的大小时。我希望调整窗口的大小,菜单不会上下移动
对于这一点,问题几乎完全相反!问题是百分比,当您调整div的大小时,您正在使div变短或变大!它正在改变它的位置
您可以将其用于主体
标记
body {
min-width: 900px;
max-width: 900px;
}
这样,它将始终保持900px
,无论您调整它的大小。它不会改变或永远不会改变它的宽度,直到你改变它使用媒体查询!我希望我现在就回答你的问题。对不起,我不明白你的建议。我怎样才能使它与文档相关?我的意思是关于内容。这不是答案。嗯,我认为这不是我想要的解决方案。这一点已经很好了。呵呵,不,不,你搞错了,兄弟!我给了一个单词的建议,这取决于屏幕分辨率。我说这是为了解释,在所有分辨率下,我都希望获得所要求的行为,而50%的顶部对齐已经与我的css运行良好。如果50%对齐到顶部的单词,你猜怎么着?还有一些其他css属性来处理其他类型!你都检查过了吗?或者我的意思是你能把密码贴出来吗?嘿,莫里斯,现在检查答案!