текста силы в ребенке DIV вписываться в родитель

Question

У меня есть два DIV-тегов в моем HTML-коде, как этот

<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 и динамически изменять его содержимое. Я работал с jQuery.fittext. Тем не менее, он получает идентификатор класса child-text вместо child div id. Другими словами, недостаточно интеллектуально идентифицировать то, что находится в div child, а затем перемасштабировать их.

Есть ли другая альтернатива этому?

Answer 1

Вы могли бы сделать что-то вроде:

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

Answer 2

Добавить дисплей значения свойства из таблицы к #parent и значение свойства дисплея из таблицы-клетки к элементам, которые вы хотите измерить высоту #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 

}