CSSレイアウト固定下、高さ可変

Question

これは私が苦労してきた問題である：だから

、私は「三つのセクション（「Arhiva」、「Naznake」と、この権利のバーを持っており、 Svičlanci "）。 1番目と2番目のものは静的な配置を持ち、データに基づいて可変の高さを持ちます。 2番目のものは最大の高さです。 3番目に問題があります。私はそれを右の棒の底部に、底部を「Naznake」（第2セクション）の底部に固定したいと考えています。これまでのところ、小さな箱は2つしかありませんでしたが、データベースに入るとすぐに、右のバーの上にオーバーフローします。 ここに問題があります： - 高さ：100％を使用すると、それは最初の2つの要素の高さの下にまだオーバーフローします。 - calc（height：100％ - some falue）を使用すると、この問題は解決しますが、最初のセクションまたは2番目のセクションの高さが変更されるとすぐに、再び動作を停止します。

これは、最も低いセクションの下端をパラレルdivの下端に、上端を先行するsibbling divの下端に固定する方法であり、それがより大きい場合でもそれをスクロールすることができます利用可能なエリア？ここで

は私の関連HTMLである：ここでは

<div id="articlebar"> 
    <h1><?php echo lang('ARCHIVE_TITLE');?></h1> 
    <section id="archiveSpace"><?php echo $godine->prepare_years($db); ?><div style="clear:both"></div></section> 
    <h1><?php echo lang('TAGS');?></h1> 
    <section id="tagSpace"><?php echo $tagovi->prepare_tags($db); ?><div style="clear:both"></section> 
    <h1><?php echo lang('ALL_ARTICLES');?></h1> 
    <section id="artList"><?php echo $others->prepare_others($db); ?><div style="clear:both"></section> 
</div> 

は私の関連するCSSです：ここでは

#articlebar { 
    position:absolute; 
    top:0; 
    bottom:0; 
    right:0; 
    width:200px; 
    background: #595959; 
    color:#f8f8f8; 
    overflow-y: hidden; 
} 
#archiveSpace, #tagSpace, #artList { 
    background:#d6d6d6; 
    margin:0 5px; 
    padding: 3px 2px; 
    max-height:150px; 
    overflow-y: auto; 
} 
#artList { 
    overflow-y:auto; 
    max-height: none; 
    clear:both; 
} 
#artList a:hover, #artList a:active { 
    background: #ffffff; 
} 
#archiveSpace a, #tagSpace a { 
    background: #f8f8f8; 
    color: #363636; 
    padding: 3px 10px; 
    margin: 3px; 
    font-size: 12pt; 
    height:18px; 
    float:left; 
    display:block; 
    text-decoration: none; 
} 
#archiveSpace a:hover, #archiveSpace a:active, #tagSpace a:hover, #tagSpace a:active { 
    background:#ffffff; 
    text-decoration: underline; 
} 

は充実refferenceのためのGitHubの私の完全なプロジェクトです： https://github.com/DavidSili/MySITE ここに引用したファイルがありますviews/blog.phpとcss/style.css

ありがとうございます。

Answer 1

CSS Flexboxを使用することをおすすめします。これにより、非常に汎用性の高いレイアウトが可能になり、新しいですが、widelyy supportedです。

上位2つのdivの場合はflex-shrink（計算された高さに "縮小"したいものすべて）を、最後の場合はflex-growのヘッダーを追加する必要がありますスペース）。

以下の例を参照してください。

/* flex-box specific properties */ 
 
#parent { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#child1, #child2 { 
 
    flex-shrink: 1; 
 
    flex-basis: auto; 
 
} 
 
#child3 { 
 
    flex-grow: 1; 
 
} 
 

 
/* other properties to make this snippet look good */ 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
html, body, #parent { 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#parent { 
 
    background-color: grey; 
 
} 
 
#parent > div { 
 
    background-color: lightgrey; 
 
    margin: 10px; 
 
} 
 
#child1, #child2 { 
 
    resize: vertical; 
 
    overflow: auto; 
 
}

<div id="parent"> 
 
    <div id="child1">Resize this</div> 
 
    <div id="child2">Resize this</div> 
 
    <div id="child3">This will take up rest of space</div> 
 
</div>