彩色柱的div高度问题 [英] div height problem for coloured column
问题描述
我猜想这个问题已经被讨论过了，但是我没有在ciwas档案中找到我的问题的答案。所以，在询问一些微不足道的风险时，这里有：
我想要一个看起来如下的页面：在左边，一个蓝色栏目
带有导航菜单。页面的其余部分，白色背景，内容为
。蓝色顺利地淡入白色。
我设法通过使用身体的背景图像来做到这一点，重复
垂直。此图像是200px宽的蓝色区域，具有平滑的
过渡到白色。带菜单的div绝对位于
右侧，因此它与背景图像的蓝色重叠。您可以在
的结果> http://www.phys.uu.nl/~gdevries/test/goal.cgi
此解决方案的问题是我必须指定宽度px中的
菜单。我当然希望在em中指定它，但是然后用背景图像的
技巧不起作用。
我能做的最好到目前为止，将菜单div的背景颜色设置为蓝色，其高度设置为100％。根据CSS2的规格，它的高度
应该是包含盒子的高度，它是身体的高度。我从先前的帖子中了解到，b视口的高度是在这个案例中以
拍摄的。
现在如果内容是那么你的视口的高度更高了，你向下滚动，你看到菜单div的背景颜色是
真的只有视口高;你看到下面的身体
背景颜色：见 http://www.phys.uu.nl/~gdevries/test/test.cgi
我的问题是：如何制作此菜单div一直延伸到
身体的底部？
我已阅读过很多关于在视口中居的帖子，或填写
视口如果内容很短，但没有答案这个特别的
问题。
感谢您提出任何想法！
Garmt de Vries。
I would have guessed that this issue had been discussed to death, but I
couldn''t find an answer to my problem in the ciwas archives. So, at the
risk of asking something trivial, here goes:
I want to have a page that looks as follows: at the left, a blue column
with a navigation menu. The rest of the page, with a white background, is
for the content. The blue fades smoothly into the white.
I managed to do this by using a background image for the body, repeated
vertically. This image is a 200px wide blue field, with a smooth
transition to white. A div with the menu is absolutely positioned at
the right, so it overlaps the blue of the background image. You can see
the result at http://www.phys.uu.nl/~gdevries/test/goal.cgi
The problem with this solution is that I have to specify the width of the
menu in px. I would of course prefer to specify it in em, but then the
trick with the background image doesn''t work.
The best I could do so far is to set the background-color of the menu div
to blue and its height to 100%. According to the CSS2 specs, its height
should then be the height of the containing box, which is the body. I
understand from previous posts that the height of the viewport is taken in
this case.
Now if the content is taller then the height of the viewport, and you
scroll down, you see that the menu div with its background colour is
really only as high as the viewport; underneath you see the body
background colour: see http://www.phys.uu.nl/~gdevries/test/test.cgi
My question is: how can I make this menu div stretch all the way to the
bottom of the body?
I have read numerous posts about centering in the viewport, or filling the
viewport if the content is short, but no answer to this particular
question.
Thanks for any thoughts you can give!
Garmt de Vries.
推荐答案
Garmt de Vries写道：
Garmt de Vries wrote:
我会有猜测这个问题已被讨论过死亡，但我无法在ciwas档案中找到我的问题的答案。因此，在询问微不足道的风险时，请注意：
I would have guessed that this issue had been discussed to death, but I
couldn''t find an answer to my problem in the ciwas archives. So, at the
risk of asking something trivial, here goes:
[表格式布局]
你想要一个像桌子一样的布局。所以你必须使用表*值来显示属性（CSS，不能在WinIE中运行< = 6.0）或使用HTML表格。
-
Johannes Koch
in te domine speravi;非永久性的东西。
（Te Deum，4美分。）
[table-like layout]
You want a table-like layout. So you have to use the table* values for
the display property (CSS, don''t work in WinIE <= 6.0) or use HTML tables.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Garmt de Vries< gd ****** @ phys .uu.nl>写道：
Garmt de Vries <gd******@phys.uu.nl> wrote:
我想要一个看起来如下的页面：在左边，一个蓝色的列
带有导航菜单。页面的其余部分，白色背景，内容为
。蓝色顺利地淡入白色。
我设法通过使用身体的背景图像，垂直重复
。此图像是200px宽的蓝色区域，具有平滑的白色过渡。带菜单的div绝对位于右侧，因此它与背景图像的蓝色重叠。您可以在 http：/上看到结果。
/www.phys.uu.nl/~gdevries/test/goal.cgi
这个解决方案的问题是我必须指定
菜单的宽度PX。我当然希望在em中指定它，但是然后用背景图像的
技巧不起作用。
I want to have a page that looks as follows: at the left, a blue column
with a navigation menu. The rest of the page, with a white background, is
for the content. The blue fades smoothly into the white.
I managed to do this by using a background image for the body, repeated
vertically. This image is a 200px wide blue field, with a smooth
transition to white. A div with the menu is absolutely positioned at
the right, so it overlaps the blue of the background image. You can see
the result at http://www.phys.uu.nl/~gdevries/test/goal.cgi
The problem with this solution is that I have to specify the width of the
menu in px. I would of course prefer to specify it in em, but then the
trick with the background image doesn''t work.
我不能想办法用ems做这件事（除了令人讨厌的东西与
z-index和em缩放图像），但以下工作的百分比
大小的列：< a rel =nofollowhref =http://steve.pugh.net/test/test66.html\"target =_ blank> http://steve.pugh.net/test/test66.html
史蒂夫
-
我的理论给你起见，我的异端邪说激怒了你，
我从不回信，你也不喜欢我的领带。 - 医生
Steve Pugh< st *** @ pugh.net> < http://steve.pugh.net/>
I can''t think of a way to do it with ems (other than nasty stuff with
z-index and em scaled images), but the following works with percentage
sized columns: http://steve.pugh.net/test/test66.html
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don''t like my tie." - The Doctor
Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
在文章中Garmt de Vries写道：
In article Garmt de Vries wrote:
我想要有一个看起来如下的页面：在左边，一个蓝色的列
带有导航菜单。页面的其余部分，白色背景，内容为
。蓝色顺利地淡入白色。
这很容易。
我设法通过使用身体的背景图像，垂直重复
。此图像是200px宽的蓝色区域，具有平滑的白色过渡。带菜单的div绝对位于右侧，因此它与背景图像的蓝色重叠。你可以看到结果在
http://www.phys.uu.nl/~gdevries/test/goal.cgi
服务器似乎有些减速......你说得对，它不对
解决方案。无论如何，你可以在图像右侧使用em和巨大的白色区域，
和蓝色背景。这可能会严重降低虽然
现在如果内容高于视口的高度，并且你向下滚动，你会发现菜单div的背景颜色是
真的只有视口一样高;在你的下方看到身体
背景颜色：见 http://www.phys.uu.nl/~gdevries/test/test.cgi
用这个取代你拥有的CSS：
- -
html，body {margin：0; padding：0; height：100％;背景：黄色}
[foo]，html，body，＃menu {min-height：100％; height：auto;}
#content {
背景：url（" transition.gif"）黄色重复-y;
border-left：蓝色实心15em;
margin- left：-40px;
/ *这个填充必须有一些价值，因为折叠边距在
Opera 7 * /
填充： 0.5em;
填充左：60px;
}
#menu {
background：url（" transition.gif"）blue right repeat-y;
position：absolute;顶部：0;左：0;
身高：100％;
宽度：15em;
}
---
实际上，在这两个部分中都有过渡图片，然后定位
将它们放在另一个上面。
有还有一些代码试图使菜单至少和
视口一样高。未经测试过的Opera 7.5p1，可能适用于IE，可能会工作在
Mozilla上，也可能在其他人身上。 [foo]应该隐藏IE的规则，
但是我不确定我是否正确地回忆起如何使用它...
如果你不需要像视口一样高，只需删除所有垂直的
的东西。
我已经读过很多关于在视口中居的帖子，或填写了
视口如果内容很短，但没有回答这个特别的问题。
I want to have a page that looks as follows: at the left, a blue column
with a navigation menu. The rest of the page, with a white background, is
for the content. The blue fades smoothly into the white.
That''s easy.
I managed to do this by using a background image for the body, repeated
vertically. This image is a 200px wide blue field, with a smooth
transition to white. A div with the menu is absolutely positioned at
the right, so it overlaps the blue of the background image. You can see
the result at http://www.phys.uu.nl/~gdevries/test/goal.cgi
Server seems to have some slowdown... You are right that it is not good
solution. Anyway you could use em and huge white area on right of image,
and blue body backgroud. That might degrade badly though
Now if the content is taller then the height of the viewport, and you
scroll down, you see that the menu div with its background colour is
really only as high as the viewport; underneath you see the body
background colour: see http://www.phys.uu.nl/~gdevries/test/test.cgi
Replace CSS that you have with this:
---
html, body {margin:0;padding:0;height:100%; background:yellow}
[foo], html, body, #menu {min-height:100%;height:auto;}
#content {
background: url("transition.gif") yellow repeat-y;
border-left:blue solid 15em;
margin-left: -40px;
/* This padding has to have some value, as collapsing margins work in
Opera 7*/
padding:0.5em;
padding-left:60px;
}
#menu {
background: url("transition.gif") blue right repeat-y;
position: absolute; top: 0; left: 0;
height:100%;
width: 15em;
}
---
Practically, have that transition picture in both parts, and position
them one over another.
There is also some code that tries to make menu at least as high as
viewport. Not tested exept Opera 7.5p1, might work on IE, Might work on
Mozilla and maybe in others too. [foo] is supposed to hide rule from IE,
but I''m not sure if I recalled correctly how to use it...
If you don''t need ot to be as high as viewport, just remove all vertical
stuff.
I have read numerous posts about centering in the viewport, or filling the
viewport if the content is short, but no answer to this particular
question.
我已经回答了几次，但并不完全是这个表格。通常它是
是介于两者之间的边界;-)
-
Lauri Raittila< http://www.iki.fi/ LR> < http://www.iki.fi/zwak/fonts>
Saapi l？hett ?? meili？，jos aihe ei liity ryhm ?? n，tai on yksityinen
tjsp。，mutta？l？ L·海特？ samaa viesti？ meilitse ja ryhm ?? n。
I have answered it few times, exept not exactly in this form. Usually it
is about border in between ;-)
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi l?hett?? meili?, jos aihe ei liity ryhm??n, tai on yksityinen
tjsp., mutta ?l? l?het? samaa viesti? meilitse ja ryhm??n.
这篇关于彩色柱的div高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
