CSS 允许的最大高度（以像素为单位）

发布于 2024-11-28 16:50:50 字数 707 浏览 0 评论 0原文

我知道不同的浏览器可能有不同的上限值，但是对于给定浏览器中最大可渲染 CSS 高度/宽度的良好经验法则是什么？

例如，这个技巧：

.parent{
    overflow: hidden;
}

.column{
    float: left;
}

.max-height{
    margin-bottom: -30000px;
    padding-bottom: 30000px;
}

<div class="parent">

    <div class="column">
    </div>

    <!-- given a background color, this div will appear to expand to 100% the
         parent height -->
    <div class="column max-height">
    </div>

</div>

我知道这几乎是愚蠢的，但是如果页面扩展到超过 30000px，那么现在这个技巧就不起作用了。

我见过 32768px 在不同的地方使用；这是因为较高的值不可靠，还是只是因为它是一个很好的平方数？

原文

I understand that different browsers are likely to have different ceiling values, but what is a good rule of thumb for the maximum render-able CSS height/width in a given browser?

For example, this trick:

.parent{
    overflow: hidden;
}

.column{
    float: left;
}

.max-height{
    margin-bottom: -30000px;
    padding-bottom: 30000px;
}

<div class="parent">

    <div class="column">
    </div>

    <!-- given a background color, this div will appear to expand to 100% the
         parent height -->
    <div class="column max-height">
    </div>

</div>

I know it's nearly stupid, but if a page were to expand beyond 30000px, now the trick doesn't work.

I've seen 32768px used in various places; is this due to higher values being unreliable, or just because its a nice square number?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最初的梦 2024-12-05 16:50:51

我很想看看屏幕对象可用高度中的javascript可以返回哪些值

    <script type="text/javascript">

     document.write("Available Height: " + screen.availHeight);
     document.write("Available Width: " + screen.availWidth);

    </script>

使用jquery，如果您将它们作为变量传递，则可以使用.css函数将主体高度和宽度设置为这些值，例如。

var screenHeight = screen.availHeight

当然，这假设客户端浏览器上启用了 javascript

I'd be tempted to have a look at what values can be returned from javascript in the screen object available height

    <script type="text/javascript">

     document.write("Available Height: " + screen.availHeight);
     document.write("Available Width: " + screen.availWidth);

    </script>

Using jquery you could set the body height and width to these values using the .css function if you pass them in as variables such as.