如何在外部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（垂直进度条）？

回答

相关问题