Чтобы div увеличивал полную высоту

80

Есть ли метод, который я могу использовать для расширения div на полную высоту? У меня тоже есть липкий нижний колонтитул.

Вот веб-страница: Веб-сайт удален . Средний бит, о котором я говорю, - это белый div, midcontent, который имеет значения CSS:

.midcontent{
     width:85%;
     margin:0 auto;
     padding:10px 20px;
     padding-top:0;
     background-color:#FFF;
     overflow:hidden;
     min-height:100%;
     max-width:968px; 
     height:100%;
}

Так что да, очевидно height:100%, не сработало. Кроме того, для ВСЕХ родительских контейнеров задана высота.

Вот общая структура

<body>
    <div id="wrap">
        <div id="main">
            <div class="headout">
                <div class="headimg"></div>
            </div>
            <div class="midcontainer"></div>
        </div>
    </div>
    <div id="footer">
        <div class="footer"></div>
    </div>

css xhtml html

— нести
источник

Это ОЧЕНЬ распространенный вопрос, ваше решение почти наверняка будет найдено в других ответах: stackoverflow.com/search?q=css+div+100 или stackoverflow.com/search?q=css+div+height

— Бен,

2

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

— медведь

1

Я не уверен, достаточно ли ясен ваш вопрос. Вы ищете что-то, что заставит «мидконтейнер» занять все оставшееся пространство между «верхним колонтитулом» и «нижним колонтитулом»? Потому что это, конечно, не равно 100%

— cesarsalazar

138

Вы помните, как устанавливали высоту тегов html и body в CSS? Обычно я получил DIV для расширения на полную высоту:


<html>
  <head>
    <style type="text/css">

      html,body { height: 100%; margin: 0px; padding: 0px; }
      #full { background: #0f0; height: 100% }

    </style>
  </head>
  <body>
    <div id="full">
    </div>
  </body>
</html>

— Том
источник

У меня такая же проблема, но хотя я установил рост на 100%, это не работает. ссылка Если вы щелкните портфолио, выберите категорию, а затем щелкните эскиз, появится слайд-шоу. Фон слайд-шоу не распространяется на всю страницу, хотя его высота установлена на 100%.

— Нитрат натрия

2

Я думаю, что код правильный, но вопрос неправильный: он должен спросить, устанавливаете ли вы теги body И html на 100%. Потому что каким-то образом тег html может по-разному влиять на вывод ...

— Алексис Уилке

2

Как-то кажется, что html 100% захватывает только видимый экран. Используя chrome devtool, когда я выбираю элемент «html», он заканчивается в конце видимой страницы, когда я прокручиваю вниз, он как будто больше не является частью <html>

— Натан Х

как насчет использования vh?

— mfnx

38

Это может помочь: http://www.webmasterworld.com/forum83/200.htm

Соответствующая цитата:

Большинство попыток сделать это было сделано путем присвоения свойства и значения: div {height: 100%} - одно это не сработает. Причина в том, что без заданной родительской высоты div {height: 100%;} не имеет ничего, что можно было бы разложить на 100% процентов, и по умолчанию будет использовать значение div {height: auto;} - auto - это «необходимое значение». "который регулируется фактическим содержанием, так что div {height: 100%} будет расширяться только настолько, насколько этого требует содержание.

Решение проблемы можно найти, присвоив значение высоты родительскому контейнеру, в данном случае элементу body. Написание стиля вашего тела с указанием роста на 100% дает необходимое значение.
html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}

— Брайан Клэппер
источник

2

Привет, у всех родителей есть контейнеры height:100%.

— медведь

2

@Shamil, Все родители включая тег html? Возможно, это была твоя проблема. Чаще всего я забываю о теге html как о графическом теге.

— Alexis Wilke

@AlexisWilke, да, это так - редко я не включаю html-теги

— медведь

3

К моему удивлению, включая тег формы

— Адам

ключевой элемент - 100% высота тела и теги html

— luismesas

9

Это старый вопрос. CSS эволюционировал. Теперь есть vhединица (высота области просмотра), а также новые параметры макета, такие как flexboxили CSS gridдля достижения классического дизайна более чистыми способами.

— Франк Леммер
источник

2

В случае, если также установка высоты html и тела на 100% делает все более беспорядочным для вас, как это было для меня, у меня сработало следующее:

height: calc(100vh - 33rem)

- 33rem высота элементов , поступающих после того, как тот , который мы хотим взять полный рост, то есть, 100vh. Вычитая высоту, мы убедимся, что нет переполнения, и он всегда будет реагировать (при условии, что мы работаем с rem вместо px).

— Джохат
источник

Просто убедитесь, что вы не делаете height: calc(100vh -33rem)там, где отрицательный знак касается значения, поскольку это будет недопустимым CSS. Также 33rem можно заменить значением пикселя.

— Rich Finelli

1

если установка высоты на 100% не работает, попробуйте min-height = 100% для div. Вам все равно нужно установить тег html.

html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
}

#fullHeight{

    width: 450px;
    **min-height: 100%;**
    background-color: blue;

}

— Димитрис Кремезис
источник