web-dev-qa-db-ja.com

Flexboxで調整されたサイドバーで「位置：固定」動作をシミュレートする方法

すでに回答されているので（ どのように位置を設定できますか：固定; flexboxサイズ要素？ の動作）絶対/固定位置のボックスは通常の状態から外されますFlexboxで整列された要素のフローですが、少なくともposition: fixed動作、たとえば、width: 300px; height: 100vw要素？

左側にサイドバーがあり、右側にコンテンツブロックがある初期レイアウトのデモ（ http://codepen.io/anon/pen/ZGmmzR ）があります。 navはposition: fixed要素はユーザーのページをスクロールします。 Flexboxなしでそれを行う方法を知っています。そもそも、JavaScriptを使用しない純粋なCSSソリューションを検討します。ありがとうございました！

html5css3layoutweb-deploymentflexbox
15
user3576508

編集：

なんとなくハック感が少ないソリューションは、コンテナ（.wrapper）を画面と同じ高さにし、メインの<section>要素にのみスクロールを追加することです。

.wrapper {
    display: flex;
    height: 100vh;
}

section {
    flex: 1 1 auto;
    overflow: auto;
}

http://codepen.io/Sphinxxxx/pen/WjwbEO

元の答え：

ラッパーの<nav>内にすべてを配置し（ここではnav-wrapper）、そのラッパーを修正できます。

...
.nav-wrapper {
    position: fixed;
    top: 0; left: 0;
}

<nav role="navigation">
    <div class="nav-wrapper">
        ...
    </div>
</nav>

http://codepen.io/anon/pen/PqXYGM

33
Sphinxxx