固定列のフレックスレイアウト

Question

私はこの構造を持っています...ワードプレスの管理領域に似ています...ポイントは私が必要です.mainすべてのスペースを幅と高さで取る.footそれを下げる内容は存在しないが、下に留まる。 .mainの中に列があり、これらの列も完全な高さにする必要があるので、flexを使用したいと思います。誰かが私に別の解決策を与えることができますが、HTMLは変更できません。

最終結果はこのようなものになるだろう

.wrap { 
 
    display: flex; 
 
} 
 

 
.sidebar { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: -100px; 
 
    background-color: #00a0d2; 
 
    width: 200px; 
 
} 
 

 
.main { 
 
    background-color: #66BB6A; 
 
    display: flex; 
 
} 
 

 
.foot { 
 
    margin-left: -200px; 
 
    background-color: #9999dd; 
 
    height: 60px; 
 
}

<div class="wrap"> 
 
    <div class="sidebar">Menu</div> 
 
    <div class="main">Content</div> 
 
    <div class="foot">Footer</div> 
 
</div>

、THX

Answer 1

あなたCOU ldはCSSグリッドを使用します。それは最小のコードで2次元グリッドのための部屋を可能にします。

.wrap { 
 
    display: grid; 
 
    /*Make 2 columns with the first having a min width of 200px*/ 
 
    grid-template-columns: minmax(200px, 1fr) 10fr; 
 
} 
 

 
.sidebar { 
 
    background-color: #00a0d2; 
 
    /*Make sidebar take up the space of the 2 rows*/ 
 
    grid-row: 1/3; 
 
} 
 

 
.main { 
 
    background-color: #66BB6A; 
 
    /*Let the main content take up the space of view height*/ 
 
    height: 100vh; 
 
} 
 

 
.foot { 
 
    /*set footer to span the last row leaving the space for the sidebar*/ 
 
    grid-column: 2/3; 
 
    background-color: #9999dd; 
 
    height: 60px; 
 
}

<div class="wrap"> 
 
    <div class="sidebar">Menu</div> 
 
    <div class="main">Content</div> 
 
    <div class="foot">Footer</div> 
 
</div>

Answer 2

固定位置のサイドバーは、フレキシボックスに影響されないので、あなたはそれのための部屋を作るためにあなたの余白を調整する必要があります。

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    min-height: 100%; 
 
} 
 

 
.wrap { 
 
    display: flex; 
 
    flex-direction: column; /* required to establish column layout */ 
 
    min-height: 100%; 
 
} 
 

 
.sidebar { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; /* full height - change if required */ 
 
    background-color: #00a0d2; 
 
    width: 200px; 
 
    opacity: .5/* for demo purposes */ 
 
    ; 
 
} 
 

 
.main { 
 
    background-color: #66BB6A; 
 
    display: flex; 
 
    flex: 1; /* take remaining height*/ 
 
    margin-left: 200px; /* width of sidebar */ 
 
} 
 

 
.foot { 
 
    margin-left: 200px; /* width of sidebar */ 
 
    background-color: #9999dd; 
 
    height: 60px; 
 
}

<div class="wrap"> 
 
    <div class="sidebar">Menu</div> 
 
    <div class="main">Content</div> 
 
    <div class="foot">Footer</div> 
 
</div>