内側div（垂直方向の進行バー）を外側divの下部に配置する方法は？

Question

私はIonic 2を使用しており、タンクレベルを示す垂直方向のプログレスバーコンポーネントを作成しようとしています。

これは私がこれまで持っているものです。

tank-bar { 
    .progress-outer { 
     height: 96%; 
     margin: 10px 2%; 
     padding: 3px; 
     text-align: center; 
     background-color: #f4f4f4; 
     border: 2px solid #dcdcdc; 
     color: dark; 
     border-radius: 20px; 
    } 

    .progress-inner { 
     min-height: 15; 
     white-space: nowrap; 
     overflow: hidden; 
     padding: 5px; 
     border-radius: 20px; 
     background-color: map-get($colors, secondary); 
    } 
} 

は残念ながら、それはまだかなりありませんし、ブラウザで次のようになります。

私は緑を表示したいと思います外側のdivの上部からではなく、底部からの部分（パーセントフル）。

私はまだCSSとSassでかなり恐ろしいですが、チュートリアルを通してより良くなるように努力しています。次のように

編集*

HTMLは次のとおりです。

<div class="progress-outer"> 
    <div class="progress-inner" [style.height]="Level + '%'"> 
     {{Level}}% 
    </div> 
</div> 

Answer 1

あなたは外容器の相対的な、そして絶対位置と同様に、その中で一番下に固定内側容器を作るためにあなたのCSSを変更した場合so：

.progress-outer { 
    height: 96%; 
    margin: 10px 2%; 
    padding: 3px; 
    text-align: center; 
    background-color: #f4f4f4; 
    border: 2px solid #dcdcdc; 
    color: dark; 
    border-radius: 20px; 
    position: relative; 
} 

.progress-inner { 
    min-height: 15; 
    white-space: nowrap; 
    overflow: hidden; 
    padding: 5px; 
    border-radius: 20px; 
    background-color: map-get($colors, secondary); 
    position: absolute; 
    bottom: 0; 
} 

これは動作するはずです。

注変更点は次のとおりです。

position: relative; 

.progress-inner

Answer 2

ポジショニングで.progress-outer

と

position: absolute; 
bottom: 0; 

にその相対的な親の絶対として子が指定できるようになりますどこにそれが付いている。これには、通常の文書フロー（通常はブロックの幅を測定する）から取り出されたときの幅を指定する必要があるなど、いくつかのキャッチがあります。

// Spacing between the edges of outer/inner, since 
// padding values will be ignored with position: absolute.  
$offest: 2px; 
$fullOffset: $offset * 2; 

tank-bar { 

    .progress-outer{ 
     position: relative; 
     // etc... 
    } 
    .progress-inner{ 
     position: absolute; 
     bottom: $offset; 
     left: $offset; 
     width: calc(100% - #{$fullOffset}); 

     // Include padding/margins in the width calculations of this child element. 
     box-sizing: border-box; 

     // etc... 
    } 

} 

私はあなたのサンプルに見られる少しのスペースを与えるために少しのオフセット変数を追加しました。実際にあなたが探しているものでない場合は削除/修正できます:)

Answer 3

フレックスボックスレイアウトを利用することができます。親のdisplayルールをflexに、align-itemsルールをflex-endに設定します。また、子のflexルールを0 1 100%に設定してください。

は、ここでは一例

let prog = document.querySelector('.progress-inner') 
 

 
for (var i = 0; i < 100; i++) { 
 
    (function(i) { 
 
    setTimeout(function() { 
 
     prog.style.height = i + 1 + '%' 
 
     prog.textContent = i + 1 + '%' 
 
    }, 100 * i) 
 
    }(i)) 
 
}

.progress-outer { 
 
    display: flex; 
 
    align-items: flex-end; 
 
    height: 96%; 
 
    margin: 10px 2%; 
 
    padding: 3px; 
 
    text-align: center; 
 
    background-color: #f4f4f4; 
 
    border: 2px solid #dcdcdc; 
 
    color: dark; 
 
    border-radius: 20px; 
 
} 
 

 
.progress-inner { 
 
    min-height: 15; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    height: 0; 
 
    flex: 1 1 100%; 
 
    padding: 5px; 
 
    border-radius: 20px; 
 
    background-color: lightgreen; 
 

 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic-framework/2.0.0-beta.2/ionic.ios.min.css" rel="stylesheet"/> 
 

 
<div class="progress-outer"> 
 
    <div class="progress-inner"> 
 
     0% 
 
    </div> 
 
</div>