CSS位置：固定不起作用

Question

I created this .css file for my page: 我为页面创建了此.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;
}

And I want to #menu-box to move when I scroll down/up the page but is not working. 我想在向下/向上滚动页面但不起作用时移动＃menu-box。 Here is the arrangement of page: 这是页面的安排：

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

In every div(#header-box, #menu-box, #content_box, #footer-box) I add information( in #menu-box I add a css vertical drop-down menu). 在每个div（＃header-box，＃menu-box，＃content_box，＃footer-box）中，我添加信息（在＃menu-box中，我添加CSS垂直下拉菜单）。

EDIT: Here is my HTML code, I think the problem is with the table tags: 编辑：这是我的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>

(normal the border are setted to 0 but now, because I setted to 1 I can't see my #menu-box) （通常将边框设置为0，但现在，因为我设置为1，所以看不到我的#menu框）

@Andrew: I know I need a long page, and I have a one where in the #content-box I listed tables. @Andrew：我知道我需要一个很长的页面，并且在＃content-box中我列出了一个表格。

Answer 1

I created a jsfiddle of your code here: http://jsfiddle.net/cXmhS/ 我在这里创建了您的代码的jsfiddle： http : //jsfiddle.net/cXmhS/

It seems to work. 它似乎有效。 You need to have a larger amount of content for the menu to move with the scroll bar. 您需要具有更多的内容，菜单才能随滚动条一起移动。

To make it work better i changed your min-height:1005px; 为了更好地工作，我更改了您的min-height:1005px;

Answer 2

Even though I see similar answer, I have tried to create my own example. 即使我看到类似的答案，我仍然尝试创建自己的示例。 And to me, it is good if you would set width for you #menu-box as there is no way to float left. 对我来说，最好为#menu-box设置宽度，因为没有办法向左浮动。 Even defining a margin wouldn't help, if the menu-box will have automatic width. 如果菜单框将具有自动宽度，则即使定义边距也无济于事。

My solution will be like this: http://jsfiddle.net/6sg3v/ 我的解决方案将是这样的： http : //jsfiddle.net/6sg3v/

With defining width: for #menu-box and appropriate margin-left: for #content-box 具有定义的width:用于#menu-box和适当的margin-left:用于#content-box

CSS位置：固定不起作用

问题描述

2 个解决方案

解决方案1
2 已采纳 2013-04-12 11:00:02

解决方案2
0 2013-04-12 12:02:41

CSS位置：固定不起作用

问题描述

2 个解决方案

解决方案1 2 已采纳 2013-04-12 11:00:02

解决方案2 0 2013-04-12 12:02:41

解决方案1
2 已采纳 2013-04-12 11:00:02

解决方案2
0 2013-04-12 12:02:41