CSS問題 - 我的DIV保持摺疊！

Question

在我的網站 - www.mobiuspc.com的主頁上，我有一些不同的部分，我用顏色編碼，這樣我就可以看到它的全部佈局。有主頁面部分，它工作得很好（它的棕褐色欄像「組件」等按鈕），並在該級別和一切工作盡我所能的最好。

下面我有一些問題。有3個主要DIV的，我用它來打破頁：

<div id="mainarea" runat="server" > 

這是什麼，在頭/母版頁區域之間，和黃顏色編碼區。這個大面積應該是700px高，1024px寬，並且是有色的銀色。如果你去的網站，你會發現它不是。有一個重複硬盤驅動器映像的面板，這是我的Drop'n drop功能拖放區（與此問題無關）。我將它設置爲runat服務器，因爲如果我不這樣做，那麼Drag'n Drop似乎會中斷。

<div id="categorybar"> 

這是保存我所有按鈕的黃色區域。我很高興。點擊名爲「顯示器」的按鈕並觀察它上面的DIV會發生什麼。它走出界限！我的CSS設置其寬度和高度似乎被推翻。

<div id="detailbox"> 

這是藍色的顏色區域，這裏沒有問題。最終，我會把控制權放在這裏，但現在它很好地變成藍色。

最初的想法可能是我的CSS是borked。如果是這樣的話，我看不到哪裏！我已經設置了高度/寬度和所有好東西。我嘗試添加浮動：左側隨機部分，沒有任何效果。這裏是我的CSS文件」

#mainarea 
{ 
background-color:Silver; 
height:700px; 
width:1024px; 
} 

#categorybar 
{ 
background-color:Yellow; 
height:80px; 
width:1024px; 
} 

#detailbox 
{ 
background-color:Blue; 
height:420px; 
width:1024px; 
} 

我在運行時創建的對象，當你點擊‘顯示’按鈕，所有這些對象被添加到駐留在#mainarea DIV窗格相關摘錄。這窗格被稱爲工具箱，這裏是它的CSS屬性：

#toolboxpanel 
{ 
height:700px; 
width:324px; 
max-height:700px; 
max-width:324px; 
overflow:scroll; 
} 

出於某種原因，它不斷擴大，超出其預定尺寸時，我在運行時添加控件，而不是僅僅有一個滾動條像我寧願用面板所有的硬盤圖片作爲拖放區，也在#mainarea DIV中，這裏是相關的CSS：

#droppanel 
{ 
height:700px; 
width:700px; 
margin-top:-700px; 
margin-left:324px; 
} 

我應該擺脫runat =服務器位？如果我這樣做，然後單擊顯示按鈕，我仍然會將可怕的面板一直擴展到頁面的底部，但至少銀色的#mainarea DIV保持適當的大小（面板剛剛失控）。如果我走這條路線，有什麼想法爲什麼會打破我的拖拽？我希望我不必走這條路線，而只是在我的CSS中有一些愚蠢的東西，我忽略了...

感謝您的幫助！ Bill

Answer 1

runat =「server」將更改您使用它的控件的客戶端ID，這意味着您的#mainarea css將不適用。

你可以通過分配mainarea一個css類並使用它來應用樣式而不是它的id來解決這個問題。