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

Question

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

Вам нужно будет сделать что-то вроде этого:

def your_view(request):
    if request.method == 'GET':
        form = SolutionForm()
    elif request.method == 'POST':
        problem = ... # logic to find the problem instance
        solution = Solution(problem=problem) # or solution.problem = problem
        form = SolutionForm(request.POST, instance=solution)
        # the form will validate because the problem has been provided on solution instance
        if form.is_valid():
            solution = form.save()
            # redirect or return other response
    # show the form

484

css html

задан TylerH 3 January 2019 в 20:20

12 ответов

Здесь старомодная демоверсия на основе position: absolute контейнера содержимого и position: relative родительского контейнера.

Демо

Что касается современного способа сделать это - Flex Box являются лучшими.

0

ответ дан WebBrother 3 January 2019 в 20:20

Как показано ранее, flexbox является самым простым. например.

#main{ display: flex; align-items:center;}

это выровняет все дочерние элементы по центру внутри родительского элемента.

0

ответ дан Chandan Purohit 3 January 2019 в 20:20

В названии вопроса и его содержании есть некоторое противоречие. Название говорит о родительском div, но вопрос заставляет его звучать так, как будто вы хотите, чтобы два родственных div (навигация и контент) были одинаковой высоты.

Вы (а) хотите, чтобы навигация и контент были на 100% выше основной, или (б) хотите, чтобы навигация и контент были на одной высоте?

Я буду считать (б). ..если это так, я не думаю, что вы сможете сделать это, учитывая вашу текущую структуру страницы (по крайней мере, не с чистым CSS и без сценариев). Вам, вероятно, потребуется сделать что-то вроде:

<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

и установить для div содержимого значение с левым полем, равным ширине навигационной панели. Таким образом, контент находится справа от навигации, и вы можете установить div навигации равным 100% высоты контента.

РЕДАКТИРОВАТЬ: я делаю это полностью в моей голове, но вам, вероятно, также потребуется установить левое поле навигационного элемента в отрицательное значение или установить его абсолютное левое значение равным 0, чтобы переместить его обратно в крайнее левое положение. Проблема в том, что есть много способов сделать это, но не все они будут совместимы со всеми браузерами.

1

ответ дан Paul Abbott 3 January 2019 в 20:20

Я знаю, что прошло много времени с тех пор, как был задан вопрос, но я нашел простое решение и подумал, что кто-то может его использовать (извините за плохой английский). Вот оно:

CSS

.main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

HTML

<div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

Простой пример. Обратите внимание, что вы можете превратиться в отзывчивость.

2

ответ дан Paula Fleck 3 January 2019 в 20:20

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

Посмотрите на этот пример .

10

ответ дан Nobita 3 January 2019 в 20:20

с использованием jQuery:

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});

15

ответ дан flavius 3 January 2019 в 20:20

У меня была та же проблема, она работала на основе ответа Hakam Fostok, я создал небольшой пример, в некоторых случаях она могла бы работать, не имея необходимость добавлять display: flex; и flex-direction: column; на родительском контейнере

.row {
    margin-top: 20px;
}

.col {
    box-sizing: border-box;
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    background-color: #a0a0a0;
    height: 100%;
}

JSFiddle

1