Html 将输入文本框字体大小设置为等于输入文本框高度

好的，我基本上有一个

.search\u bar\u container

类，如下所示：

#搜索栏(容器){
宽度：81%；
溢出：隐藏；
z指数：1；
位置：绝对位置；
最高：45%；
左：13.3%；
身高：10%；
}

和

。搜索栏

类：

#搜索栏{
宽度：80%；
身高：99%；
字体系列：草书；
字体大小：vh；
盒影：1px 1px 5px黑色；
}

接下来，我的HTML如下所示

<div id='search_bar_container'><input id='search_bar'/></div>

问题
我的问题是如何将搜索栏的字体大小设置为搜索栏的高度？到目前为止我已经尝试过的事情： 100%…嗯，我不知道为什么设置相对于文本框的字体大小时，这种方法不起作用。

---

100vh…将大小设置为身体的100%…我可以通过任何方式更改视口并将其设置为搜索栏容器…？

我知道已经晚了，但我想与您分享我的解决方案。我使用JavaScript在页面加载和调整页面大小时更改输入字体。将输入的

font size

设置为

offsetHeight

。然后字体大小将等于输入高度。我认为文本将不适合，这就是为什么我使用70%的高度如下：

//当窗口更改其大小时，使文本再次适合
window.onresize=函数（事件）{
document.getElementById（“用户名”）.style.fontSize=（document.getElementById（“用户名”）.offsetHeight*0.7）+“px”；
document.getElementById（“密码”）.style.fontSize=（document.getElementById（“密码”）.offsetHeight*0.7）+“px”；
};
//页面加载时使文本适合文本框
函数myFunction（）{
document.getElementById（“用户名”）.style.fontSize=（document.getElementById（“用户名”）.offsetHeight*0.7）+“px”；
document.getElementById（“密码”）.style.fontSize=（document.getElementById（“密码”）.offsetHeight*0.7）+“px”；
}

#用户名{
宽度：85%；
高度：100px；
字体大小：25px；
左侧填充：20px；
右边填充：20px；
}
#密码{
宽度：85%；
高度：50px；
字体大小：25px；
左侧填充：20px；
右边填充：20px；
}
身体{
文本对齐：居中；
}

对于那些不支持

vh

/

vw

单元的浏览器（包括Chromium 18/Ubuntu11.04…叹气），JavaScript回退是可以接受的，还是必须是纯CSS（因此在不支持的浏览器中是不完美的）。JavaScript是可以接受的。你推荐什么？还不确定；我对Chromium的失败感到惊讶，并正在研究如何切换到beta/unstable nightly/dev分支。所以，嗯，还没有真正调查过。我假设您希望字体大小为视口高度的9.9%（ish）？我只希望字体大小等于文本框高度的95%。实际上，我不在乎网页是否放大。我只想能够设置加载时的字体大小。