CSS位置是：固定不工作

我創造了我的網頁此.css文件：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; 
}

我想＃菜單框移動，但是當我向下滾動/向上的頁面無法正常工作。這裏是頁的安排：我補充信息（＃菜單框我添加了一個CSS

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

在每格（＃頭盒，＃菜單中，#content_box，＃頁腳盒）垂直下拉菜單）。

編輯：這是我的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我看不到我的＃菜單框）

@Andrew：我知道我需要一個長頁面，並且我有一個在＃content-box列表中的表格。

來源

2013-04-12 AlexxanderX

A [測試用例]（http://cssdeck.com/labs）用HTML（和CSS ）代碼將有所幫助！ – Rishabh

需要html以及 –

我添加了html代碼 – AlexxanderX

我創建你的代碼在這裏的的jsfiddle：http://jsfiddle.net/cXmhS/

看來工作。您需要有更多的內容供菜單隨滾動條一起移動。

爲了使其更好地工作，我改變你的min-height:1005px;

來源

2013-04-12 11:00:02 Andrew

爲您的內容框添加一個空白邊緣以避免菜單重疊，並且它非常完美 – Bigood

即使我看到類似的答案，我試圖創建自己的例子。對我來說，如果你爲你設置寬度#menu-box是好的，因爲沒有辦法向左浮動。如果菜單框具有自動寬度，則即使定義邊距也無濟於事。

我的解決方案將是這樣的：http://jsfiddle.net/6sg3v/

與限定width:爲#menu-box和適當margin-left:爲#content-box

來源

2013-04-12 12:02:41 Aleks

所以您想說我的問題是使用表標籤？ – AlexxanderX

CSS位置是：固定不工作

回答

相關問題