如何在外部div的底部放置內部div（垂直進度條）？

我正在使用Ionic 2，並試圖創建一個垂直進度條組件 - 說明坦克級別。如何在外部div的底部放置內部div（垂直進度條）？

這是我到目前爲止有：

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和薩斯，但試圖通過教程得到改善。

編輯*

的HTML如下：

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

來源

2017-07-26 Peter Turner

的HTML將是不錯的！ – robbannn

對不起！現在加入 –

呈現的html？ – Legends

如果修改CSS使外部容器相對的，絕對定位，並在它固定在底部，像內膽所以：

.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-outer

和

position: absolute; 
bottom: 0;

在.progress-inner

來源

2017-07-26 22:03:28 brendangibson

這導致外部div縮小，不再包含更小的div（至少它是如何出現的）。它也坐在左下角 –

你可以設置'left：0;右邊：0'表示內部容器可以延伸到外部容器的整個寬度。 – brendangibson

定位把孩子當作絕對的相對母公司將允許您指定它堅持的地方。這帶來了一些捕獲，包括需要指定它的寬度，現在它已經被取出正常的文檔流（它通常會測量其塊寬度）。

// 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... 
    } 

}

我加了一點offset變量給一點，我你的樣品中看到的空間。你可以刪除/修改，如果它實際上不是你要找的東西:)

來源

2017-07-26 22:10:32 veratti

你可以使用flexbox佈局。將父級的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>

來源

2017-07-26 22:13:07 DavidDomain

如何在外部div的底部放置內部div（垂直進度條）？

回答

相關問題