javascript - CSS 问题 - 我的 DIV 一直处于折叠状态!

Question

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

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

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

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

<div id="categorybar">

这是包含我所有按钮的黄色编码区域。我很高兴。点击名为“Display”的按钮，观察其上方的 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 中的 Pane 中。该 Pane 称为工具箱，这是它的 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 来解决这个问题。