Firefox上的高度100％问题 [英] height 100% issue on Firefox
问题描述
你好。
我是论坛新手，但想知道你是否能指出我正确的方向？
我有一个在IE中运行良好的网站。该网站由其他人创建并使用表格完成。所以页面看起来像这样： -
顶部图像，左侧导航栏。旁边的内容。然后底栏设置在底部。现在内容区域设置为overflow：auto，因此滚动条显示在内容区域中，并将所有其他区域锁定在屏幕中。
这在firefox中不会发生，滚动条反而出现在全屏幕上，而不仅仅是内容区域本身。
你能帮忙吗？
谢谢
Ilesh
Hello there
I am new to the forum, but was wondering if you could point me in the right direction?
I have a site that works fine in IE. The site was created by someone else and done using tables. So the page looks like this:-
A top image, left hand side nav bar. content next to it. And then bottom bar set to stay at bottom. Now the content area is set to overflow:auto, so the scroll bars appears within the content area and leave all the other areas locked in the screen.
This does not happen in firefox, the scroll bar instead appears for the full screen and not just for the content area itself.
Can you help?
Thank you
Ilesh
推荐答案
您应该发布一个指向该页面的链接，以便我们看到问题。
首先在 www.w3c.org （在右侧查看HTML验证器）。为了让页面在浏览器中运行良好，它需要在complient HTML中，以便他们都能理解它。
You should post a link to the page so we can see the problem.
Start by validating your html at www.w3c.org (look on the right hand side for the HTML validator). to have the page work well cross browser it will need to be in complient HTML so that they can all understand it.
Hello Banfa
To老实说，我只想知道如何使用XHTML和CSS做到这一点？
因为我们正在考虑将表结构转换为XHTML。
所以我应该发布以下问题： -
我们有一个宽度为100％的顶部图像
我们有一个左手导航栏，然后旁边是内容区域
我们还有一个底部导航栏，它被锁定在屏幕的底部。
所以在IE中我知道这有效，但对于Firefox，我怎么能让内容区域在自己的div标签中滚动？由于内容可能不够大，因此溢出将设置为auto。但如果它足够大，那么我希望内容区域为100％，具体取决于浏览器大小。因此，如果我调整浏览器的大小，它应该没有问题。我这样说是因为我已经为内容区域指定了一个高度，看起来很好，但是如果浏览器没有运行800px到600px怎么办？那看起来很奇怪。
那么真的有办法让div区域可滚动并使其高度达到100％吗？
对不起之前的混淆
谢谢
Hello Banfa
To be honest I would just like to know how I could do this using XHTML and CSS?
Because we are thinking of converting the table structure into XHTML.
So really I should have posted the following question:-
We have a top image of width 100%
We have a left hand nav bar and then next to it is the content area
We also have a bottom nav bar which is locked to the bottom of the screen.
So in IE I know this works, but for Firefox, how could I make the content area scrollable in its own div tag? As the content may not be large enough therefore overflow would be set to auto. But if it is large enough then I would like the content area to 100% depending on the browser size. So if I resized the browser it should flow without problems. I say this because I have specified a height for the content area and it looks fine, but what if the browser is not running 800px by 600px? Then it would look wierd.
So really is there a way to make a div area scrollable and make it height 100%?
Sorry for the confusion before
Thanks
从你的描述中你应该可以做到你想要什么使用XHTML和CSS，但是在这样的情况下，1个样本网页值得10000个论坛贴子：D
设置100％高度时出现问题，因为它将元素的高度与其容器的高度相关联。但是，如果该容器的高度不是固定的（比如说文档的主体大小与内容的高度相同）那么它将取决于它的内容的高度，因此最终会依赖于内容的高度容器上的高度取决于显然不起作用的内容。
我猜你已经将主体设置为100％而内容div设置为其他百分比。这适用于MSIE，但不是CSS标准的一部分。 CSS标准确实定义了你想做的事情，但遗憾的是MSIE并不足以支持它们。
但是混合方法在IE和FireFox中都有以下哪种方法可行
From you description you should be able to do what you want using XHTML and CSS, however in a case like this it is true that 1 sample webpage is worth 10000 forum postings :D
There is a problem in setting 100% height because it relates the height of an element to the height of it''s container. However if that container is not of fixed height (like say the body of the document that sizes itself to the height of the content) then it will be dependent on the height of it''s content so you end up with the contents height dependent on the container who''s height is dependent on the content which clearly doesn''t work.
I guess you have set the body to 100% and the content div to some other percentage. This works in MSIE but is not part of the CSS standard. The CSS standard does define ways of doing what you want but unfortunately MSIE is not standard complient enough to support them.
However mixing methods gives the following which sort of works in both IE and FireFox
这篇关于Firefox上的高度100％问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
