Sabit konumlu (kaydırma yok) Flex Düzeni

Question

Ana içerik alanını ortada tutan sol ve sağ kanvas kenar çubuklarıyla bir düzenim var.

Kenar çubukları ve ana içerik, sağdan sola doğru esnek bir düzende yerleştirilmiş esnek öğelerdir.

Kenar çubukları, menüler ve meta bağlantılar içerir.

Soruma şu soru geliyor: içerik alanını kaydırırken, kenar çubuklarını sabit konumda bırakarak üst konumda kalmaları ve aşağı kaydırmamaları mümkün mü?

JS Fiddle: http://jsfiddle.net/Windwalker/gfozfpa6/2/

HTML:

<div class="flexcontainer"> 
    <div class="flexitem" id="canvas-left"> 
     <p>This content should not scroll</p> 
    </div> 
    <div class="flexitem" id="content"> 
     <div> 
      <p>Scrolling Content</p> 
     </div> 
    </div> 
    <div class="flexitem" id="canvas-right"> 
     <p>This content should not scroll</p> 
    </div> 
</div> 

CSS i esnek ile bunu nasıl bilmiyorum, ama burada bir easyer/alternatif css tüm kaldırmak olduğunu

.flexcontainer { 
    display: flex; 
    flex-direction: row; 
    min-height: 100%; 
    align-items: stretch; 
} 
.flexitem { 
    display: flex; 
} 
#canvas-left { 
    background: yellow; 
    order: -1; 
    flex: 0 0 57px; 
} 
#content { 
    background: green; 
    order: 1; 
    padding: 1rem; 
} 
#content div { 
    display: block; 
} 
#canvas-right{ 
    background: blue; 
    order: 2; 
    flex: 0 0 57px; 
} 

Answer 1

Lütfen benzer soruya verilen çözümle bakın: How to simulate 'position:fixed' behavior on Flexbox-aligned sidebar. ": Sabit konumda":

<div class="flexitem" id="canvas-left"> 
    <div class="fixed"> 
     <p>This content should not scroll</p> 
    </div> 
</div> 

Ve CSS düzgün stil ekleyin: sarmalayıcı

Kodunuzdaki göre ayrıca içinizdeki içeriği sarabilirsiniz İşte

.fixed { 
    position: fixed; 
    width: 57px; /* according to #canvas-left */ 
} 

örneğidir senin Sabit sol kenar çubuğuna sahip kod: http://jsfiddle.net/8hm3849m/. Bu hilenin size kenar çubukları için uygun esnek bir kılavuz sunmayacağını, sarıcının genişliğinin sabitleneceğini (veya JavaScript ile dinamik olarak ayarlanacağını) unutmayın.

Answer 2

o flex ... ve bir dış div, iç öğelerde kolaylaştırıcı için dolgu eklememeye çalışın, o zaman çok sayıda div var

olup olmadığını hesaplamak gerekmez

.flexcontainer { 
    display: block; 
    min-height: 100%; 
    align-items: stretch; 
} 
.flexitem { 
    display: flex; 
} 
#canvas-left { 
    background: yellow; 
    order: -1; 
    left: 0px; 
    width: 20%; 
    position: fixed; 
} 
#content { 
    position: absolute; 
    background: green; 
    order: 1; 
    width: 60%; 
    left: 20%; 
} 
#content p { 
    display: block; 
    padding: 1rem; 
} 
#canvas-right{ 
    background: blue; 
    order: 2; 
    right: 0px; 
    width: 20%; 
    position: fixed; 
}