CSS高度“扩展”错误的方式

Question

我正在尝试制作一个温度计，可以很容易地显示收到的捐款百分比。

我已经帮助使用jquery来控制div的高度，这将是温度计的填充。但是现在我正在温度计内垂直地做这个＆＃34;填充＆＃34;向错误的方向移动，我无法弄清楚如何反转，因为div的高度向下移动＆＃34;

对不起，我很难解释这个。这是我到目前为止： http://bit.ly/jrHwHo

这是css：

#thermometer { height: 377px; width: 180px; margin:5px; padding:0; border: #cccccc solid 1px; background: url(thermometer.jpg);}

#level { height: 250px; width:26px; margin: 0; padding:0;  background: #eb1c22;  position:relative; top:51px; left:71px; }

这是html：

<div id='thermometer'>
    <div id='level'>
    </div>
</div>

<br>
Type a number between 0 and 250: <br>

Answer 1

您可以在要展开的position: absolute;上使用bottom: 0;和div。然后，只需确保父元素（展开div的容器）设置为position: relative。

#thermometer { height: 377px; 
               width: 180px; 
               margin:5px; 
               padding:0; 
               border: #cccccc solid 1px; 
               background: url(thermometer.jpg);
               position: relative;}
#level { height: 250px; 
         width:26px; 
         margin: 0; 
         padding:0;  
         background: #eb1c22;
         position: absolute; 
         bottom: 0px; 
         left:71px; }

如果0对你不起作用，只需调整它直到它为止。关键是要使用bottom，而不是top。

Answer 2

使用bottom代替top来锚定它。

看起来bottom: -180px会这样做（并且不要忘记删除top属性，或将其设置为auto）。

使用bottom: -180px而不是top。

的示例

Answer 3

使用bottom代替top来定位关卡元素。这样，该位置将相对于父母的底部，并且将向上增长。

Answer 4

喜欢温度计，只是一个建议，在你的javascript中添加一些东西以防止大于输入目标的数字，否则温度计中“液体”的水平将超过背景。我要做的是有一个最大值的变量。在设置高度值之前，请检查输入的数字与最大值。如果输入的数字大于最大值，则使高度变为最大值