Question

我需要创建容器文本大小的子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;
}

https://jsfiddle.net/p6z6huvz/9/

Answer 1

如果我的问题正确，你会尝试达到这样的目标吗？

你需要使用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>

如何制作容器文本大小的子div？

1 个答案: