3

好的，我基本上有一个.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>

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

4

1 回答 1

0

我知道已经很晚了，但我想与您分享我的解决方案。我使用 JavaScript 在页面加载和调整页面大小时更改输入字体。设置font-size为offsetHeight输入。然后字体大小将等于输入高度。我认为文本不适合，这就是为什么我使用 70% 的高度，如下所示：

//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";
}
#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;
}
<html>
<body onload="myFunction()">
<p><input type="text" id="username" placeholder="Username"/></p>
<p><input type="password" id="password" placeholder="Password"/></p>
</body>
</html>

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

于 2017-08-08T15:54:34.093 回答