Question

我为我的网页创建了这个.css文件：

#content-box, #header-box, #menu-box, #footer-box
{
    background-color:#084B8A;
    color:#FFFFFF;
}

#content-box
{
    display:block;
    width:auto;
    min-height:205px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin:1px;
    padding:5px;
}

#menu-box
{
    position:fixed;
    display:block;
    width:auto;
    height:205px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin:1px;
    padding:5px;
}

#footer-box
{
    display:block;
    width:auto;
    height:20px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin:0px;
    padding:0.5px 5px;
    text-align:right;
}

#header-box
{
    display:block;
    width:auto;
    height:20px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin:0px;
    padding:0.5px 5px;
    text-align:left;
}

当我向下/向上滚动页面但我没有工作时，我想＃menu-box移动。这是页面的安排：

#header-box
---------------------------------------
         |#
         |c
#menu-box|o
         |n
         |t
         |e
         |n
         |t
         |-
         |b
         |o
         |x
---------------------------------------
                            #footer-box

在每个div（＃header-box，＃menu-box，＃content_box，＃footer-box）中我添加信息（在＃menu-box中我添加了一个css垂直下拉菜单）。

编辑：这是我的HTML代码，我认为问题在于表格标签：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ro">
<head>
<title>...</title>
</head>
<body>
<table border="1" width="100%"><tr><td><div id='header-box'>Bine ai venit
</div></td></tr></table>
<table border="1" width="100%">
<tr><td style="width:200px; height:205px;"><div id='menu-box'><?php include("nav.php"); ?></div></td>
<td><div id='content-box'>
<?php // content ?>
</div></td></tr></table>
<table border="0" width="100%"><tr><td><div id='footer-box'>Creat de ...</div></td></tr></table>
</body>
</html>

（正常边框设置为0但是现在，因为我设置为1我看不到我的＃menu-box）

@Andrew：我知道我需要一个长页面，而且我在＃content-box中列出了一个表格。

Answer 1

我在这里创建了一个代码的jsfiddle：http://jsfiddle.net/cXmhS/

似乎有效。您需要有更多的内容才能使用滚动条移动菜单。

为了让它更好用，我改变了你的min-height:1005px;

Answer 2

即使我看到类似的答案，我也尝试创建自己的例子。对我而言，如果你为#menu-box设置宽度是好的，因为没有办法向左浮动。如果菜单框具有自动宽度，即使定义边距也无济于事。

我的解决方案是这样的：http://jsfiddle.net/6sg3v/

为width:定义#menu-box，为margin-left:定义适当的#content-box

CSS位置：固定不起作用

2 个答案: