HTML - 固定メニューをダイナミックコンテンツにする方法

固定ヘッダーとフッター（両方とも50px）とそれ以外の画面を取得するコンテンツを持つWebページを作成したかったのです。スクロールバーは表示されません。私はこれを働かせた。しかし、今私は内容のために左と右のメニューバーと、50pxの固定幅の両方を持たせたいと思います。そして、コンテンツはスクロールバーなしでそれの間のスペースを取得します。私がやらなければならなかった唯一の面白いことは、コンテンツのために1行に3つのdivしか持たず、代わりに2つのdivを作り、2つのdivに分割する必要があったということです。 3つの部門を使用するだけのソリューションがあれば、それは素晴らしいことです。私はそれが次のコードを使用して作業しました：HTML - 固定メニューをダイナミックコンテンツにする方法

<body> 
    <div id="main"> 
    <header> 
     HEADER 
    </header> 
    <div id="content"> 
     <div id="left-menu-bar"></div> 
     <div id="main-content"> 
     <div id="main-content-left"></div> 
     <div id="main-content-right"></div> 
     </div> 
    </div> 
    <footer> 
     FOOTER 
    </footer> 
    </div> 
</body>

をそしてここでCSSコード：

html, body { 
    height:100%; 
    margin: 0px; 
} 

#main { 
    position: relative; 
    height:100%; 
    padding: 0px; 
    margin: 0px; 
} 

header { 
    position:absolute; 
    top: 0px; 
    left: 0px; 
    height: 50px; 
    width: 100%; 
    background: #3c8dbc; 
    overflow: hidden; 
} 

#content { 
    position:absolute; 
    width: 100%; 
    border: 3px solid red; 
    top: 50px; 
    bottom: 50px; 
    overflow: auto; 
    box-sizing: border-box; 
} 

footer { 
    position:fixed; 
    bottom: 0px; 
    height: 50px; 
    width: 100%; 
    background: #d2d6de; 
    overflow: hidden; 
} 

#left-menu-bar { 
    box-sizing: border-box; 
    border: 3px solid green; 
    height: 100%; 
    width: 50px; 
    float:left; 
} 

#main-content { 
    box-sizing: border-box; 
    border: 3px solid blue; 
    height: 100%; 
    width: auto; 
    overflow: hidden; 
} 

#main-content-left { 
    box-sizing: border-box; 
    border: 3px solid pink; 
    height: 100%; 
    width: calc(100% - 455px); 
    display: inline-block; 
} 

#main-content-right { 
    box-sizing: border-box; 
    border: 3px solid yellow; 
    height: 100%; 
    width: 450px; 
    display: inline-block; 
}

ここで問題です。動的コンテンツのdivの「main-content-left」に何かが書かれていると、「main-content-left」divが縮小します。私は、「メイン・コンテンツ・左」に次のコードを挿入しようとした：

<div id="content-head"> 
    Box-Head 
</div>   
<div id="content-box"> 
    Box-Content 
</div>

EDIT：フォローアップの質問：

がフルを持っている「」内部のボックスを取得することが可能です'メインコンテンツ右' div 'の高さですが、周りに5pxの余白がありますか？高さ100％のdivを作成している場合は、下端は常にフッターの後ろにあります。

出典

2016-05-20 Jsonjoe

'top'、' left'、 'rght'、' bottom'は、絶対または相対位置なしで無機能している処理するためにdiplay:inline-blockとvertical-alignを使用する必要があります。 – ocanal

それらを削除しましたが、何も変わっていません – Jsonjoe

ocanalと同じように、右。もちろん、最初に何かをするために "絶対的な"または "相対的な"必要があるときにそれらを削除すると、何も変更されません。 – patricksweeney

あなたはそれが

#main-content-left { 
    box-sizing: border-box; 
    border: 3px solid pink; 
    height: 100%; 
    width: calc(100% - 455px); 
    display: inline-block; 
    vertical-align:top; 
} 

#main-content-right { 
    box-sizing: border-box; 
    border: 3px solid yellow; 
    height: 100%; 
    width: 450px; 
    display: inline-block; 
    vertical-align:top; 
}

https://jsfiddle.net/IA7medd/75uhgh7e/

出典

2016-05-20 19:40:34

作品。大変、ありがとう！ – Jsonjoe

HTML - 固定メニューをダイナミックコンテンツにする方法

答えて

関連する問題