冗长的一个，但只有解释部分。我在 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%;
}
因此我也上传了图片。
如您所见，所有 3 个 div（带有红色边框）都放置在内容 div（白色边框）内。
我想要什么（但未能实现）：
(1)。logodiv 和 menudiv 应该用垂直滚动固定。
(2)。搜索面板和网格面板应与图片中显示的高度相同，并且不应压缩内容较少。
(3)。编辑面板应将 a/g 扩展到其内容，ContentDiv 也应如此。
我尝试了什么：
把 logodiv 和 menudiv 都放在里面
<div style="position:fixed;top:0"></div>.
尽管它使它们保持固定，但它覆盖了内部 2 个 div 的指定高度，这意味着 logodiv 和 menudiv 现在都具有相同的高度。
通过删除 contentdiv 和 editpanel 的高度并添加来实现 (3)
overflow:hidden
对彼此而言。但是如果页面在 3 个面板中的任何一个中都没有文本，则它们都会被压缩。