CSS 2列（1个nav + 1个内容）100％高度& 100％宽度 [英] CSS 2 columns (1 nav + 1 content) 100% height & 100% width
问题描述
您好，
我的CSS代码有问题。
我想要一个固定宽度和100％高度的菜单栏和
内容页面的其余部分。
----------------
|。|。|< ; - 100％ - > |
| .M。| ---------- |
| .E。| --- ------- |
| .N。| ---------- |
| .U。| ----- ----- |
| .1。| ---------- |
| .0。| ------- --- |
| .0。| ---------- |
|。％。| --------- - |
|。|。| ---------- |
我的问题是当我调整窗口大小时我有一个白色在页面底部和内容框下方显示
的块。
我的代码是
HTML
< body>
< div id =" conteneur">
< div id =" menu">
< a href ="">< img src =" /images/menu1.gif" ALT =" MENU1" />< / a>
< a href ="">< img src =" /images/menu2.gif" ALT =" MENU1" />< / a>
< a href ="">< img src =" /images/menu3.gif" ALT =" MENU1" />< / a>
< a href ="">< img src =" /images/menu4.gif" ALT =" MENU1" />< / a>
< br />
< br />
blabla< / a>
< br />
< / div>
< div id =" contenu">
bla ... balb ... bla ... bla ... bla.bla ... balb ... bla ... bl abla ... balb ... bla ... bla ... bla.bla ... balb ... bla ... b la
< / div>
< / div>
< / body>
CSS
代码：
/ * CSS文件* /
html，正文{
背景：#ffffff;
身高：100％;
保证金：0;
填充：0;
/ *溢出：隐藏; * /
}
#conteneur {
身高：100％;
宽度：100％;
}
#menu {
背景： ＃E8CE34;
浮动：左;
身高：100％;
保证金：0;
填充： 0;
宽度：120px;
显示：内联;
}
/ *隐藏来自mac \ * /
* html #menu {margin-right：-3px;}
* html #contenu {margin-left：0;}
/ * end hide * /
#contenu {
background ：＃2A4F8F;
身高：100％;
保证金：0;
填充：0;
保证金-left：0;
}
Hello,
I have a problem with CSS code.
I want to have one menu column with a fixed width and a 100% height and
the rest of the page for content.
----------------
|.|.|<--100%-->|
|.M.|----------|
|.E.|----------|
|.N.|----------|
|.U.|----------|
|.1.|----------|
|.0.|----------|
|.0.|----------|
|.%.|----------|
|.|.|----------|
My problem is when i resize the window i have a white block that appear
at the bottom of the page and also under the content box.
My code is
HTML
<body>
<div id="conteneur">
<div id="menu">
<a href=""><img src="/images/menu1.gif" alt="menu1" /></a>
<a href=""><img src="/images/menu2.gif" alt="menu1" /></a>
<a href=""><img src="/images/menu3.gif" alt="menu1" /></a>
<a href=""><img src="/images/menu4.gif" alt="menu1" /></a>
<br />
<br />
blabla</a>
<br />
</div>
<div id="contenu">
bla...balb...bla...bla...bla.bla...balb...bla...bl abla...balb...bla...bla...bla.bla...balb...bla...b la
</div>
</div>
</body>
CSS
Code:
/* CSS Document */
html,body{
background:#ffffff;
height:100%;
margin:0;
padding: 0;
/*overflow: hidden;*/
}
#conteneur{
height:100%;
width:100%;
}
#menu{
background:#E8CE34;
float:left;
height:100%;
margin:0;
padding:0;
width:120px;
display: inline;
}
/* hide from mac \*/
* html #menu {margin-right: -3px;}
* html #contenu {margin-left: 0;}
/* end hide */
#contenu{
background:#2A4F8F;
height:100%;
margin:0;
padding:0;
margin-left: 0;
}
推荐答案
" Not4u" ...
....
"Not4u" ...
....
我的问题是当我调整窗口大小时，我在页面底部出现了一个白色的块，也是在内容框下。
My problem is when i resize the window i have a white block that appear
at the bottom of the page and also under the content box.
当我调整窗口大小时，我看不到你提到的问题，但是，
因为我的浏览器指向了一个
的实际URL，这可能解释了渲染的差异。 ;-)
-
Andrew Thompson
* http://www.PhySci.org/ 开源软件套件
* http://www.PhySci.org/codes/ Web& IT帮助
* http://www.1point1C.org/科学&技术
When I resize the window, I don''t see
the problems you refer to, but then,
since my browser is pointing at an
actual URL, that might explain
the difference in rendering. ;-)
--
Andrew Thompson
* http://www.PhySci.org/ Open-source software suite
* http://www.PhySci.org/codes/ Web & IT Help
* http://www.1point1C.org/ Science & Technology
Not4u写道：
Not4u wrote:
你好，
我的CSS代码有问题。
我想拥有一个固定宽度和100％高度的菜单栏，以及页面其余部分的内容。
----------------
|。|。|< - 100％ - > |
| .M。| ---------- |
| .E。| --- ------- |
| .N。| ---------- |
| .U。| ---------- |
| .1。| ---------- |
| .0。| ---------- |
| .0。| --- ------- |
|。％。| ---------- |
|。|。| ---------- |
Hello,
I have a problem with CSS code.
I want to have one menu column with a fixed width and a 100% height and
the rest of the page for content.
----------------
|.|.|<--100%-->|
|.M.|----------|
|.E.|----------|
|.N.|----------|
|.U.|----------|
|.1.|----------|
|.0.|----------|
|.0.|----------|
|.%.|----------|
|.|.|----------|
我最喜欢你使用的东西，比如：
body {
背景颜色; / *菜单的背景颜色* /}
div #content {
display：block;
身高：100％ ;
填充：2em 3em 2em 2em; / *或您需要的任何套房* /
边框：0;
保证金：150px / *菜单区域宽度* /
背景：颜色; / *您的内容的背景颜色* /}
div＃menu {
display：block;
宽度：130px; / widht of menu * /
position：absolute;
top：2em;
left：7px; }
现在可以在视口中创建列。基本上就是这样。它可能是你需要一个更好的身体> div＃content {height：auto;用于
基于Gecko的浏览器，以防止出现轻松的行为。还可以使用
Quirks与标准符合性模式。看看是什么给你了
最好的结果。
一定要保留所有实际内容包含
div＃内容。设置菜单样式（首选列表，对吗？）并将其放入包含div＃menu的
内。
已完成。
参见
< http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_twee-kolommen-layout.html>
或
< http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_centreren-content.html>
的三列布局几乎完成了同样的方式。
-
芭芭拉
http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b .de.zoete / html / webontwerp.html
I like the methode most where you use what you have, like:
body {
background:color; /*background color for your menu*/ }
div#content {
display:block;
height:100%;
padding:2em 3em 2em 2em; /*or whatever suites your needs*/
border:0;
margin:150px /*width of the area for your menu*/
background:color; /*background color for your content*/ }
div#menu {
display:block;
width:130px; /widht of the menu*/
position:absolute;
top:2em;
left:7px; }
The columns are now created in the viewport. Basically that''s it. It
might be you need a furter body>div#content { height:auto; } for the
Gecko based browsers to prevent from funy behaviour. Also play with
Quirks versus Standards Compliance Mode a bit. See what give you the
best results.
Be sure to keep all of the actual content inside the containing
div#content. Style your menu (prefer lists, right?) and put it inside de
containing div#menu.
Finished.
See example at
<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_twee-kolommen-layout.html>
or
<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_centreren-content.html>
for a three column layout done in pretty much the same way.
--
Barbara
http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html
Barbara de Zoete写道：
Barbara de Zoete wrote:
Not4u写道：
Not4u wrote:
你好，
我的CSS代码有问题。
我想拥有一个固定宽度和100％高度的菜单栏，以及内容的其余部分。
----------------
|。|。|< - 100％ - > |
| .M。| ---------- |
| .E。| --- ------- |
| .N。| ---------- |
| .U。| ---------- |
| .1。| ---------- |
| .0。| ---------- |
| .0。| --- ------- |
|。％。| ---------- |
|。|。| ---------- |
Hello,
I have a problem with CSS code.
I want to have one menu column with a fixed width and a 100% height
and the rest of the page for content.
----------------
|.|.|<--100%-->|
|.M.|----------|
|.E.|----------|
|.N.|----------|
|.U.|----------|
|.1.|----------|
|.0.|----------|
|.0.|----------|
|.%.|----------|
|.|.|----------|
我最喜欢你使用的东西，比如：
body {
background：color; / *菜单的背景颜色* /}
div #content {
显示：块;
高度：100％;
填充：2em 3em 2em 2em; / *或您需要的任何套房* /
边框：0;
边距：150px / *您的菜单区域宽度* /
背景：颜色; / *背景颜色为您的内容* /}
div＃menu {
显示：块;
宽度：130px; / widht菜单* /
位置：绝对;
顶部：2em;
左：7px;现在，在视口中创建了列。基本上就是这样。它可能是你需要一个更好的身体> div #content {height：auto;基于Gecko的浏览器可以防止出现轻松的行为。还可以使用
Quirks vs. Standards Compliance Mode。看看是什么给你带来了最好的结果。
请务必将所有实际内容保存在包含
div＃内容中。设置菜单样式（首选列表，对吗？）并将其放入包含div＃菜单的内容中。
完成。
请参阅
< http：/ /home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_twee-kolommen-layout.html>
或
< http://home.wanadoo.nl/b.de.zoete/ voorbeelden / voorbeeld_centreren-content.html>
三列布局以完全相同的方式完成。
I like the methode most where you use what you have, like:
body {
background:color; /*background color for your menu*/ }
div#content {
display:block;
height:100%;
padding:2em 3em 2em 2em; /*or whatever suites your needs*/
border:0;
margin:150px /*width of the area for your menu*/
background:color; /*background color for your content*/ }
div#menu {
display:block;
width:130px; /widht of the menu*/
position:absolute;
top:2em;
left:7px; }
The columns are now created in the viewport. Basically that''s it. It
might be you need a furter body>div#content { height:auto; } for the
Gecko based browsers to prevent from funy behaviour. Also play with
Quirks versus Standards Compliance Mode a bit. See what give you the
best results.
Be sure to keep all of the actual content inside the containing
div#content. Style your menu (prefer lists, right?) and put it inside de
containing div#menu.
Finished.
See example at
<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_twee-kolommen-layout.html>
or
<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_centreren-content.html>
for a three column layout done in pretty much the same way.
我添加一个长图像（h：300px w：20px）在菜单框中，显示我的概率。
它不起作用，当我调整窗口大小并在IE 6下向下滚动
i在内容框下面有正文背景颜色，内容框
并不占用100％的高度。在Mozilla我有另一个pb。
在IE中（向下滚动）
|。|。|< - 100％ - > |
| .M。| ---------- |
| .E。| ---------- |
| .N。| ---身体--- |
| --- | ---颜色 - |
在Mozilla中（向下滚动）
|。|。|< - 100％ - > |
| .M。| ------ ---- |
| .E。| ---------- |
| -----身体----- |
| ----- color ---- |
I add a long image (h:300px w:20px) in the menu box, to show my prob.
It doesn''t work, when i resize the windows and i scroll-down under IE 6
i have the body background color under the content box, the content box
doesn''t take 100% of the height. With Mozilla i have an other pb.
In IE (scroll down)
|.|.|<--100%-->|
|.M.|----------|
|.E.|----------|
|.N.|---Body---|
|---|---color--|
In Mozilla (scroll down)
|.|.|<--100%-->|
|.M.|----------|
|.E.|----------|
|-----Body-----|
|-----color----|
这篇关于CSS 2列（1个nav + 1个内容）100％高度& 100％宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
