Question

冗长的一个，但只有解释部分。我在ASP.NET中工作，页面就像我想要的那样出现。但不知何故，小提琴中的相同代码不是。http://jsfiddle.net/yucRt/

.logodiv
{
 width:100%;
 background-color:#495C6E;
 height:7%;
 color:white;
}    
.menu
{
 background-color:#335E89;
 height:5%;
}
.content
 {
 border:1px solid #C2C8BD;
 margin:0 0.6% 0.6% 0.6%;
 height:84%;
 border-radius:3px;
 border-top:none;
 padding-top:1%;
 padding-left:1%;
 padding-right:1.1%;
}
.panelsearch
{
 width:100%;
 border:1px solid red;
 height:6%;
}
 .panelgrid
{
 width:100%;
 border:1px solid red;
 height:57%;    
}
.paneledit
{
 width:100%;
 border:1px solid red;
 height:34%;
}

因此我也上传了图片。 enter image description here

如您所见，所有3个div（带红色边框）都放在内容div（白色边框）内。

我想要什么（但未能实现）：

（1）。 logodiv和menudiv应该用垂直滚动固定。

（2）。搜索面板＆amp; gridpanel应该是它们在pic中出现的高度，并且不应该用较小的内容进行压缩。

（3）。编辑面板应将a / g扩展为其内容，ContentDiv也应如此。

我做了什么：

将logodiv和menudiv放在

中

<div style="position:fixed;top:0"></div>.

虽然它保持固定，但它覆盖了内部2个div的指定高度，这意味着，logodiv＆amp; menudiv现在处于同样的高度。

通过删除contentdiv和editpanel的高度并添加

来实现（3）

overflow:hidden

两者兼而有之。但是如果页面在3个面板中的任何一个面板中都没有文本，那么它们都会压缩。

Answer 1

我改变了你的Html，对于CSS你可以看到Demo。

<body>
    <form id="form1" runat="server">
    <div class="logodiv">
    LOGO DIV
    </div>
    <div class="menu">
        MENU DIV
        </div>
        <div class="content">
             <div id="pnlSearch" class="panelsearch">
        <asp:Panel ID="pnlSearch" runat="server">
        Search Panel
    </asp:Panel>
    </div>
    <div id="pnlGrid" class="panelgrid">
        <asp:Panel ID="pnlGrid" runat="server">
        Grid Panel
    </asp:Panel>
    </div>
    <div id="pnlEdit" class="paneledit">
        <asp:Panel ID="pnlEdit" runat="server">
        Edit Panel
    </asp:Panel>
    </div>
        </div>
    </form>
</body>

修正Divs的位置

1 个答案: