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

Question 1

Есть ли метод, который я могу использовать для расширения 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>

Question 2

Вы помните, как устанавливали высоту тегов 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>

Question 3

Это может помочь: 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%; 
}

Question 4

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

Question 5

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

height: calc(100vh - 33rem)

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

Question 6

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

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

#fullHeight{

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

}

Answer 1

Есть ли метод, который я могу использовать для расширения 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>

Answer 2

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

Бен,

Answer 3

2

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

медведь

Answer 4

1

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

cesarsalazar

Answer 5

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

Answer 6

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

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

Answer 7

2

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

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

Answer 8

2

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

Натан Х

Answer 9

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

mfnx

Answer 10

Это может помочь: 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%; 
}

Answer 11

2

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

медведь

Answer 12

2

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

Alexis Wilke

Answer 13

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

медведь

Answer 14

3

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

Адам

Answer 15

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

luismesas

Answer 16

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

Answer 17

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

height: calc(100vh - 33rem)

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

Answer 18

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

Rich Finelli

Answer 19

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

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

#fullHeight{

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

}

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

Ответы: