`JSFiddle`

Question

我的HTML代码中有两个div标签，如

<div id="parent">
    <div id="child">
        <p class="child-text"> ..... </p>
        <a class="child-link"> ..... </a>
        <p class="child-text"> ..... </p>
    </div>
</div>

#parent{ height: 400px; width:100px}

如何强制#child div 的内容垂直适合父div？我正在寻找一些可以采用子div ID并动态调整其内容的东西。我曾与jQuery.fittext合作过。但是，它获取child-text类ID而不是child div id。换句话说，它不够智能，无法识别child div中的内容，然后重新调整它们。

还有其他替代品吗？

Answer 1

你可以这样做：

＆＃13;

var fontsize = 10;
while($('#child').height() <= $('#parent').height()){
    fontsize = fontsize +1;
    $('#child').css('font-size',fontsize+'px');
}

＆＃13;

#parent{ height: 400px; width:100px;background:red;}
#child{padding-bottom:5px;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="parent">
    <div id="child">
        <p class="child-text"> Once upon a time </p>
        <a class="child-link"> there lived a monkey</a>
        <p class="child-text"> who loved to eat oranges </p>
    </div>
</div>

＆＃13;

虽然#child高度低于#parent，但它会添加1px，直到它不是#child。在css中，我给了{{1}}一个5px的填充底部，所以它不会溢出

`JSFiddle`

Answer 2

将表的显示属性值添加到表的 #parent 和显示属性值 -cell 指向要测量 #parent

高度的元素

＆＃13;

#parent, #child {
  width: 100%;
  height: 100%;
  position: relative;
  display: table;
  }

.child-link, .child-text { /* ID/Class of whatever element you want to measure the #parent */
  display: inline-block;
  height: 100%;
  width: 150px;
  vertical-align: top;
  background-color: green;
  bottom: 0;
  display: table-cell;
  border-left: solid 5px white; /* Just for Division sake */
  }

＆＃13;

<div id="parent">
    <div id="child"><p class="child-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit. </p>
      
      
        <a class="child-link"> Lorem </a>
        <p class="child-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.
      
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.
      
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.</p>
    </div>
</div>

＆＃13;

要使其取决于屏幕尺寸，请执行以下操作：

@media screen and (max-width: 768px) { /* Adjust as needed */
enter code here

}

子div中的强制文本适合父级

2 个答案:

`JSFiddle`