我需要用容器的文本大小制作子 div。我的意思是增加文本和输入字段以填充所有容器。这是我的代码:
<body>
<div class="Container">
<div class="One">
<div class="Child">
<div class="MyText">text <input type="text"></div>
</div>
</div>
</div>
</body>
html,
body {
height: 100%;
margin: 0px;
font-size: 14px;
}
.Container
{
display: flex;
flex-direction: column;
border: 1px black dashed;
height: 100vh;
}
.One
{
display: flex;
border: 1px red dashed;
flex-basis: 100px;
}
.Child
{
heigth:100%;
}
.MyText input {heigth:100%;}
.MyText /* I want to make this content 100% of parents size */
{
font-size: 1vh;
}
最佳答案
如果我答对了你的问题，你会尝试实现这样的目标吗？
为此你需要使用 jQuery。
您可以在 CSS 中调整容器的宽度，jQuery 会计算 font-size
var fontwidth = $('.label').width();
var divwidth = $('.container').width();
var size = parseFloat($('.label').css('font-size'));
var fontsize = (divwidth / fontwidth) * size;
$('.label').css("font-size", fontsize);*{
margin:0;
padding:0;
}
.label{
float:left;
line-height:.8;
float:left;
}
.container{
width:60%;
display:inline-block;
height:auto;
border:1px dashed black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="label">Text</div>
</div>关于html - 如何使用容器的文本大小制作子div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44756062/