草庐IT

html - html 和 body 元素的高度和宽度

coder 2023-08-07 原文

如果我有以下标记

<html>
<body>
<div id="wrapper">
<div id="container">
<p>Lots of pragraphs here</p>
</div>
</div>
</body>
</html>

具有以下样式
html, body, #wrapper
{
width: 100%;
height: 100%;
}
#container
{
width: 960px;
margin: 0 auto;
}

为什么我的 html、body 和 wrapper 元素没有扩展到 FF13 中浏览器/ View 端口的 100% 高度。在 Firebug 中查看时，html、正文和包装器在距底部一定距离处垂直停止。容器 div 扩展到整个高度，因为它的高度由内容决定。

(html、body、wrapper 为 1263px X 558px)和(容器为 960px X 880px)

查看默认 100% 以上情况，如下面的第一张图片所示。但是当我放大到最后一个可能的放大时，上面的情况不会发生，因为下面的第二张图片显示了 html、body、wrapper 扩展到整个高度。

(html、body、wrapper 为 4267px X 1860px)-(容器为 960px X 1000px)


最佳答案

您的 html实际上正好延伸到视口(viewport)的 100% 高度，因为这里的视口(viewport)是浏览器窗口，而不是内部内容。

考虑这个( jsfiddle ):

<div id="div1">
    <div  id="div2">
        <div  id="div3">
            very much content
        </div>
    </div>
</div>

#div1 {
    height:300px;
    overflow-y:scroll;
    border: 1px solid black;
}
#div2 {
    height:100%;
}
#div3 {
    height:600px;
}
div1这里的高度为 300px 并且是滚动的。当您滚动内容时，您只需移动内部 div 但高度保持不变，即 300px .设置 height:100% 时会发生完全相同的情况到 html。您的浏览器的高度保持不变。

当您缩小视口(viewport)时，您没有滚动，因此内部内容的高度小于视口(viewport)的高度。

很快，html {height:100%}与 parent 的高度有关，而不是与内部内容的高度有关

更新:

您可以为块元素的高度指定 3 种类型的值:
  • 长度 - 设置固定高度(例如“200px”、“50em”)。仅此而已，对此我无话可说。
  • 百分比 - 来自 W3C spec :

    • The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.


  • 汽车 - 高度取决于其他属性的值。 (一般在内部内容的高度上:文本、其他内联元素、块元素等)

    • 当浏览器显示您的页面时发生了什么:
  • 它得到 height: 100%为 <html> .这意味着生成的高度是根据生成的框(在这种情况下为 html -元素)包含块( initial containing block ，即在这种情况下为 browser window )的高度来计算的。比方说 1024px .
  • 那么它需要 height: 100%为 <body> .它将设置 body的高度到已计算的 html 的高度，即 1024px .
  • 然后浏览器应用 height:auto到 #wrapper然后是 #container和 <p> .我不知道它是如何做到这一点的，但可以假设它推迟了高度设置(以及分别依赖于高度设置的所有其他样式，即背景、边框等)并继续处理内部内容。
  • 下一点是文本内容。浏览器采用指定的或它自己的相关属性，即 default styles ，如字体系列、字体大小和文本高度。
  • 之后它会将高度设置为 <p> -element 所以<p>将向下延伸以包含所有内容(在这种情况下为文本)。同样的情况也发生在 #container 上。和 #wrapper .

    • 如果碰巧#wrapper的高度大于 body 的(1024 px，正如约定的那样)比overflow应该应用于body .即 visible这是默认设置。然后overflow: visible应用于html .然后浏览器显示整个 window 的滚动.老实说，我不知道这是否由 W3C 规范指定，但可以假设是。

    因此，当您滚动窗口时，您的 html和 body像所有其他元素一样移动。这与任何其他元素的行为相同(如我在上面发布的 jsfiddle 中):



    注意背景设置在body上元素，但它扩展到整个 canvas 即远远超出 body元素本身。这是为了您担心在 body 上设置 bg-property 的可能必要性。这 100% 符合 W3C spec其中指出(剪切):

    For documents whose root element is an ... "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first ... "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.



    当您缩小页面时，浏览器会重新计算所有尺寸。假设，每个 Ctrl + -单击页面缩小，例如，20%。然后你所有的文字都被缩小了，因为它的高度取决于字体大小，它受 Ctrl 的影响。 + -点击，对应<p> , #container和 #wrapper所有人都减少了，因为他们的高度取决于 text的高度。但是body和 html两者的高度取决于 window的高度不受 Ctrl 影响+ -点击。这就是为什么你最终得到这个:


    在这种情况下，宽度和高度行为之间没有区别。仅仅因为您设置了 width: 960px;，您不会看到与水平尺寸相同的问题。为 #container结果证明它小于浏览器窗口的宽度，因此不会发生溢出。如果#container的宽度超过 body 的宽度，你会看到这个:


    这一切都是正常和预期的行为，这里没有什么可解决的。

    关于html - html 和 body 元素的高度和宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11995392/

    htmlbodycodestrongcssheight

    有关html - html 和 body 元素的高度和宽度的更多相关文章

    1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

      我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

    2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

      在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

    3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

      所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

    4. ruby-on-rails - Ruby url 到 html 链接转换 - 2

      我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

    5. ruby - 在哈希的键数组中追加元素 - 2

      查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

    6. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

      我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

    7. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

      本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

    8. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

      我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

    9. ruby - Hanami link_to 助手只呈现最后一个元素 - 2

      我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm

    10. ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2

      我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

    随机推荐