Как заставить блок DIV расширяться до нижней части страницы, даже если у него нет содержимого?

190

В разметке, показанной ниже, я пытаюсь заставить div содержимого растягиваться до конца страницы, но он растягивается только при наличии содержимого для отображения. Причина, по которой я хочу это сделать, заключается в том, что вертикальная граница по-прежнему отображается внизу страницы, даже если нет содержимого для отображения.

Вот мой HTML :

<body>
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content">
    </div>

И мой CSS :

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}
css  html  border 
— бритва
источник
Что вы хотите, чтобы он делал, если на странице больше контента, чем он может уместиться? Какие браузеры вас интересуют?
— drs9222

Ответы:

116

Ваша проблема не в том, что div не на высоте 100%, а в том, что вокруг него нет контейнера. Это поможет в браузере, я подозреваю, вы используете:

html,body { height:100%; }

Возможно, вам также потребуется настроить отступы и поля, но это даст вам 90% пути. Если вам нужно, чтобы он работал со всеми браузерами, вам придется немного позаботиться о нем.

На этом сайте есть несколько отличных примеров:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

Я также рекомендую пойти на http://quirksmode.org/

— Джейсон Эрнандес
источник
47
Это решение не подходит для прокручиваемых страниц.
— jbranchaud
3
Свойство min-height в CSS должно помочь ему ... Я думаю
— Alfabravo
1
Интересно, что это решило мои проблемы с прокруткой, а не вызвало их
— Алан Макдональд
Это не работает для меня в последней версии Chrome.
— HelloWorldNoMore
49

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

Сделайте так, чтобы div расширялся до нижней части страницы, если недостаточно содержимого для заполнения доступного вертикального окна просмотра браузера:

Демонстрация в (перетащите маркер рамки, чтобы увидеть эффект): http://jsfiddle.net/NN7ky
(верх: чистый, простой. Недостаток: требуется flexbox - http://caniuse.com/flexbox )

HTML:

<body>

  <div class=div1>
    div1<br>
    div1<br>
    div1<br>
  </div>

  <div class=div2>
    div2<br>
    div2<br>
    div2<br>
  </div>

</body>

CSS:

* { padding: 0; margin: 0; }

html, body {
  height: 100%;

  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

та-да - или я просто слишком сонный

— Gima
источник
14
Некоторым из нас повезло, что они поддерживают только «современные» браузеры, поэтому это было невероятно полезно для меня. Спасибо Гима. Я попробовал несколько способов сделать что-то подобное, но это всегда было сломано разными тонкими способами. Это намного лучше. До сих пор не совсем понимаю, почему это так работает.
— Крис Никола
1
Элемент Flexbox пытается разделить свою область содержимого между элементами в нем. Решение, которое я предложил, работает с помощью: 1) запрета сокращения div и 2) включения роста .div2. Следовательно, div не сжимается, чтобы скрыть свое содержимое, и только .div2 может расширяться.
— Гима
Таким образом, это устраняет проблему, с которой я столкнулся в Firefox, где контент все еще был слишком большим для браузера. К сожалению, в Chrome это само по себе не решает эту проблему. Однако, также установка поля и отступа в 0 делает.
— Майкл Шепер,
это правильный ответ, min-height: 100% работает только в том случае, если в родительском контейнере больше ничего нет, и calc не очень помогает, если у брата выше расширяющегося элемента неизвестная высота
— zakius,
После нескольких часов борьбы с этой проблемой, это единственное решение, которое действительно исправило это для меня. Не хватает только небольшого объяснения того, что делает каждая часть. Но в любом случае, большое спасибо @Gima.
— Пилунд
18

Попробуйте поиграться со следующим правилом CSS:

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

Измените высоту, чтобы соответствовать вашей странице. высота упоминается дважды для кросс-браузерной совместимости.

— Кевин Рид
источник
это работает, но я обнаружил, что если я увеличу минимальную высоту до более чем 600 пикселей, это создаст свиток. Не могли бы вы понять, почему это происходит?
— Сиддхарт Патель
1
@SiddharthPatel Потому что div #content переполняет родительский элемент. Поэтому установите для родительского элемента #content div значение переполнения: авто или переполнение: скрытое значение css, и оно должно расширяться / переполняться, чтобы соответствовать, а не прокручиваться. Возможно, в следующий раз было бы лучше задать такие вопросы, как новые вопросы, а не комментарии :)
— Colt McCormack
После попытки каждого метода ответа, это единственный, который работает. Даже это работает отлично, потому что я должен отрегулировать значение высоты, чтобы соответствовать высоте страницы, так что это требует настройки. Тем не менее, он работает одинаково для всех браузеров.
— ТАРКУС
Большое спасибо за этот ответ. Это просто и хорошо работает на нескольких платформах. Я действительно использовал это раньше, не осознавая, что около года назад, хотелось бы дважды поднять голос.
— vedi0boy
4

Попробуйте решение Райана Фейта "Sticky Footer",

http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Работает в IE, Firefox, Chrome, Safari и, предположительно, Opera, но еще не проверял это. Это отличное решение. Очень легко и надежно реализовать.

— Anjisan
источник
7
Ссылки вниз! Ссылки вниз!
— codemirror
3
Вот наши падшие братья 🍻
— Авраам Брукс
1
— c24w
3

Свойство min-height поддерживается не всеми браузерами. Если вам нужно #content увеличить высоту на более длинных страницах, свойство height сократит его.

Это немного хак, но вы можете добавить пустой div с шириной 1px и высотой, например, 1000px внутри вашего #content div. Это приведет к тому, что контент будет иметь высоту не менее 1000 пикселей и все же позволит более длинному контенту увеличивать высоту при необходимости.

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

Хотя это не так элегантно, как чистый CSS, небольшой кусочек javascript может помочь сделать это:

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
— Адам Франко
источник
3

Пытаться:

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

Еще не проверял ...

— Стеф
источник
3

Липкий нижний колонтитул с фиксированной высотой:

HTML схема:

<body>
   <div id="wrap">
   </div>
   <div id="footer">
   </div>
</body>

CSS:

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}
— Дэвид Хорак
источник
2

Пытаться http://mystrd.at/modern-clean-css-sticky-footer/

Ссылка выше не работает, но эта ссылка https://stackoverflow.com/a/18066619/1944643 в порядке. : D

Демо-версия:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="http://mystrd.at">
    <meta name="robots" content="noindex, nofollow">
    <title>James Dean CSS Sticky Footer</title>
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin: 0 0 100px;
            /* bottom = footer height */
            padding: 25px;
        }
        footer {
            background-color: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <article>
        <!-- or <div class="container">, etc. -->
        <h1>James Dean CSS Sticky Footer</h1>

        <p>Blah blah blah blah</p>
        <p>More blah blah blah</p>
    </article>
    <footer>
        <h1>Footer Content</h1>
    </footer>
</body>

</html>
— Виниций Хосе Латорре
источник
1
@codemirror спасибо, я только что отредактировал комментарий с другой работающей ссылкой.
— Виниций Хосе Латорре
1

Вы можете использовать единицу длины «vh» для свойства min-height самого элемента и его родителей. Это поддерживается начиная с IE9:

<body class="full-height">
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content" class="full-height">
    </div>
</body>

CSS:

.full-height {
    min-height: 100vh;
    box-sizing: border-box;
}
— Нико
источник
Это только растягивает div до высоты области просмотра, а не самой страницы.
— jansmolders86
1

Я думаю, что проблема была бы решена, просто заполнив HTML на 100%, возможно, тело заполняет 100% HTML, но HTML не заполняет 100% экрана.

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

html, body {
      height: 100%;
}
— Дэвид Марсиэль
источник
0

У меня нет кода, но я знаю, что однажды сделал это, используя комбинацию высоты: 1000 пикселей и поля-дна: -1000 пикселей; Попробуй это.

— Александр Морланд
источник
Вау, это на самом деле работает! Но если содержимое переполняет контейнер, невозможно увидеть переполненную часть ...
— adripanico
0

В зависимости от того, как работает ваш макет, вам может потребоваться установить фон для <html>элемента, который всегда равен по крайней мере высоте окна просмотра.

0

Это невозможно сделать, используя только таблицы стилей (CSS). Некоторые браузеры не принимают

height: 100%;

как более высокое значение, чем точка обзора окна браузера.

Javascript - это самое простое кросс-браузерное решение, хотя, как уже упоминалось, оно не является чистым или красивым.

— Мартин
источник
-2

Я знаю, что это не лучший метод, но я не мог понять это, не испортив свой заголовок, меню и т. Д. Итак ... Я использовал стол для этих двух столбцов. Это было быстрое решение. JS не требуется;)

— Вэнь-Д
источник
-2

Не самая лучшая и не лучшая реализация лучших стандартов, но вы можете изменить DIV для SPAN ... Это не очень рекомендуется, но быстрое исправление = P =)

— Metafaniel
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.