CSS和jQuery:document.height未正确报告？div-won'；不要垂直伸展_Jquery_Css_Html

CSS和jQuery:document.height未正确报告？div-won'；不要垂直伸展

jquery css html

CSS和jQuery:document.height未正确报告？div-won'；不要垂直伸展,jquery,css,html,Jquery,Css,Html,奇怪的是，我似乎找不到有这个问题的人。欧欧欧在IE、Chrome（和Safari）上，代码在#main的结尾和实际页面的结尾之间留有间隙，但在Firefox上则没有香草CSS有html，主体{minheight:100%；height:auto！important；}#内容是位置：相对在#主内试图使#main从页面的顶部延伸到底部编辑：在更多地使用它之后，在我看来，一切都取决于#内容在CSS更改计算发生之前加载其全部内容。从一个页面切换到另一个页面可以让Chrome（和Safari）为

奇怪的是，我似乎找不到有这个问题的人。欧欧欧

在IE、Chrome（和Safari）上，代码在#main的结尾和实际页面的结尾之间留有间隙，但在Firefox上则没有

香草CSS有

html，主体{minheight:100%；height:auto！important；}

<代码>#内容是

位置：相对

在

#主

内

试图使

#main

从页面的顶部延伸到底部

编辑：在更多地使用它之后，在我看来，一切都取决于#内容在CSS更改计算发生之前加载其全部内容。从一个页面切换到另一个页面可以让Chrome（和Safari）为#main设置适当的高度。我有没有办法“让代码等待”？虽然我不确定这是否解决了IE的问题

<html>
    <body>
        <div id="main">
            <div id="content">
                <p>content area</p>
            </div>
        </div>
    </body>
</html>

查看小提琴

只是一个猜测，但在诅咒之间我会尝试的一件事是看看

$（'body'）.height（）是否返回任何不同的值。（可能不会。）因为我在宣誓和执行仪式上休息了一下，希望IE在未来六百年内符合标准，我可以告诉你a$（window）.load（function（）{$（'html'）.prepend（$（document）.height（）+'-'+$（window.height（）+'-'+$（'body'）.height（）；）给出IE中的“928-924-500”和Firefox中的“1102-948-500”结果。就好像IE不知道报告的正确高度一样。这就是我提到绝对定位的原因。这会有什么不同吗？通常当我遇到这样的问题时，我会后退一步，确保我的CSS没有做一些疯狂的事情。你真的不需要调整页面的高度，除非你想做两列等高布局之类的事情。为什么您的#content
div绝对定位？我在发布后不久将其更改为relative，但这并没有改变设置$（“#main'）.css（'height'，document.height）
似乎改为设置为window.height
。另外，我没有办法确保main与相对或绝对定位的子div具有相同的高度。我尝试设置html，body{height:100%}main{min height:100%；height:auto；}
以确保。因此，在这种情况下，我似乎被迫使用jQuery来设置CSS。你不应该需要Javascript。只是猜测一下，但在诅咒之间，我会尝试一件事，看看$（'body'）。height（）
是否返回任何不同的结果。（可能不会。）因为我在宣誓和执行仪式上休息了一下，希望IE在未来六百年内符合标准，我可以告诉你a$（window）.load（function（）{$（'html'）.prepend（$（document）.height（）+'-'+$（window.height（）+'-'+$（'body'）.height（）；）给出IE中的“928-924-500”和Firefox中的“1102-948-500”结果。就好像IE不知道报告的正确高度一样。这就是我提到绝对定位的原因。这会有什么不同吗？通常当我遇到这样的问题时，我会后退一步，确保我的CSS没有做一些疯狂的事情。你真的不需要调整页面的高度，除非你想做两列等高布局之类的事情。为什么您的#content
div绝对定位？我在发布后不久将其更改为relative，但这并没有改变设置$（“#main'）.css（'height'，document.height）
似乎改为设置为window.height
。另外，我没有办法确保main与相对或绝对定位的子div具有相同的高度。我尝试设置html，body{height:100%}main{min height:100%；height:auto；}
以确保。因此，在这种情况下，我似乎被迫使用jQuery来设置CSS。你不应该需要Javascript。我本想用小提琴来炫耀我的CSS，但我破坏了他们的服务器。无论如何，#content
具有最小高度：555px和位置：相对；顶部：135px并且不会超过该值（最小高度），除非内容需要#main
应最小高度：100%高度：自动
因此，如果需要，它会使用#content
进行扩展，但vanilla CSS不允许它像这样工作，可能是因为它的定位。它似乎不想更新，所以请在其中添加更多的“content area”。尝试10段左右的Lorem以获得完整效果。我更新了小提琴（新链接）：绝对定位了#main
，并在#content
上使用了边距，而不是定位。还添加了Moooore内容。保证金是一个好主意，但现在有没有办法解决这个问题，以便#main在适当的地方开始？（top:0px；
）好的，我明白了。你仍然可以定位#main
绝对你只需要做左：50%；左边距：-512px
以使其居中。查看我的更新答案和fiddle。我本想在fiddle中展示我的CSS，但我破坏了他们的服务器。无论如何，#content
具有最小高度：555px和位置：相对；顶部：135px并且不会超过该值（最小高度），除非内容需要#main
应最小高度：100%高度：自动
因此，如果需要，它会使用#content
进行扩展，但vanilla CSS不允许它像这样工作，可能是因为它的定位。它似乎不想更新，所以请在其中添加更多的“content area”。尝试10段左右的Lorem以获得完整效果。我更新了小提琴（新链接）：绝对定位了#main
，并在#content上使用了边距，而不是定位。还添加了Moooore内容。边距为gr
html, body {height: 100%; margin: 0; padding: 0}
#main {
    min-height: 100%;
    height: auto !important;
    width: 1024px;
    position: absolute;
    top:0; 
    left:50%;
    margin-left:-512px
}
#content {margin: 135px 0 0 300px}

/* for illustrative purposes */
#main {background-color: #CDE}