Высота 100% не работает, несмотря на то, что все родители установлены на 100%

-1

Я пытаюсь установить высоту моего тела на 100%, чтобы постоянно помещать нижний колонтитул в нижней части моей страницы. Однако, независимо от того, что я делаю, мое тело просто не займет полную страницу, и я не могу понять, почему. HTML элемент также имеет высоту: 100%Высота 100% не работает, несмотря на то, что все родители установлены на 100%

Вот страница: http://learnvr.co/login.php

И мой CSS:

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
}

источник

2017-01-03 mongy910

попробуйте с 'height: 100vh' – tejashsoni111

' отрицательное поле '.hide-menu' рушится с телом. – Oriol

Пробованная высота: 100vh для html и body, похоже, имеет тот же результат, что и раньше. – mongy910

Удалить position: relative; из вашего entirePage класса.

Попробуйте это:

.entirePage { 
    min-height: 100%; 
}

источник

2017-01-03 05:01:19

Проблема заключается в том, что нижний колонтитул всегда фиксируется в нижней части страницы. Я хочу, чтобы он был внизу, если содержимого недостаточно, но в противном случае он будет оттолкнут содержимым, чтобы вам пришлось прокручивать его. – mongy910

<div class="entirePage">

Вы можете установить позицию по отношению к классу entirepage. Следовательно, он удаляет над ним белое пространство.

источник

2017-01-03 05:03:06

Вы также можете использовать абсолютное позиционирование, чтобы поместить футер:

.footer { 
    position: absolute; 
    bottom: 0; 
}

Это будет иметь другие преимущества: как только ваша страница становится выше, чем 100vh (за счет добавления контента), то ваш сноска не будет «толкнул вниз ».

источник

2017-01-03 05:03:24 willoller

Я хочу, чтобы он был нажат, если есть больше контента. Есть ли способ сделать это или это нетривиально? – mongy910

@ mongy910 да. ты можешь. для этого напишите небольшой код jquery. –

Так что это невозможно с CSS? Я пытался следовать этому учебнику http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page – mongy910

Добавьте ниже стиль в свой CSS-класс Footer.

margin-top: 350px;

источник

2017-01-03 05:09:56

Это, кажется, ничего не меняет для меня. Я добавил его на страницу. – mongy910

Привет, добавили ли вы его в свой нижний колонтитул? –

Да, я сделал, он остается тем же. – mongy910

Высота 100% не работает, несмотря на то, что все родители установлены на 100%

ответ

Смежные вопросы