我有一些我无法得到的问题。
一个。如果我这样做:
position: absolute;
top: 0px;
width: 100%;
padding: 10px;
我的浏览器中会出现Scrollsbars。怎么避免呢?我希望我的顶栏是全宽的,带有填充内容,但我不希望它超过实际宽度并使滚动条出现。怎么做?
湾你有没有关于如何根据用户的分辨率扩展网站元素的文章?当我尝试
position: absolute;
top: (some percentage)%
left: (some percentage)%
这绝不准确。使用像素而不是百分比 - 对于不同的分辨率,它不准确。
℃。菜单覆盖
有没有办法对div进行级别调整,以便我的下拉式css-only菜单不会出现在div下?当发生这种情况时,我无法点击该菜单中的某些项目,因为它们隐藏在正文div后面。
提前致谢!
答案 0 :(得分:2)
一个。将box-sizing: border-box; -moz-box-sizing: border-box
添加到您的代码中。它会使填充在100%宽度范围内,请查看here以获取更多信息,此处查看demo
湾尝试在网上搜索响应式设计。很多关于如何根据不同设备显示您的网站的信息。你可能不想扩展所有内容。
℃。你在寻找z-index吗?根据您提供的信息,不能帮助您。如果您需要了解更多信息,请添加HTML / CSS代码。
答案 1 :(得分:1)
所有问题都通过简单的CSS解决,所以这是个好消息!
<强>填充
这是因为CSS处理填充的方式。例如,如果您将元素设置为:
#id{
width:100px;
height:100px;
padding:10px;
}
实际上最终会是120px x 120px。这在http://www.w3.org/TR/CSS2/box.html解释。
您可以使用此处详述的框大小调整方法http://www.paulirish.com/2012/box-sizing-border-box-ftw/
来解决此问题根据分辨率进行缩放
这称为响应式设计。这里真的太多了,但基本的是你使用媒体查询来做到这一点。这里详细介绍http://css-tricks.com/css-media-queries/
菜单叠加
您可以使用CSS为您提供的z-index属性来解决此问题。这基本上是这样的:z-index:1低于z-index:2。需要注意的是,只有在元素上声明了一个位置时,z-index才会起作用。
http://css-tricks.com/almanac/properties/z/z-index/
同样,这里不需要js,这是个好消息,因为CSS对你来说要快得多,而且可扩展性更强。
答案 2 :(得分:0)
当然会出现滚动条,因为你有一个100%+ 10px的
你能做的是:
position: absolute;
top: 0px;
width: 100%;
padding: 0;
或
position: absolute;
top: 0px;
width: 90%;
padding: 10px; // if screen allows it
根据分辨率来缩放页面我强烈建议你使用bootstrap来实现页面多设备非常简单且非常快http://getbootstrap.com/
答案 3 :(得分:0)