Блог

Главная - Вопросы по программированию - Высота Div: 100% не работает с корпусом минимальная высота: 100 вч

Высота Div: 100% не работает с корпусом минимальная высота: 100 вч

#html #css

Вопрос:

Я столкнулся с тем, что для меня является неожиданным поведением. Я хотел установить body минимальную высоту на высоту окна просмотра (100 вч), затем создать div внутри него (с классом контейнера), который занимал бы всю высоту корпуса (100%), чтобы div распространялся по крайней мере на всю высоту окна просмотра. За исключением того, что этого не происходит; единственный способ достичь этого результата-установить html и body высоту на 100%. Какова техническая причина, по которой это происходит? Разве div не должен в любом случае занимать (минимальную)высоту 100% своего родителя?

Здесь вы можете найти кодовую строку с ожидаемым поведением, прокомментированным в конце css

 *,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #ddd;
  min-height: 100vh;
}

.container {
  background: #aaa;
  max-width: 500px;
  margin: 0 auto;
  padding: 1rem;
  min-height: 100%;
  height: 100%;
}

/* Uncomment for the expected behaviour */
/*
html,
body {
  height: 100%
}
*/ 
 <div class="container">
  <h1>Some generic title</h1>
  <p>Some random paragraph</p>
</div>

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

1. Только что потерял час на ту же самую проблему. Я ненавижу CSS.

Ответ №1:

Ответ прост, так как процент min-height рассчитывается на height основе значения родительского контейнера нет min-height .

 * {margin:0;}

body {
  background: gray;
  height: 100vh; /* look here */
}

.container {
  background: silver;
  margin: 0 20px;
  min-height: 100%;  /* look here */
} 
 <div class="container">
  <h1>Some generic title</h1>
  <p>Some random paragraph</p>
</div>

Но с min-height:inherit его помощью он затем наследует min-height значение из родительского контейнера.

 * {margin:0;}

body {
  background: gray;
  min-height: 100vh; /* look here */
}

.container {
  background: silver;
  margin: 0 20px;
  min-height: inherit;  /* look here */
} 
 <div class="container">
  <h1>Some generic title</h1>
  <p>Some random paragraph</p>
</div>

Я бы включил min-height:100% .container напрямую, если бы он всегда закрывал высоту окна просмотра.

 * {margin:0;}

body {
  background: gray;
}

.container {
  background: silver;
  margin: 0 20px;
  min-height: 100vh; /* look here */
} 
 <div class="container">
  <h1>Some generic title</h1>
  <p>Some random paragraph</p>
</div>

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

1. Это прояснило мой разум, я предположил, что рост ребенка зависел от фактического значения высоты, рассчитанного на лету. Большое вам спасибо!

Ответ №2:

 *,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #ddd;
  min-height: 100vh;
  height: 100vh;
}

.container {
  background: #aaa;
  max-width: 500px;
  margin: 0 auto;
  padding: 1rem;
  min-height: 100%;
  height: 100%;
}

/* Uncomment for the expected behaviour */
/*
html,
body {
  height: 100%
}
*/ 
   <div class="container">
    <h1>Some generic title</h1>
    <p>Some random paragraph</p>
  </div>
Метки: