0

レイアウトには次の配置があります: (MVC3 を使用 - html 全体は にありますLayout.cshtml)

  • トップ ヘッダー (バナーとメニュー バーを含む)
  • 内容 (左右のペインに分かれています)。
  • フッター

右側のペインのコンテンツにはタブが含まれており、高さは開いているタブによって異なります。

Contents div を高さに自動調整し、スクロールバーを作成しないようにしたい (ブラウザーのスクロールバーではない)。

これはある程度達成されていますが、残りのCSS.

CSS は次のとおりです。

html {
    width: 100%;
    height: 100%;    
}

body {
width: 100%;
/* height: 100%;    */
}

#Wrapper {
    border: 1px solid #6A89C1;
    height: 100%;
    margin: 0px auto;
    min-height: 750px;
    min-width: 700px;
    width: 100%;
    font-size: 0.75em;
}

header {
    background-color: #abcdef;
    height: 19%;  /* did not keep it 20% due to some Background repeat issues.. */
    margin: 0px;
    border-bottom: 2px outset #FFFFFF;
    width: 100%;    
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#Banner {   
    height: 72%;
    width: 100%;
    padding-top: 5px;
}

#Menu {
    height: 25%;
    width: 100%;    
}

#Contents {
    height: auto; /*65%;*/
    width: 100%;
    clear: both;    
}

#Contents #LeftPane {
    background-color: #E9F1FF;
    border-right: 1px solid #B9D4FF;
    height: 100%;
    min-height: 300px;
    width: 24.8%;  /* Should not be exactly 25% as it causes RightPane div to shift downwards  */    
}

#Contents #RightPane {
    background-color: #FFFFFF;
    height: 100%;
    width: 75%;    
    overflow: auto;
}

.Left {
    float: left;    
}

.Clear {
    clear: both;    
}

footer {
    background-color: #6A89C1;
    clear: both;
    height: 15%;
    width: 100%;
    margin: 0px;
    min-height: 50px;
}

#Wrapper, footer {
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;    
}

レイアウトのスクリーンショット

中央部分全体が自動的に成長する必要がありますが、レイアウト（プロポーション）は同じでなければなりません

与えられた調整後の画像も添付されていますCSS

調整後のレイアウト

(メニュー バーの Bg と左ペインとフッターの高さに注意してください)

質問を適切に説明したことを願っています:)

4

4 に答える 4

0

高さをすべて一緒に使用することは避けます。ブラウザはその内容に応じて要素の高さを調整します。

于 2013-01-03T10:19:20.077 に答える
0

開いたタブの高さをjavascript（またはjquery）で取得し、この高さをコンテンツコンテナに割り当てる必要があります。

于 2013-01-03T09:32:48.703 に答える
0

http://www.w3schools.com/cssref/pr_pos_overflow.asp

overflow: auto

スクロールバーが発生します。

これは JavaScript を使用して行うことができます (タブが変更された場合、タブの高さに応じて高さが変更されます)。他に方法があるかどうかはわかりません。

于 2013-01-03T09:45:55.957 に答える
0

すべての助けをありがとう.. !

すべてのコンテンツをラッパー div に配置するのではなく、互いに独立している可能性のある解決策を見つけました。

 The Header div is separate div (parent is the body not the wrapper)

 same for Contents and footer div..

よろしくお願いします。また、すべての提案に感謝します。A.Ali

于 2013-01-03T10:46:14.637 に答える