Как обеспечить, чтобы высота внутреннего div была равна высоте родительского div, если родительский div имеет "min-height"?

ProgramBox

Как обеспечить, чтобы высота внутреннего div была равна высоте родительского div, если родительский div имеет «min-height»?

Post author:admin
Запись опубликована:6 мая, 2023
Post category:Вопросы по программированию

#html #height #css

#HTML #высота #css

Вопрос:

Почему в следующем примере высота внутреннего div div не такая, как у wrapper div ?

Живая демонстрация здесь.

HTML:

 <div class="wrapper">
    <div class="inner">Hello</div>
    <div class="inner">Peace</div>
</div>

CSS:

 .wrapper {
    background-color: #000;
    min-height: 100px;
}
.inner {
    display: inline-block;
    background-color: #777;
    height: 100%;
}

Если я изменю min-height: 100px; на height: 100px; , то все выглядит нормально. Но, в моем случае, мне нужно min-height .

1. Если высота оболочки не является динамической, то зачем вам нужно использовать%, когда внутренняя часть может иметь ту же высоту, что вы указали для wrapper . Кроме того, если бы внутренний был высоким на 100%, то как бы работали два из них в оболочке ..?

2. спасибо за этот сайт, кстати, Миша, это будет очень полезно 🙂

3. @iain: Добро пожаловать в клуб 🙂

4. @Marty: Высота оболочки является динамической, она может составлять 100 пикселей или более.

Ответ №1:

Некоторые свойства в CSS наследуют значение родительского автоматически, некоторые нет. Минимальная высота должна быть явно указана, если вы хотите, чтобы она наследовала родительское значение:

 min-height: inherit;

Ответ №2:

Я полагаю, что это тот результат, который вы хотите:http://jsfiddle.net/xhp7x/

 .wrapper {
    display: table;
    background-color: #000;
    height: 100px;
    width: 100%;
}
.wrapper2 {
    height: 100%;
    display: table-row
}
.inner {
    height: 100%;
    display: inline-block;
    background-color: #777;
    margin-right: 10px;
    vertical-align: top;
}

Пришлось добавить вторую оболочку DIV 2.

Протестировано в Chrome и Firefox.

1. В вашем примере оболочка не имеет min-height .

2. но он ведет себя примерно так. короткий текст сохраняет оболочку размером 100 пикселей, а высокий текст расширяет ее

3. ОК… Но высота внутренних оболочек меньше высоты оболочки. Я хочу, чтобы они были равны.

4. Отредактировано. Извините, работал над chrome. Сейчас работает над firefox. Не могу заставить это работать в IE, хотя… будет продолжать пытаться

5. привет .. невозможно работать в IE, если вы не укажете высоту содержащего div. извините.

Ответ №3:

Вы хотите указать оба, CSS height не совпадает с min-height . Вы хотите указать оба height и min-height .

height = При использовании в качестве % , это процент от высоты окна
min-height = по мере того, как вы перетаскиваете окно меньше, DIV с % height будет продолжать уменьшаться, пока не достигнет min-height
max-height = по мере увеличения окна DIV с % height будет продолжать увеличиваться, пока не достигнет max-height

http://jsfiddle.net/gpeKW/2 / Я добавил сюда образец с границами.

Небольшое изменение в ответе из вашего комментария, вы в значительной степени правы с вашего исходного CSS.

Приведенный ниже HTML-код будет иметь минимальную высоту div 100 пикселей. По мере увеличения размера внутреннего DIV оболочка будет автоматически расширяться. Я продемонстрировал это, добавив style атрибут к первому внутреннему class .

 <html>
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        .wrapper
        {
            background-color: #000;
            min-height:100px;
        }
        .inner
        {
            display: inline-block;
            background-color: #777;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
         <div class="inner" style="height:200px">test</div>
    <div class="inner">Peace</div>
    </div>
</body>
</html>

1. я пробовал это, но если вы задаете высоту, div не увеличивается, если содержимое больше 100 пикселей, я думаю, это обязательное условие

2. В вашем примере нет min-height на div-оболочке.

3. @misha, я обновил его, извините, у меня возникли проблемы с копированием и вставкой 🙂

4. Проблема в том, что я не хочу определять оболочку height . Я хочу, чтобы это было 100px или больше (в случае, если внутренний div слишком высокий).

Ответ №4:

Я знаю, что один из способов установить дочернюю высоту div такой же, как высота родительского div, — это использовать относительную позицию для родительского и абсолютную позицию для дочернего.

 .wrapper {
    background-color: #000;
    min-height: 100px;
    position: relative;
}
.inner {
    display: inline-block;
    background-color: #777;
    position: absolute;
    height: 100%;
}

Но этот способ вызовет некоторую проблему, вам нужно настроить дочерний элемент так, чтобы он отображался должным образом

P / s: Почему бы вам не установить его на ту же высоту, что и родительская высота? Я имею в виду, что 100% — это не x%… просто задумался..

В любом случае, удачного кодирования 😉

1. хм .. странно, это не увеличило высоту для верхнего элемента jsfiddle.net/kBRVH

2. jsfiddle.net/kBRVH/3 как вы можете видеть, первый с текстом черного цвета, если вы вставите больше строк, он переполнит внешний div, потому что внешний div имеет высоту 100 пикселей, и эта высота не увеличится, когда его дочерний элемент с абсолютной позицией увеличит высоту. С другой стороны, второй с белым текстом, вставьте больше строк, и вы увидите 😉

Ответ №5:

Я, конечно, объединил ответы и результат, используя ‘min-height’ для —основного HTML-тега— (class = «main-page-container»):

HTML:

 <div id="divMainContent">
    <!-- before or after you can use multiples divs or containers HTML elements-->
    <div>   </div>
    <div>   </div>
    
    <main class="main-page-container">
        <div class="wrapper">
        1
            <div class="wrapper2">
            2
                <div class="child">3</div>
            </div>
        </div>
    </main>
    
    <!-- before or after you can use multiples divs or containers HTML elements-->
    <div class="footer-page-container bg-danger" > more relevant info</div>
</div>

CSS:

 /*#region ---- app component containers ---- */
#divMainContent {
  height: 100%;
  display: flex;
  flex-direction: column;

  /*optional: max width for screens with high resolution*/
  max-width: 1280px;
  margin:0 auto;
}
.main-page-container {
  display: inline-table;
  height: 70%;
  min-height: 70%;
  width: 100%;
}
.footer-page-container{
  flex:1; /* important in order to cover the rest of height */

  /* this is just  for your internal html tags
  display: flex;
  flex-direction: column;
  justify-content: space-between; */
}

/*#endregion ---- app component containers ---- */


.wrapper {
  background: blue;
  max-width: 1280px;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  height: 100%;
}

.wrapper2 {
  width: 90%;
  margin: auto;
  background: pink;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  height: 90%;
}

.child {
  min-height: 100px;
  min-width: 300px;
  background: orange;
  position: relative;
  width: 33%;
}