0

我的 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}

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

还有其他选择吗？

4

2 回答 2

2

您可以执行以下操作： 

var fontsize = 10;
while($('#child').height() <= $('#parent').height()){
    fontsize = fontsize +1;
    $('#child').css('font-size',fontsize+'px');
}
#parent{ height: 400px; width:100px;background:red;}
#child{padding-bottom:5px;
<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>

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

JSFiddle

于 2015-01-07T21:04:23.550 回答
1

将table的显示属性值添加到 #parent，并将table-cell的显示属性值添加到要测量#parent高度的元素

#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 */
  }
<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>

要使其依赖于屏幕大小，请执行以下操作：

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

}
于 2015-01-07T20:57:02.567 回答