Блог

Главная - Вопросы по программированию - Настройка Divs для вертикального заполнения родительского элемента

Настройка Divs для вертикального заполнения родительского элемента

#jquery #html #css

#jquery #HTML #css

Вопрос:

Я уже некоторое время играю с этим, но, похоже, не могу понять, как правильно это настроить.

Учитывая этот HTML:

 <div class="item-container bottom-spacer">
        <div id="my-friends"><div id="2" class="user-profile-card">
        <img src="">

        <div><h3>John</h3></div>
        <h3>Details</h3><br>
        Date: Tuesday, June 24th 2014, 11:47 am<br>
        Val1: 22<br>
        Val2: 28<br>
        <div>
            <h3>Notes</h3><br>
            Just some notes...
        </div>
        <div class="user-profile-li-buttons"><button class="delete-button" onclick="friendsPage.deleteFriend(2)">X</button></div>

</div><div id="4" class="user-profile-card">
        <img src="">

        <div><h3>Mr User One</h3></div>
        <h3>Details</h3><br>
        <div>
            <h3>Notes</h3><br>
            Just some notes...
        </div>
        <div class="user-profile-li-buttons"><button class="delete-button" onclick="friendsPage.deleteFriend(4)">X</button></div>
</div><div id="6" class="user-profile-card">
        <img src="">

        <div><h3>Mr User Two</h3></div>
        <h3>Details</h3><br>
        Date: Tuesday, June 24th 2014, 6:30 pm<br>
        Val1: 31<br>
        Val2: 20<br>
        <div>
            <h3>Notes</h3><br>
            Just some notes...
        </div>
        <div class="user-profile-li-buttons"><button class="delete-button" onclick="friendsPage.deleteFriend(6)">X</button></div>
</div></div>
        <div class="clear-fix"></div>
    </div>

И немного CSS:

 .item-container {
    padding: 20px;
    border: 0 #fff solid;
    background: #ccc;
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 0.3ex;
    -webkit-border-radius: 0.3ex;
    -moz-border-radius: 0.3ex;
    overflow: auto;
    height:100%;
}

#my-friends {
    height: inherit;
}

.user-profile-card {
    overflow: hidden;
    background: #333;
    color: #fff;
    border-radius: 0.3ex;
    -webkit-border-radius: 0.3ex;
    -moz-border-radius: 0.3ex;
    margin: 5px;
    float: left;
    font-size: 0.8em;
    width: 160px;
    padding: 5px;
    height: 100%;
}

Первоначально я думал, что это потому, что я динамически добавлял содержимое HTML с помощью jQuery, но после создания JsFiddle, похоже, я тоже ошибался в этом.

Как мне заставить эти внутренние divs правильно растягиваться по вертикали, чтобы заполнить родительский div?

Скрипка здесь:

http://jsfiddle.net/

Комментарии:

1. Не уверен, что это то, что вы имели в виду, но вы пробовали добавлять clear:both; .user-profile-card в css? Вы можете добавить margin: 5px auto; их в центр.

2. Что вы подразумеваете под «правильным вертикальным растяжением»? Вы хотите, чтобы каждый .user-profile-card из них заполнял высоту окна?

3. Это не работает, они складываются друг на друга, а не рядом.

4. @showdev, чтобы они заполняли родительский div.

5. Родительский div .user-profile-card is #my-friends . Он наследует высоту 100% от .item-container , которая имеет высоту 100% от своего родителя ( <body> тега), высота которого не определена. Без таблиц (CSS) или javascript будет сложно установить высоту каждого дочернего элемента на высоту самого высокого дочернего элемента.

Ответ №1:

Просто добавьте display:table в #myfriends

Пример jsFiddle

Ответ №2:

высота 100% работает только в том случае, если к родительскому элементу применена высота.

итак, вам нужно применить высоту к html,body элементам.

Демонстрация скрипки

 html,body{
    height:100%
}
.item-container {
    padding: 20px;
    border: 0 #fff solid;
    background: #ccc;
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 0.3ex;
    -webkit-border-radius: 0.3ex;
    -moz-border-radius: 0.3ex;
    overflow: auto;
    height:100%;
}
#my-friends {
    height: inherit;
}
.user-profile-card {
    overflow: hidden;
    background: #333;
    color: #fff;
    border-radius: 0.3ex;
    -webkit-border-radius: 0.3ex;
    -moz-border-radius: 0.3ex;
    margin: 5px;
    float: left;
    font-size: 0.8em;
    width: 160px;
    padding: 5px;
    height: 100%;
}

Комментарии:

1. Я согласен с вашим выводом. Но я считаю, что OP хочет, чтобы все user-profile-card элементы были одинаковой высоты — высоты самого высокого. Но не высота всего окна. Однако это может быть неправильно.

2. @showdev в таком случае, моя ошибка, позвольте мне подумать что-нибудь еще, чтобы решить эту проблему.

Метки: