1

我的 div (#box) 居中在浏览器窗口的中间，这对于 600px 垂直或更高的浏览器来说是非常棒的。如果窗口小于该窗口，则 div 顶部的内容会被剪掉，滚动条只会向上滚动页面（当我向下拉滚动条时），因此无法看到隐藏在顶部边缘上方的任何内容即使滚动条位于其最顶部位置，窗口也是如此。

这是我将 div 居中的方式——您可以看到为什么 div 的顶部在较小的浏览器窗口中被截断。

{position: absolute; top: 50%; left: 50%; width: 1930px; height: 607px; margin-left: -965px; margin-top: -302px;}

（即使在最宽的屏幕上也能容纳动画，它真的很宽——宽度不是问题。）

这是一个要查看的页面：http: //ianmartinphotography.com/test-site/
我的 CSS：http: //ianmartinphotography.com/test-site/css/basic.css

这很容易在我的 CSS 样式表中修复，但对于大于 600 像素的显示器和小于 600 像素的显示器，我似乎无法同时使用它。

那么，如何检测浏览器窗口大小，然后选择两个不同的 CSS 样式表之一？一个用于小窗户，另一个用于大窗户？是否有一个 jquery 脚本可以为我执行此操作？

或者，是否有另一种方法可以使用 CSS 使我的 div 居中在浏览器窗口的中间，这将允许滚动，以便可以在较小的浏览器窗口上访问 div 的顶部？

谢谢你的想法！

4

7 回答 7

4

@media 查询是我的偏好（看到您不喜欢将它们作为解决方案本身），但它们确实可以解决问题 - 特别是如果您稍微调整一下 CSS 以适应。

<link...media="only screen and (max-height: 600px)" href="small-device.css" />
    small-device.css = div.container { ... height:500px; margin:50%; ...}

<link...media="only screen and (min-height: 601px)" href="big-device.css" />
    big-device.css = div.container {... height:600px; margin:50%; ...}

通过删除绝对定位并利用正常的文档流，您可能还会有更多的运气。它将帮助您添加诸如{ overflow-y:scroll; } 按屏幕高度隐藏的 div 之类的内容。

我认为最后，如果您尝试围绕手持设备进行设计，您将在某种程度上需要媒体查询。我的 Android 屏幕（例如）有 3 个显示选项（低、中、高清）。所有 3 个裁剪页面都不同。

于 2011-03-20T01:59:53.570 回答
1

适用于所有主要浏览器的解决方案。不需要 JS。垂直/水平居中，可滚动，当内容大于视口时粘在顶部。

HTML：

<div id="body">[your content goes here]</div>

CSS：

html, body {
    width: 100%;
    height: 100%;
    }

html {
    display: table;
}

body {
    display: table-cell;
    vertical-align: middle;
}

#body {
    margin: 0 auto;
}

不要忘记应用最后一条规则，它实际上会执行水平居中。

于 2011-03-20T02:37:57.687 回答
1

您可以通过 Jquery 确定窗口大小

$(window).width();
$(window).height();

或者

$(document).width();
$(document).height();

然后改变css

$("link").attr("href", "blue.css");

像这样的东西：

$(document).ready(function(){

 if($(document).height()  > 600 or $(window).height() > 600){

   $("link").attr("href", "600+.css");

 } else {

   $("link").attr("href", "600-.css");

 }
});
于 2011-03-20T01:08:25.313 回答
0

使用以下 JavaScript 条件检测屏幕大小。

function x()<head>将处理在标签中插入 CSS 链接。您需要做的就是调用该函数并传入 CSS 文件名。

< script type = "text/javascript" >
<!--
function x(y) {
    var styles = y;
    var newSS = document.createElement('link');
    newSS.rel = 'stylesheet';
    newSS.href = 'data:text/css,' + styles;
    document.getElementsByTagName("head")[0].appendChild(newSS);
}

if ((screen.width >= 1024) && (screen.height >= 768)) {
    x('file.css');
}
else {
    x('file1.css');
}
//-->
< /SCRIPT>
于 2011-03-20T00:53:29.447 回答
0

只是做了一些谷歌搜索，发现了这个：

http://www.ilovecolors.com.ar/detect-screen-size-css-style/

那对你有用吗？

于 2011-03-20T00:54:59.663 回答
0

试试 Less CSS 框架： http: //lessframework.com/，

您不需要 JavaScript，而是可以使用 CSS @Media 根据分辨率/屏幕大小设置样式。

祝你好运

于 2011-03-20T01:01:34.040 回答
0

如果“document_height”不起作用，请尝试“window_height”我在代码中评论它！

$("link").attr("href", "css_file_path");// 这里必须插入你的css的路径，在下面的代码中替换它

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>

<script type="text/javascript">

$(document).ready(function(){

document_height = $(document).height();
//window_height = $(window).height();

//if(window_height  > 600){
 if(document_height  > 600){
    alert('Bigger than 600px height: ' + $(document).height());
   $("link").attr("href", "600+.css"); // Here load css if window is bigger then 600px;

 } else {
    alert('Smaller than 600px height: ' + $(document).height());
   $("link").attr("href", "600-.css"); // Here load css if window is smaller then 600px;

 }
});

</script>
于 2011-03-22T11:15:44.640 回答