Bootstrap - подходит родитель высота ребенка/содержание

Question

по этой ссылке: testing v1

вы можете найти пример страницы, которые я создал в загрузчике. Ничего сложного, но у меня крошечная проблема с родительским и дочерним отношением. Как видите, содержимое разбивает размер родителя. И им просто интересно, почему, поскольку я использовал во всех классах высоту & min-height 100%. Есть идеи?

Answer 1

На самом деле, что делает .col-lg-6.sidebar имеют меньшую высоту, чем его ребенок (.testowo) является height: 100%.

.sidebar { 
    text-align: center; 
    background-color: #F00; 
    background-image: url("../images/background.png"); 
    background-attachment: scroll; 
    background-clip: border-box; 
    background-origin: padding-box; 
    background-repeat: no-repeat; 
    background-position: right center; 
    background-size: inherit; 
    /* height: 100%; */ //remove this line 
    min-height: 100%; 

Если вы хотите, чтобы родитель имел высоту, скорректированную с учетом содержимого своего ребенка, не устанавливал ее высоту. Вы можете думать, что он все еще ломается, но нет, это просто используется background-image, который будет центрирован. Высота родителя будет регулироваться в зависимости от содержимого ребенка.

Что происходит, что все div s есть height: 100% Так это выглядит следующим образом:

html -> его начальная высота равна высоте окна браузера.

body ->height: 100% сделать высоту высотой htmls, которая является высотой окна вашего браузера.

.main-part ->height: 100% делает его высотой body. То же самое, это будет высота окна вашего браузера.

.container-fluid ->height: 100%, то же, что и body и .main-part.

.row ->height: 100%, так же, как body, .main-part и .container-fluid.

.col-lg-6.sidebar ->height: 100%, то же самое. Таким образом, это будет высота окна вашего браузера, и содержимое его сломает. Вы устанавливаете фиксированную высоту здесь, это 100%, но если вы масштабируете, вы будете уведомлять, указав height: 100%, вы устанавливаете высоту, равную высоте html, поэтому высота окна браузера. Позвольте ему отрегулировать его содержимое, удалив объявление height:100% или установив height: auto.

Также вам не нужно устанавливать height: 100% в .testowo. Это не имеет значения.

.testowo { 
    width: 200px !important; 
    position: relative; 
    /* height: 100%; */ //remove this since it is useless. 
} 

Примечание: Помните, что при работе с % значениями в вашем CSS он делает ссылку на родителя, а не ребенка. Значение height: 100% элемента будет равно высоте его родительской высоты, а не дочерней. Используйте height: auto, чтобы настроить его содержимое.