2列布局 - 垂直问题 [英] 2-Column Layout -- Verticle Problem
问题描述
这个问题必须有一个简单的解决方案，我不能成为第一个处理它的人。也许谷歌没有帮助，因为我没有使用正确的条款？b $ b （我确实找到了一个帖子，但没有人
回复它。）
我有一个带有页眉和页脚的两列布局。如果内容
比导航长，则没有问题。但是，如果
内容比导航更短，导航菜单会向下延伸
页面，但页脚直接位于内容之下，因此它重叠
导航菜单的底部，而不是在下面。无论我是使用浮动，绝对还是相对定位，我都会遇到这个问题。
过去，我偶然发现了解决方案解决这个问题（现在
不记得我是怎么做的），或者我刚刚在内容div的
底部添加了一个空div 垫它的底部足够长了。
Lame，我知道。并且它不适用于动态生成的页面，
只有静态页面。
两者都是内容和导航在容器内div，为什么
不是容器 div展开以包含它们两个，
页脚整齐地隐藏在容器下？
我觉得真的很蠢 - 我是我确实错过了一些基本的东西。但是我在一年之后再次重新审视这个问题并且不知道在哪里开始解决这个问题。
TIA
你是对的，这是一个常见的问题。问题在于CSS
不像表那样可靠地纵向拉伸。随着时间的推移，使用较新的浏览器和较新版本的CSS，可能会或可能不会随着时间的推移而改变。没有
越少，每个尝试使用CSS代替桌子的人都会很快进入这个
。
你是什么'试图完成被称为''仿'布局，并且使用CSS
这并不容易。唯一''可靠''的方法是使用JS动态地改变你的DIV的高度
。除非你当然可以在固定的
高度工作，但通常这不是这种布局的选择。
当然，你可以回到桌面布局和中提琴！但我想
我会在CSS小组中推荐表格。没关系这个事实
如果你使用了桌子，你的所有问题都会消失。很有趣的是
我怎么这么简单的人试图摆脱桌子只是为了说''看，
哈哈，我没有桌子'''在很多情况下，一两个简单的桌子就会消除50行CSS和/或JS代码。
在任何人为我开火之前，我' '淘汰桌子的大粉丝嵌套
在桌子内面就像10级 - 但是在试图避免桌子所有
一起布局大约一年后遇到这个确切的问题要
没有结束 - 当我允许我避免使用JS或吨
的CSS代码时，我可以使用一个或两个表。
如果您愿意，我有一个非常简单的JS解决方案。它是附加的，是3
文件。一个带有布局的HTML，一个带有样式的CSS，以及带有
脚本的JS。
它背后的逻辑是DIV都没有高度指定，但
JS计算出3个DIV中哪一个最长，并将其他两个的高度更改为该高度。
您可以将它适应任意数量的DIV而不会有太多麻烦。我没有在每个浏览器或平台上尝试过它，因为当我觉得需要复杂的时候，这是我自己的一点点工作而不只是使用表格来使用
。我知道它适用于IE 6 / WinXP，但你可能需要
来通过其他设置进行审核。
希望有所帮助。
------------
Shawn Wilson
" Tamblyne" <钽****** @ noyahoospam.com>在消息中写道
新闻：11 ************* @ corp.supernews.com ...这个问题必须要有一个简单的解决方案，我不能成为第一个处理它的人。也许谷歌没有帮助，因为我没有使用正确的条款？ （我确实找到了一个帖子，但没有人回复它。）
我有一个带有页眉和页脚的两列布局。如果内容比导航更长，则没有问题。但是，如果
内容比导航短，导航菜单向下延伸到页面，但页脚直接位于内容下方，因此它重叠在导航菜单的底部，而不是在下面。无论我是使用漂浮，绝对还是相对定位，我都会遇到这个问题。
过去，我偶然发现了这个问题的解决方案（现在还是我不记得我是怎么做的，或者我刚刚在内容div的底部添加了一个空div来填充它的底部所以它足够长了。
Lame，我知道。并且它不适用于动态生成的页面，只有静态页面。
两者都是内容。和导航在容器内div，为什么
不是容器呢？ div展开以包含它们两者，
页脚整齐地隐藏在容器下面？
我觉得很愚蠢 - 我肯定我错过了一些基本的东西。但是我在一年之后再次重新审视这个问题，并且不知道在哪里开始解决它。
TIA
" Shawn Wilson" < SH **** @ dvigroup.net>写道：
你是对的，这是一个常见的问题。
此组中有一个发布约会：配置您的软件
在顶部注入归因线，剪断您直接回复的内容
到最低限度，并将你的回复放在它下面，从而创建一个
穿插消息。
问题在于CSS
像表一样不能可靠地伸展。随着时间的推移，新的浏览器和更新版本的CSS可能会或可能不会发生变化。
模拟大多数HTML表格布局不需要新版本的CSS，
这是由CSS 2.0提供的（但IE不支持）。 br />
当然，你可以回到桌面布局和中提琴！但我想
我会在CSS小组中推荐表格。
使用表格来创建布局有其优点。
如果您使用表格，请不要忘记所有问题都会消失。
使用表格进行布局也会产生很多问题。
如果您愿意，我有一个非常简单的JS解决方案。这是附件，是3
文件。
不要在这里发帖，上传，发布网址。
< br $>
-
Spartanicus
Tamblyne< Ta ****** @ noyahoospam.com>写道：
我肯定我错过了一些基本的东西。
所以我们就像一个网址问题，这样我们就可以看到你在说什么了。
-
Spartanicus
This problem has got to have a simple solution and I can''t be the first
person who has ever handled it. Perhaps Google is no help because I''m
not using the right terms? (I did find one post on-point, but no one
responded to it.)
I have a two column layout with a header and a footer. If the "content"
is longer than the "navigation", there is no problem. However, if the
content is shorter than the navigation, the navigation menus extend down
the page, but the footer is directly under the content, so it overlaps
the bottom of the navigation menus, instead of being below. And I''m
having this problem whether I use float, absolute or relative positioning.
In the past, I''ve stumbled on the solution to this problem (and now
can''t remember how I did it), or I''ve just added an empty div at the
bottom of the content div to "pad" the bottom of it so it''s long enough.
Lame, I know. And it doesn''t work on dynamically generated pages,
only static ones.
Both "content" and "navigation" are within a "container" div, so why
doesn''t the "container" div expand to contain both of them, with the
footer tucked neatly under the "container"?
I feel really stupid -- I''m sure I''m missing something basic. But I''m
revisiting this problem again after a year and have no idea where to
start to solve it.
TIA
You''re right, it''s a common problem. The problem lies in the fact that CSS
does not reliably stretch vertically like tables do. That may or may not
change as time goes on with newer browsers and newer versions of CSS. None
the less, everyone who tries to use CSS instead of tables runs into this
pretty quickly.
What you''re trying to accomplish is called a ''faux'' layout, and with CSS
it''s not easy. The only ''reliable'' way to do it is to use JS to dynamically
change the height of your DIVs. Unless of course you can work in fixed
heights, but normally that''s not an option in this kind of layout.
Of course, you could just go back to a table layout and viola! But I guess
I''m going to hell for suggesting tables in a CSS group. Nevermind the fact
that all your problems would go away if you used a table. It''s so funny to
me how CSS people try SOOOO hard to get rid of tables just to say ''look,
haha, I have no tables'' when in many cases a simple table or two would have
eliminated 50 lines of CSS and/or JS code.
And before anyone flames me, I''m a big fan of abolishing the tables nested
within tables to like the 10th level - but after trying to avoid tables all
together for layouts for about a year and running into this exact problem to
no end - I''m ok with one or two tables when it allows me to avoid JS or tons
of CSS code.
I have a pretty simply JS solution if you''d like it. It''s attached and is 3
files. One HTML with the layout, one CSS with the styles, and on JS with
the script.
The logic behind it is that the DIVs all have no height specified, but the
JS figures out which one of the 3 DIVs are the longest and changes the
height of the other two to that height.
You can adapt it to any number of DIVs without too much trouble. I haven''t
tried it on every browser or platform out there because it''s my own little
work-around when I just feel the need to be complicated instead of just
using a table. I know it works on IE 6 / WinXP though, but you might want
to vet it with other setups.
Hope that helps.
------------
Shawn Wilson
"Tamblyne" <Ta******@noyahoospam.com> wrote in message
news:11*************@corp.supernews.com...This problem has got to have a simple solution and I can''t be the first
person who has ever handled it. Perhaps Google is no help because I''m
not using the right terms? (I did find one post on-point, but no one
responded to it.)
I have a two column layout with a header and a footer. If the "content"
is longer than the "navigation", there is no problem. However, if the
content is shorter than the navigation, the navigation menus extend down
the page, but the footer is directly under the content, so it overlaps
the bottom of the navigation menus, instead of being below. And I''m
having this problem whether I use float, absolute or relative positioning.
In the past, I''ve stumbled on the solution to this problem (and now
can''t remember how I did it), or I''ve just added an empty div at the
bottom of the content div to "pad" the bottom of it so it''s long enough.
Lame, I know. And it doesn''t work on dynamically generated pages,
only static ones.
Both "content" and "navigation" are within a "container" div, so why
doesn''t the "container" div expand to contain both of them, with the
footer tucked neatly under the "container"?
I feel really stupid -- I''m sure I''m missing something basic. But I''m
revisiting this problem again after a year and have no idea where to
start to solve it.
TIA
"Shawn Wilson" <sh****@dvigroup.net> wrote:
You''re right, it''s a common problem.
There is a posting convention in this group: configure your software to
inject an attribution line on top, snip what you are directly responding
to to a minimum, and put your reply beneath it, thus creating an
interspersed message.
The problem lies in the fact that CSS
does not reliably stretch vertically like tables do. That may or may not
change as time goes on with newer browsers and newer versions of CSS.
No new version of CSS is required for emulating most HTML table layouts,
this is provided for by CSS 2.0 (but not supported by IE).
Of course, you could just go back to a table layout and viola! But I guess
I''m going to hell for suggesting tables in a CSS group.
Using a table for creating a layout has its advantages.
Nevermind the fact that all your problems would go away if you used a table.
Using a table for layout can also create quite a few problems.
I have a pretty simply JS solution if you''d like it. It''s attached and is 3
files.
Don''t post attachments here, upload it, post the url.
--
Spartanicus
Tamblyne <Ta******@noyahoospam.com> wrote:
I''m sure I''m missing something basic.
So are we, like an url to the problem so that we can see what you are
talking about.
--
Spartanicus
这篇关于2列布局 - 垂直问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
