"内容宽度"一个网络文件

时间:2014-06-02 15:49:37

标签: javascript html google-chrome firefox

在大多数浏览器和典型网页(例如bbc.com)上,如果调整文档大小,则会出现水平滚动条显示的精确宽度。如果窗口宽度大于此值,则滚动条不在此处。这似乎是"意图"文档的内容宽度。我想知道的是什么是html / javascript属性可以给我这个宽度。

2 个答案:

答案 0 :(得分:0)

网络文档的内容宽度是流动的。如果可能,浏览器将始终尝试重排项目以适应窗口。当它不可能时,这是你得到滚动条。

例如,如果您的页面中只包含带文本的段落标记,则在窗口大小小于最长的单词之前,您可能永远不会看到滚动条。但是,如果您有一个绝对大小的对象(和display: block),那么您将看到滚动条。

页面中的任何对象都可以具有绝对宽度,通常以像素或ems为单位,当滚动条出现时,此宽度将指示。它取决于页面的结构,但通常你有一个具有固定宽度的容器(例如width: 960px)或一个"流体"容器的相对宽度加上min-widthmax-width属性。如何设置这些CSS属性将决定页面的行为方式。

如果您始终使用相对宽度,则可能永远不会看到滚动条。这个概念是设计响应式网页的开始。

答案 1 :(得分:0)

结帐A Tale of Two Viewports。您可能正在寻找:

document.documentElement.offset[Width|Height]
document.documentElement.scroll[Width|Height]
document.documentElement.client[Width|Height]

我上面链接的博文有更多信息。