Question

好的，我基本上有一个.search_bar_container类，如下所示：

#search_bar_container{
    width: 81%;
    overflow: hidden;
    z-index: 1;
    position: absolute;
    top: 45%;
    left: 13.3%;
    height: 10%;
}

和.search_bar班级：

#search_bar{
    width: 80%;
    height: 99%;
    font-family: cursive;
    font-size: vh;
    box-shadow: 1px 1px 5px black;
}

接下来我的HTML看起来像这样

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

问题
我的问题是如何设置搜索栏的字体大小等于search_bar的高度？到目前为止我尝试过的事情： 100％...嗯我不知道为什么这对于相对于文本框设置字体大小永远不会起作用。 100vh ...将大小设置为正文的100％...任何方式我都可以更改视口并将其设置为search_bar容器......？

Answer 1

我知道它已经很晚了，但我想和你分享我的解决方案。我在页面加载和调整页面大小时使用JavaScript来更改输入字体。将font-size设置为输入的offsetHeight。然后字体大小将等于输入高度。我认为文字不合适，这就是我使用70％高度的原因：

＆＃13;

//when window changes its size, make text fit again
window.onresize = function(event) {
    document.getElementById("username").style.fontSize = (document.getElementById("username").offsetHeight*0.7) + "px";
    document.getElementById("password").style.fontSize = (document.getElementById("password").offsetHeight*0.7) + "px";
};

//when page loads make text fit text box
function myFunction(){
document.getElementById("username").style.fontSize = (document.getElementById("username").offsetHeight*0.7) + "px";
document.getElementById("password").style.fontSize = (document.getElementById("password").offsetHeight*0.7) + "px";
}

＆＃13;

#username{
width:85%;
height:100px;
font-size:25px;
padding-left:20px;
padding-right:20px;
}

#password{
width:85%;
height:50px;
font-size:25px;
padding-left:20px;
padding-right:20px;
}

body{
text-align:center;
}

＆＃13;

<html>
<body onload="myFunction()">
<p><input type="text" id="username" placeholder="Username"/></p>
<p><input type="password" id="password" placeholder="Password"/></p>
</body>
</html>

＆＃13;

如果要将字体大小设置为大于或小于输入高度的70％，请将0.7更改为所需的数字。

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

1 个答案: