, css ile yükseklikteki divs ölçeğini oluşturuyor ancak tarayıcıda bootstrap yok

Question

Farklı içeriklere sahip 6 div öğem var.

3 div'ler ana konteyner (kaydırılabilir)

son 2 div'ler

altbilgi vardır edilir

1 div nasıl sadece saf css ile bu scallable tüm yapmak başlık vardır? Çünkü şimdi tarayıcımı yeniden boyutlandırdığımda altbilgilerim kayboluyor ve onlara ulaşamıyorum ve tarayıcımı daha da küçük hale getirdiğimde ana konteyner div'um yarıya iniyor (alt kısım kayboluyor) ve başlık divs yüksekliği daha küçük oluyor

En iyi senaryo, üstbilginin ve altbilgi aralıklarının bir şekilde sabit yüksekliği (nasıl yapılacağını bilmez) ve ana kapsayıcının yeniden boyutlandırılması için yeniden boyutlandırılmasıdır.

html

<div ng-controller="ListController"> 
    <div class="header"> 

    </div> 
    <div class="price_found"> 

    </div> 
    <div class="settings"> 

    </div> 
    <div class="main_container antiscroll-wrap"> 
     <div class="container antiscroll-inner"> 

     </div> 
    </div> 
    <div class="total_select"> 

    </div> 
    <div class="menu_footer"> 

    </div> 
</div> 

SCSS

.cheap-watcher { //this is main container properties in which everything is injected 
    position: fixed; 
    top: 0px; 
    right: 0px; 
    width: 360px; 
    height: 100%; 
    max-width: 360px; 
    max-height: 100%; 
    min-height: 100%; 
    background-color: #f1f3f4; 
    float: right; 

    .header { 
     height: 7.57%; 
     background-color: #00a8e8; 
    } 

    .price_found { 
     padding-top: 16px; 
     height: 10.169%; 
     background-color: #fff; 
     text-align: center; 
    } 

    .settings { 
     height: 4.971%; 
     width: 100%; 
     display: inline-block; 
    } 

    .main_container { 
     width: 360px; 
     background-color: #fff; 

     .container { 
      width: 360px; 
      height: 57.856%; 
     } 
    } 

    .total_select {   
     height: 7.57%; 
     width: 100%; 
     background-color: #fff; 
     text-align: center; 
     border-top: solid; 
     border-top-color: #e8e8e8; 
     border-top-width: 2px; 
    } 

    .menu_footer { 
     height: 11.864%; 
     width: 100%; 
    } 
} 

Answer 1

Sen kapları px veya vh örneğin bir min-height tümüne atayabilirsiniz. Min. Yükseklik, konteynerin her zaman minimum yüksekliğe sahip olacağı, ancak içeriğin daha fazla içeri gireceği gibi büyüyeceği anlamına gelir. Ana konteyneriniz için sabit bir yükseklik istersiniz, bu nedenle normal height kullanın ve daha fazla içerik varsa px veya vh ve overflow kullanın. yükseklik sağlar, ana konteyner kaydırılabilir hale gelir.

bu size biraz yardımcı olan bir çalışma Fiddle

Umut bakın.