'主'DIV没有伸展到底部 [英] 'Main' DIV not stretching to the bottom
问题描述
您好，
有人能告诉我我的样式表出了什么问题
使得主要容器DIV没有伸展所有到底部，
尽管里面有一个有很多内容的DIV？请
看看：
http://www.house.gov/velazquez/lh020...tatements.html
这是我的第一个使用CSS的网站（尚未推出）所以，如果你有任何其他提示让我的CSS更紧或更高效，我会很高兴听到他们。
谢谢！
路易斯
Hello,
Could someone tell me what I''m doing wrong with my style sheet that
makes the main container DIV not stretch all the way to the bottom,
even though there''s a DIV inside it that has plenty of content? Please
take a look:
http://www.house.gov/velazquez/lh020...tatements.html
This is my first website using CSS (not yet launched) so if you have
any other tips for making my CSS tighter or more efficient, I''d be
happy to hear them.
Thanks!
Luis
推荐答案
2007-02 -28，hestres< lu ********** @ mail.house.govwrote：
On 2007-02-28, hestres <lu**********@mail.house.govwrote:
您好，
有人能告诉我我的样式表出了什么问题吗
使得主容器DIV不会一直延伸到底部，
尽管里面有一个内容很多的DIV？请
看看：
http://www.house.gov/velazquez/lh020...tatements.html
看起来里面的div是浮点数。浮标会溢出他们的
容器，除非他们的容器是块格式化上下文根。
见
http://groups.google.co.uk/group/com...622d5c5?hl=en&
解决方案：制作容器一个BFC根（例如浮动它，但是
注意副作用）。或者在浮动之后放置一些东西，在
容器内，并在其上设置clear：right。
It looks like the div inside it is a float. Floats do overflow their
containers, unless their containers are block formatting context roots.
See
http://groups.google.co.uk/group/com...622d5c5?hl=en&
Solutions: make the container a BFC root (float it left for example, but
watch out for sideffects). Or put something after the float, inside the
container, with clear: right set on it.
容器DIV仅以垂直大小增长包含
的内容。你在
容器里面还有其他DIV，它们也根据内容自行调整大小。
但容器DIV并不关心包含多大的
DIV'除非
包含DIVS之后有一些内容。包含的DIV'负责
有自己的尺寸。
2可能的解决方案：
1 ）设置容器的高度或最小高度属性
元素（注意 - 最小高度在IE6中不起作用）
2）添加一些内容在最后一个包含DIV之后所以
容器必须弄清楚所包含的DIV有多大。
例如，在结束之前< / divtag插入
以下：
< br style =" clear：both />
& nbsp; < - 这是一个非休息空间 - >
最后一个提示 - 看到容器DIV，添加临时边框
属性像这...
< div id =" container" $ =
你会看到DIV在哪里。
只包含其他内容的DIV
DIV将显示为一维容器;宽度但是
没有高度。在最后一个包含DIV之后添加一些文字来
''强制''计算它的新高度。
干杯
Jim
The container DIV only grows in vertical size with the
content it encloses. You have other DIVs inside the
container which also size themselves according to content.
But the container DIV does not care how large the contained
DIV''s are unless there is some content following the
contained DIVS. The contained DIV''s are responsible for
there own sizing.
2 possible solutions:
1) set the height or min-height attribute of the container
element (note - min-height does not work in IE6)
2)add some content after the last contained DIV so the
container has to figure out how large the contained DIVs are.
for example, just before the closing </divtag insert the
following:
<br style="clear:both" />
<-- this is a non break space -->
One last tip - to see the container DIV, add a temp border
attribute like this ...
<div id="container" style="border:thin dotted blue">
and you will see where the DIV is.
You will discover that a DIV that contains nothing but other
DIV will appear like a one dimensional container; width but
no height. Add some text after the last contained DIV to
''force'' it to calculate its new height.
Cheers
Jim
2007-02-28，Diogenes< no **** @ nospam.netwrote：
On 2007-02-28, Diogenes <no****@nospam.netwrote:
容器DIV仅以垂直大小增长，并包含
内容。你在
容器里面还有其他DIV，它们也根据内容自行调整大小。
但容器DIV并不关心包含多大的
DIV'除非
包含DIVS之后有一些内容。
The container DIV only grows in vertical size with the
content it encloses. You have other DIVs inside the
container which also size themselves according to content.
But the container DIV does not care how large the contained
DIV''s are unless there is some content following the
contained DIVS.
但是包含的div本身就是内容。只是为了澄清：具有自动高度的div
将是它需要适合它的任何高度
正常流动的后代。那些后代的嵌套程度并不重要。
什么是正常流动的后代？任何不浮动的东西，或
位置：绝对或位置：固定。在这种情况下，
的盒子从容器div的底部突出，因为它是
浮动。
那里是一个例外，其中一个自动高度框将增长以适应其浮动的后代，并且如果它是一个块格式化上下文根。
请参阅我之前的帖子。
But the contained divs are themselves content. Just to clarify: a div
with auto height will be whatever height it needs to be fit to its
"normal-flow descendents" in. It doesn''t matter how deeply nested those
descendents are.
What are "normal-flow descendents"? Anything that''s not floated, or
position: absolute or position: fixed. In this case the box that
protruded from the bottom of the container div did so because it was
floated.
There is an exception where an auto height box will grow to fit its
floated descendents, and that''s if it''s a block formatting context root.
See my earlier post.
包含的DIV'负责
有自己的大小。
2可能的解决方案：
1）设置容器的高度或最小高度属性
元素（注意 - 最小高度在IE6中不起作用） ）
2）在最后一个包含DIV之后添加一些内容，这样
容器必须弄清楚包含的DIV有多大。
The contained DIV''s are responsible for
there own sizing.
2 possible solutions:
1) set the height or min-height attribute of the container
element (note - min-height does not work in IE6)
2)add some content after the last contained DIV so the
container has to figure out how large the contained DIVs are.
这里的关键是最后一个盒子必须是正常流量并且在它上面设置
，要求容器到垂直增长并使其分别清除浮动。
但是这可能是最好的解决方案。有时令人鼓舞的是，人们大惊小怪不想用
元素污染他们的语义汤，其唯一目的是调整格式。在那种情况下
你的第一个解决方案是好的，或者如果需要自动高度，
然后可以通过改变浮动来使容器成为BFC根，
溢出或显示属性。
The key things here are that that final box must be normal-flow and have
clear set on it, to require the container to grow vertically and to make
it clear the float respectively.
But yes this is probably the best solution. Sometimes it is encouraging
to see people fuss about not wanting to pollute their semantic soup with
elements whose sole purpose is to tweak the formatting. In that case
either your first solution is good, or if an auto-height is required,
then the container can be made a BFC root by changing its float,
overflow or display properties.
例如，在结束之前< / divtag插入
以下：
< br style =" clear：both />
& nbsp; < - 这是一个非中断空间 - >
for example, just before the closing </divtag insert the
following:
<br style="clear:both" />
<-- this is a non break space -->
不需要& nbsp;除非需要将IE
用于做正确的事情。
There should be no need for the unless it''s needed to kick IE
into doing the right thing.
这篇关于'主'DIV没有伸展到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
