html - Divの位置を修正

Question

長いですが、説明部分だけです。ASP.NET で作業していて、思いどおりのページが表示されました。しかし、なぜか同じコードが fiddle にありません。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)。searchpanel と gridpanel は、写真に表示されている高さである必要があり、コンテンツが少なくなるように圧縮しないでください。

(3)。編集パネルは a/g をそのコンテンツに展開する必要があり、ContentDiv も展開する必要があります。

私が試したこと：

logodiv と menudiv の両方を内部に配置します

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

それらは修正されたままですが、内部の 2 つの div の指定された高さが上書きされました。つまり、logodiv と menudiv の両方が同じ高さになりました。

(3) contentdiv と editpanel の高さを削除して追加することで達成

overflow:hidden 

両方のための。ただし、ページの 3 つのパネルのいずれにもテキストがない場合は、すべてが圧縮されます。