CSS 问题 - 我的 DIV 保持折叠状态！

Question

在我的网站主页 - www.mobiuspc.com 上，我有一些不同的部分，我用颜色进行了编码，这样我就可以看到它们是如何布局的。有一个母版页部分，它工作得很好（它是带有“组件”等按钮的棕褐色栏），并且在该级别及更高级别上，一切都按我希望的那样工作。

下面我有一些问题。我使用 3 个主要 DIV 来分解页面：

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

这是页眉/母版页区域和黄色编码区域之间的任何内容。这个大区域应该是 700px 高，1024px 宽，并且是银色的。如果您访问该站点，您会发现它不是。有一个带有重复硬盘驱动器图像的面板，这是我拖放功能的拖放区（与此问题无关）。我将它设置为运行服务器，因为如果我不这样做，那么 Drag 'n Drop 似乎会中断。

<div id="categorybar">

这是包含我所有按钮的黄色编码区域。我很高兴。点击名为“显示”的按钮，观察上面的 DIV 发生了什么。它超出了界限！我的 CSS 设置它的宽度和高度似乎被否决了。

<div id="detailbox">

这是蓝色区域，这里没有问题。最终我会把控件放在这里，但现在它是蓝色的。

最初的想法可能是我的 CSS 很糟糕。如果是这样的话，我看不到哪里！我已经设置了高度/宽度和所有好东西。我尝试将 float:left 添加到随机部分，但没有效果。这是我的 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=server 位吗？如果我这样做并单击显示按钮，我仍然会得到那个可怕的面板一直扩展到页面底部，但至少银色#mainarea DIV 保持适当的大小（面板刚刚失控）。如果我走那条路，知道为什么它会破坏我的拖放操作吗？我希望我不必走那条路，相反，我忽略了我的 CSS 中有一些愚蠢的东西......

感谢您的帮助！ 比尔

Answer 1

runat="server" 将更改您正在使用它的控件的客户端 ID，这意味着您的 #mainarea css 将不适用。

您可以通过为 mainarea 分配一个 css 类并使用它来应用样式而不是其 id 来解决此问题。