Почему рост не равен 100% при использовании свойства min-height со значением 100%

0

У меня есть страница в

http://uberhealth.co/register.php

Я установил свойство, чтобы установить min-height на 100% но все же, поскольку вы можете видеть, что нижний колонтитул не внизу, и поэтому высота не устанавливается на 100%. Как я могу это исправить?

Обновить

Я уже дал там

html, body{
   height:100%;
}

и контейнерный класс для тела

.cbody-full { min-height:100%; }
  • 0
    Что ты хочешь делать? .cbody-full - это 100% высоты Нижний колонтитул находится внутри этого элемента. Если вы хотите, чтобы это было внизу, добавьте positon: absolute; bottom:0; или поместите его за пределы .cbody-full .
Теги:

2 ответа

3
Лучший ответ

Хотя вы установили значение min-height (процентное значение) для элемента <html>, оно не имеет явного значения height. Следовательно, свойство min-height не работает для элемента <body>.

Из MDN:

min-height

Процент вычисляется относительно высоты генерируемого блока, содержащего блок. Если высота содержащего блока явно не указана (т.е. Зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, процентное значение считается равным 0.

Вы можете установить height 100% для элемента <html>, а min-height: 100%; для <body>.

html { height: 100%; }
body { min-height: 100%; }

Обновление # 1

Здесь моя попытка исправить проблему с макетом.

Прежде всего отметим, что вы должны указать height родительского элемента, если хотите использовать min-height для дочернего элемента.

У вас есть несколько оберток внутри друг друга, изменились все объявления min-height: 100% на height: 100% (включая html, body ,...); и используйте min-height: 100% для элемента .cbody-full > container.

Затем вы можете столкнуться с вертикальной полосой прокрутки. Это потому, что вычисленная height заголовка и нижнего колонтитула добавляется к 100% высоты экрана (фактически, элемент .cbody-full > container имеет высоту 100%).

Вы можете исправить это, добавив отрицательное верхнее/нижнее margin в .cbody-full > container:

.cbody-full > container {
  min-height: 100%;
  margin-bottom: -50px;
  margin-top: -55px;
}

Но это приводит к тому, что контейнер проходит над заголовком и/или нижним колонтитулом. Чтобы исправить это, вы можете установить верхнее/нижнее padding к контейнеру и использовать box-sizing: border-box для вычисления ширины и высоты поля, включая paddings и границы:

.cbody-full > container {
  min-height: 100%;
  margin-bottom: -50px;
  box-sizing: border-box;
  padding-bottom: 50px;
  margin-top: -55px;
  padding-top: 55px;
}

Еще одна вещь, вероятно, вам нужно установить свойство z-index для элементов заголовка и нижнего колонтитула следующим образом:

#navbar, /* The header (navigation in this case) */
.footer { 
  position: relative;
  z-index: 100;
}

Обновление # 2

Если вы решите использовать липкий нижний колонтитул Ryan fait, обратите внимание, что нижний колонтитул не должен находиться внутри элемента .cbody-full, он должен быть рядом с ним. Поэтому он не остается в нижней части страницы.

Следовательно, вы можете изменить свою разметку следующим образом:

<body>
    <nav id="navbar"></nav>
    <div class="cbody-full"></div>
    <div class="footer"></div>
</body>

Затем выполните описанный выше подход для свойств height и min-height, а также position и z-index для навигации и нижнего колонтитула. Наконец, используйте для элемента .cbody-full:

.cbody-full {
  min-height: 100%;
  margin-bottom: -50px;
  box-sizing: border-box;
  padding-bottom: 50px;
  margin-top: -55px;
  padding-top: 55px;
}
Поделиться
  • 0
    Или, перефразируя это: 100% является относительным значением и всегда относится к hwight родительского элемента. Но html имеет ни одного.
  • 0
    Попробовал это явно с установкой высоты и с / без встроенного свойства min-height
Показать ещё 2 комментария
0

даже если вы не ставите min-height:100% ее всегда на 100%. Высота всегда относительна к содержимому, всегда заданному, что высота не определяется staticcaly

Поделиться
  • 0
    Я перепробовал все комбинации min-height и height в html и body элементе, поэтому попал в беду :(
  • 0
    Вы все еще не получили проблему: процент действительно ссылается на родительский элемент. <html> не имеет родительского элемента, поэтому он пуст. Вы можете использовать здесь только абсолютные значения (в пикселях, сантиметрах, сантиметрах, экс и т. Д.). Относительные значения не влияют.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню