CSS2：一切的容器是什么？ [英] CSS2: what is the container of everything ?
问题描述
我已经幸福地生活了15年（我们的第一个网络服务器始于1993年）
没有CSS，但我现在决定学习并试验它。
我的个人偏好一直是我的
页面中的项目宽度通常没有设置为固定值，而是设置为百分比（例如，框架集中的
帧）或显示区域的表格），因为先验我不知道用户将使用什么屏幕或窗口大小，并且浏览器
窗口可以任意调整大小水平方向，理想情况下是没有水平滚动条的
，除非确实需要。同样地，我不用
使用绝对字体名称或大小（否则说我关心内容和
逻辑布局，但不是因为到处都是精确的外观）。 />
然而，我的一些同事写了一些页面，用
固定字体或固定宽度来定义页面。不幸的是，如果窗户不够宽，那么就必须水平滚动。
我希望能解决这个问题，显然人们可以做一些事情。
简单（单列）文档，例如：
body {width：20cm;最大宽度：80％;}
（在较大的窗口上，文档具有固定大小，而
右边的部分未使用，如前所示;如果一个窗口调整较小，但
文件总是包含在窗口中，没有水平滚动条
是必需的）
然后我尝试开发一种无框状框架外观。
body {width：100％; }
#myhead {position：fixed;顶部：0;左：0;右：0;底部：汽车;
宽度：100％;身高：4.5em;背景：白色; z-index：1}
#main {position：absolute：top：4.5em;左：汽车;右：auto;
bottom：auto;身高：自动;宽度：76％;保证金：2％; z-index：0}
#sub {position：fixed;上：4.5em;右：0;底部：0; left：auto;
宽度：18％;背景：浅绿色;保证金：0 1％; zindex：1}
使用适当的DIV，顶部有一个标题区域，占据
整个宽度（myhead），右边是导航区域（子），
文档进入主区域（垂直滚动条滚动它
）。我可以水平调整窗口的大小，一切都保持可见。
< div id = myhead>固定页面标题的空间< / div>
< div id = main ...页面的大部分< / div>
< div id = sub ...导航区域< / div>
+ --------------------------------- +
| myhead |
+ --------------------------------- +
| | * |
|主要| sub * |
| | * |
+ --------------------------------- +
到目前为止一直这么好（除了sub区域没有齐齐右边，
但右边有10个像素。为什么？）。这就是我*喜欢它的方式。
现在如果我想把这两件事结合起来怎么办？即做我的同事
喜欢。即使用身体{宽度：20厘米;最大宽度：80％;}和myhead，main
和子类？
我希望产生一个通常的整体区域宽20厘米，右边是未使用的空间，或者如果调整得更小则占窗口的80％，
这个整体区域分为三个部分，如图所示
以上（不是身体是所有东西的容器？）
相反它看起来只有主要区域重新缩小到较小的
宽度，另外两个仍然参考窗口宽度。
我做错了什么？
-
-------------------------------- --------------------------------------
no **** @ mi.iasf.cnr.it 是更多人使用的新闻阅读帐户
避免不必要的垃圾邮件。返回此地址的任何邮件都将被拒绝。
如果用户愿意，用户可以在文章中披露他们的电子邮件地址。
2008-10-14，LC的无垃圾邮件新闻阅读帐户< no **** @ mi.iasf.cnr.itwrote：
[...]
然后我尝试开发一个无框架的外观。
body {width：100％; }
#myhead {position：fixed;顶部：0;左：0;右：0;底部：汽车;
宽度：100％;身高：4.5em;背景：白色; z-index：1}
#main {position：absolute：top：4.5em;左：汽车;右：auto;
bottom：auto;身高：自动;宽度：76％;保证金：2％; z-index：0}
#sub {position：fixed;上：4.5em;右：0;底部：0; left：auto;
宽度：18％;背景：浅绿色;保证金：0 1％; zindex：1}
使用适当的DIV，顶部有一个标题区域，占据
整个宽度（myhead），右边是导航区域（子），
文档进入主区域（垂直滚动条滚动它
）。我可以水平调整窗口的大小，一切都保持可见。
< div id = myhead>固定页面标题的空间< / div>
< div id = main ...页面的大部分< / div>
< div id = sub ...导航区域< / div>
+ --------------------------------- +
| myhead |
+ --------------------------------- +
| | * |
|主要| sub * |
| | * |
+ --------------------------------- +
到目前为止一直这么好（除了sub区域没有齐齐右边，
但右边有10个像素。为什么？）。这就是我*喜欢它的方式。
现在如果我想把这两件事结合起来怎么办？即做我的同事
喜欢。即使用身体{宽度：20厘米;最大宽度：80％;}和myhead，main
和子类？
我希望产生一个通常的整体区域宽20厘米，右边是未使用的空间，或者如果调整得更小则占窗口的80％，
这个整体区域分为三个部分，如图所示
以上（不是身体是所有东西的容器？）
相反它看起来只有主要区域重新缩小到较小的
宽度，另外两个仍然参考窗口宽度。
我做错了什么？
百分比是相对于包含块的。
绝对定位事物的包含块是最近的
祖先，除了静态（初始值）之外的任何位置，
并且如果没有一个视口。
现在它是视口。
因此，如果你使身体位置：相对，它就成为包含块
for main。
但固定位置事物的包含块是_always_
视口，你不能改变它。
所以不要使用位置：固定为myhead和sub。取而代之的是使用位置：
绝对所有东西，但制作#main overflow：auto所以你可以滚动
里面的东西。
你可以获得几乎相同的效果。
2008年10月14日星期二，Ben C写道：
2008-10-14，LC写道：
> body {width：100％ ; }
#myhead {position：fixed;顶部：0;左：0;右：0; bottom：auto;
宽度：100％;身高：4.5em;背景：白色; z-index：1}
#main {position：absolute：top：4.5em;左：汽车;右：汽车;
底部：汽车;身高：自动;宽度：76％;保证金：2％; z-index：0}
#sub {position：fixed;上：4.5em;右：0;底部：0;左：自动;
宽度：18％;背景：浅绿色;保证金：0 1％; zindex：1}
（实际上我也使用了一个间隔符，以便主要的顶行不是
隐藏在myhead）。
所以不要使用位置：固定为myhead和sub。取而代之的是使用位置：
绝对所有东西，但制作#main overflow：auto所以你可以滚动
里面的东西。
你的意思是或许使用位置：为所有东西固定而不是
make #main overflow：auto ？如果我这样做，有或没有身体
{position：relative;}，那么它就像预期的那样工作!!
如果我按照你说的那样做所有aboslute，这会导致所有内容（myhead main
和sub）以实心方式滚动。我想要的是
标题和导航栏始终保持在屏幕上并且只有
主卷轴。
NB我有和没有
身体获得相同的结果{position：relative}
唯一的区别是身体{position：relative} a about
10pix边框出现在标题的顶部（为什么？为什么我总是
在sub右边有类似的边框？）
>
好的，我理解。我混淆了边际 （在盒子外面）
和padding （在里面）。使用填充，我可以摆脱sub右边的
边框...如果我使用
body {position：relative}，那么仍然有一个更薄的边框如果我这样做的话
身体{position：relative;保证金：0}
它在哪里继承了我没有设定的非零保证金？
无论如何，我仍然坚持我原来的问题
>现在如果我想将这两件事结合起来怎么办？即像我的同事一样喜欢。即使用身体{宽度：20厘米;最大宽度：80％;}和myhead，主要
和子类？
我希望产生一个通常为20厘米宽的整体区域
右侧未使用的空间，如果调整得较小，则占窗口的80％，并且这个整体区域分为三个部分，如图中所示
如果我应用上述内容，令人惊讶的是，myhead和sub使用整个视口定位
，只有main的内容得到更窄的
宽度< br $> b $ b -
--------------------------------- -------------------------------------
no **** @ mi.iasf.cnr.it 是更多人使用的新闻阅读帐户
避免垃圾邮件。返回此地址的任何邮件都将被拒绝。
如果用户愿意，用户可以在文章中披露他们的电子邮件地址。
On 2008-10-15，LC'的无垃圾邮件新闻阅读账户< no **** @ mi.iasf.cnr.itwrote：
在星期二， 2008年10月14日，Ben C写道：
>在2008-10-14，LC写道：
>> body {width：100％; }
#myhead {position：fixed;顶部：0;左：0;右：0; bottom：auto;
宽度：100％;身高：4.5em;背景：白色; z-index：1}
#main {position：absolute：top：4.5em;左：汽车;右：汽车;
底部：汽车;身高：自动;宽度：76％;保证金：2％; z-index：0}
#sub {position：fixed;上：4.5em;右：0;底部：0;左：自动;
宽度：18％;背景：浅绿色;保证金：0 1％; zindex：1}
（实际上我也使用了一个间隔符，以便主要的顶行不是
隐藏在myhead）。
>所以不要使用position：fixed for myhead和sub。而是使用位置：
绝对的所有东西，但使#main overflow：auto所以你可以滚动内部的东西。
你的意思是或许代替使用位置：为所有东西固定而不是
make #main overflow：auto ？如果我这样做，有或没有身体
{position：relative;}，那么IT就像预期的那样工作！
不，我的意思是位置：绝对。
如果我按照你所说的那样做aboslute ;这会导致所有内容（myhead main
和sub）以实体方式滚动。我想要的是
标题和导航栏始终保持在屏幕上并且只有
主卷轴。
要使它与position：absolute一起工作，你要确保所有三个div在屏幕上都适合
，并且没有一个溢出它。 br />
然后你做#main overflow：auto或overflow：滚动并把所有的
内容放在那里。然后#main的行为有点像一个框架。
dorayme在某个地方有一个例子，因为它最近出现了。
NB我有和没有
身体获得相同的结果{position：relative}
唯一的区别是身体{position：relative} a about
10pix边框出现在标题的顶部（为什么？为什么我总是
在sub的右边有一个类似的边框？）
在sub上，因为你给它一个1％的右边距。
Body有一个约8px的默认样式表的边距。一旦你使用
使它成为位置：相对它成为#main的容器，所以你
将看到#main向下移动并向右移动大约8px。没有位置：
相对于身体，＃main'的容器是视口。
#myhead不应受位置影响：相对于身体它是
位置：固定，因此它的容器始终是视口。
好的，我明白了。我混淆了边际 （在盒子外面）
和padding （在里面）。使用填充，我可以摆脱sub右边的
边框...如果我使用
body {position：relative}，那么仍然有一个更薄的边框如果我这样做的话
身体{position：relative;保证金：0}
我认为你必须谈论制作#myhead等所有职位：
绝对现在。是的，如果他们是绝对的位置，他们被定位相对于身体的填充盒，如果身体不是位置：静态，则定位
。
所以他们都以8px向身体的中心移动：身体的边缘。
如果你不喜欢它，设置身体{margin：0; padding：0}。
它在哪里继承了我没有设置的非零保证金？
Body从UA默认样式表中获取它。
无论如何，我仍然支持原始问题
我坚持原来的答案:)
我会看看我是否能找到dorayme制作的例子。
这是： http ：//dorayme.890m.com/alt/pseudoFrames.html
以下是主题：
http：// groups。 google.co.uk/group/com...c77fccda0f7101
I have happily lived for 15 years (our first web server started in 1993)
without CSS, but I now decided to learn and experiment with it.
My personal preference has always been that the width of items in my
pages are USUALLY not set in fixed values, but as percentages (e.g. for
frames in frameset, or tables w.r.t the display area), since a priori I
cannot know what screen or window size users will use, and the browser
window can be arbitrarily resized in the horizontal direction, ideally
with no horizontal scrollbar unless really needed. Similarly I do not
use absolute font names or sizes (otherwise said I care for content and
logical layout but not for a precise look being the same everywhere).
Some of my colleagues however have written pages which define pages with
fixed fonts, or a fixed width. Unfortunately if the window is not wide
enough, one has to scroll horizontally.
I hoped one could cure that, and apparently one can do something on a
simple (single column) document with something like :
body {width: 20cm; max-width: 80%;}
(on a larger window the document has a fixed size and the part at the
right is unused, as now; if one resizes the window smaller, however the
document is always contained in the window, and no horizontal scroll bar
is required)
I then tried to develop a frameless frame-like appearance.
body {width: 100%; }
#myhead {position: fixed ; top: 0 ; left: 0; right:0; bottom: auto;
width: 100%; height: 4.5em; background: white; z-index: 1}
#main {position: absolute: top: 4.5em ; left: auto; right: auto;
bottom: auto; height: auto; width: 76%; margin: 2%; z-index: 0}
#sub {position: fixed ; top: 4.5em ; right: 0; bottom: 0 ; left: auto;
width: 18%; background: aqua; margin: 0 1%; zindex: 1}
Using appropriate DIVs there is a title area on the top, occupying the
entire width (myhead), a navigation area on the right (sub), and the
document goes in the main area (with vertical scroll bars scrolling it
only). I can resize the window horizontally and everything remains
visible.
<div id=myhead>space for a fixed page title</div>
<div id=main ... the bulk of the page </div>
<div id=sub ... the navigation area </div>
+---------------------------------+
| myhead |
+---------------------------------+
| | *|
| main | sub *|
| | *|
+---------------------------------+
So far so good (except that the "sub" area is not aligned flush right,
but has some 10 pixels to its right. Why ?). That''s how *I* like it.
Now what if I want to combine the two things ? I.e. do as my colleagues
like. I.e. use body {width: 20cm; max-width: 80%;} and the myhead, main
and sub classes ?
I''d expect to produce an overall area which is normally 20 cm wide with
unused space on the right, or 80% of the window if resized smaller, and
that this overall area is divided into three parts as in the drawing
above (is not "body" the container of everything ?)
Instead it looks like ONLY the "main" area is rescaled to the smaller
width, and the other two still make reference to the window width.
What am I doing wrong ?
--
----------------------------------------------------------------------
no****@mi.iasf.cnr.it is a newsreading account used by more persons to
avoid unwanted spam. Any mail returning to this address will be rejected.
Users can disclose their e-mail address in the article if they wish so.
On 2008-10-14, LC''s No-Spam Newsreading account <no****@mi.iasf.cnr.itwrote:
[...]I then tried to develop a frameless frame-like appearance.
body {width: 100%; }
#myhead {position: fixed ; top: 0 ; left: 0; right:0; bottom: auto;
width: 100%; height: 4.5em; background: white; z-index: 1}
#main {position: absolute: top: 4.5em ; left: auto; right: auto;
bottom: auto; height: auto; width: 76%; margin: 2%; z-index: 0}
#sub {position: fixed ; top: 4.5em ; right: 0; bottom: 0 ; left: auto;
width: 18%; background: aqua; margin: 0 1%; zindex: 1}
Using appropriate DIVs there is a title area on the top, occupying the
entire width (myhead), a navigation area on the right (sub), and the
document goes in the main area (with vertical scroll bars scrolling it
only). I can resize the window horizontally and everything remains
visible.
<div id=myhead>space for a fixed page title</div>
<div id=main ... the bulk of the page </div>
<div id=sub ... the navigation area </div>
+---------------------------------+
| myhead |
+---------------------------------+
| | *|
| main | sub *|
| | *|
+---------------------------------+
So far so good (except that the "sub" area is not aligned flush right,
but has some 10 pixels to its right. Why ?). That''s how *I* like it.
Now what if I want to combine the two things ? I.e. do as my colleagues
like. I.e. use body {width: 20cm; max-width: 80%;} and the myhead, main
and sub classes ?
I''d expect to produce an overall area which is normally 20 cm wide with
unused space on the right, or 80% of the window if resized smaller, and
that this overall area is divided into three parts as in the drawing
above (is not "body" the container of everything ?)
Instead it looks like ONLY the "main" area is rescaled to the smaller
width, and the other two still make reference to the window width.
What am I doing wrong ?Percentages are relative to the "containing block".
The containing block for absolutely positioned things is the nearest
ancestor with a position of anything except static (the initial value),
and if there isn''t one the viewport.
Right now it''s the viewport.
So if you make body position: relative, it becomes the containing block
for main.
But the containing block for fixed position things is _always_ the
viewport, and you can''t change that.
So don''t use position: fixed for myhead and sub. Instead use position:
absolute for everything but make #main overflow: auto so you can scroll
things around inside it.
You can get pretty much the same effect that way.
On Tue, 14 Oct 2008, Ben C wrote:
On 2008-10-14, LC wrote:
>body {width: 100%; }
#myhead {position: fixed ; top: 0 ; left: 0; right:0; bottom: auto;
width: 100%; height: 4.5em; background: white; z-index: 1}
#main {position: absolute: top: 4.5em ; left: auto; right: auto;
bottom: auto; height: auto; width: 76%; margin: 2%; z-index: 0}
#sub {position: fixed ; top: 4.5em ; right: 0; bottom: 0 ; left: auto;
width: 18%; background: aqua; margin: 0 1%; zindex: 1}
(actually I use also a spacer so that the top lines of main are not
hidden under myhead).
So don''t use position: fixed for myhead and sub. Instead use position:
absolute for everything but make #main overflow: auto so you can scroll
things around inside it.Did you mean perhaps instead "use position: FIXED for everything but
make #main overflow: auto" ? If I do that way, with or without body
{position: relative;}, then IT WORKS as intended !!
If I do as you say all "aboslute", this causes everything (myhead main
and sub) to be scrolled in a solidal way. What I want instead is that
the header and the navigation bar remain always on the screen and only
main scrolls.
NB I obtain the same result both with and without
body {position: relative}
The only difference is that with body {position: relative} an about
10pix border appears on top of the header (why ? and why do I always
have a similar border at the right of sub ?)
OK, I understand that. I confused "margin" (which is outside the box)
and "padding" (which is inside it). With padding I can get rid of the
border on the right of sub ... still there is a thinner border if I use
body {position: relative} which goes away if I do
body {position: relative; margin:0 }
Where did it inherit a non-zero margin I did not set ?
Anyhow, I still stand with my original question
>Now what if I want to combine the two things ? I.e. do as my colleagues
like. I.e. use body {width: 20cm; max-width: 80%;} and the myhead, main
and sub classes ?
I''d expect to produce an overall area which is normally 20 cm wide with
unused space on the right, or 80% of the window if resized smaller, and
that this overall area is divided into three parts as in the drawing
If I apply the above, surprisingly enough, myhead and sub are positioned
using the entire viewport, and only the content of main gets a narrower
width
--
----------------------------------------------------------------------
no****@mi.iasf.cnr.it is a newsreading account used by more persons to
avoid unwanted spam. Any mail returning to this address will be rejected.
Users can disclose their e-mail address in the article if they wish so.
On 2008-10-15, LC''s No-Spam Newsreading account <no****@mi.iasf.cnr.itwrote:On Tue, 14 Oct 2008, Ben C wrote:
>On 2008-10-14, LC wrote:
>>body {width: 100%; }
#myhead {position: fixed ; top: 0 ; left: 0; right:0; bottom: auto;
width: 100%; height: 4.5em; background: white; z-index: 1}
#main {position: absolute: top: 4.5em ; left: auto; right: auto;
bottom: auto; height: auto; width: 76%; margin: 2%; z-index: 0}
#sub {position: fixed ; top: 4.5em ; right: 0; bottom: 0 ; left: auto;
width: 18%; background: aqua; margin: 0 1%; zindex: 1}
(actually I use also a spacer so that the top lines of main are not
hidden under myhead).
>So don''t use position: fixed for myhead and sub. Instead use position:
absolute for everything but make #main overflow: auto so you can scroll
things around inside it.
Did you mean perhaps instead "use position: FIXED for everything but
make #main overflow: auto" ? If I do that way, with or without body
{position: relative;}, then IT WORKS as intended !!No I did mean position: absolute.
If I do as you say all "aboslute", this causes everything (myhead main
and sub) to be scrolled in a solidal way. What I want instead is that
the header and the navigation bar remain always on the screen and only
main scrolls.To make it work with position: absolute you make sure all three divs fit
on the screen and none of them overflow it.
Then you make #main overflow: auto or overflow: scroll and put all the
contents in there. Then #main behaves a bit like a frame.
dorayme has an example somewhere because this came up quite recently.
NB I obtain the same result both with and without
body {position: relative}
The only difference is that with body {position: relative} an about
10pix border appears on top of the header (why ? and why do I always
have a similar border at the right of sub ?)On sub because you gave it a right margin of 1%.
Body has a margin from the default stylesheet of about 8px. Once you
make it position: relative it becomes the container for #main, so you
will see #main move down and right by about 8px. Without position:
relative on body, #main''s container is the viewport.
#myhead should not be affected by position: relative on body since it is
position: fixed and therefore its container is always the viewport.
OK, I understand that. I confused "margin" (which is outside the box)
and "padding" (which is inside it). With padding I can get rid of the
border on the right of sub ... still there is a thinner border if I use
body {position: relative} which goes away if I do
body {position: relative; margin:0 }I think you must be talking about making #myhead etc. all position:
absolute now. Yes if they''re position absolute, they''re positioned
relative to body''s padding box if body is not position: static.
So they all move towards the centre of the page by 8px: body''s margins.
If you don''t like it, set body { margin: 0; padding: 0 }.
Where did it inherit a non-zero margin I did not set ?Body got it from the UA default stylesheet.
Anyhow, I still stand with my original questionAnd I stand by my original answer :)
I''ll see if I can find that example dorayme made.
Here it is: http://dorayme.890m.com/alt/pseudoFrames.html
And here is the thread:
http://groups.google.co.uk/group/com...c77fccda0f7101
这篇关于CSS2：一切的容器是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
