Як змусити блок DIV поширитись на нижню частину сторінки, навіть якщо він не містить вмісту?

190

У розмітці, показаній нижче, я намагаюся змусити розділити вміст, щоб він розтягнувся до кінця сторінки, але він розтягується лише за наявності вмісту для відображення. Я хочу це зробити, тому що вертикальна рамка все ще з’являється внизу сторінки, навіть якщо немає вмісту для відображення.

Ось мій 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
властивість мінімальної висоти в CSS має допомогти йому вийти ... Я здогадуюсь
— Alfabravo
1
Цікаво, що це сортувало мої проблеми з прокруткою, а не викликаючи їх
— Алан Макдональд
Для мене це не працює в останній версії хрому.
— HelloWorldNoMore
49

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

Запропонуйте діві розширити внизу сторінки, якщо не вистачає вмісту для заповнення доступного вертикального вікна перегляду браузера:

Демонстрація в (перетягніть ручку кадру, щоб побачити ефект): 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;
}

та-да - або я просто занадто сонний

— Гіма
джерело
14
Деяким з нас пощастило підтримувати лише "сучасні" браузери, тому це було мені надзвичайно корисно. Спасибі Гіма Я спробував кілька способів зробити щось подібне, але це завжди було порушено різними тонкими способами. Це набагато краще. Досі точно не розумію, чому це працює саме так.
— Кріс Нікола
1
Елемент Flexbox намагається розділити область вмісту між елементами в ньому. Я запропонував рішення: 1) заперечувати скорочення дівок та 2) дозволяти вирощувати .div2. Отже, divs не стискаються, щоб приховати їх вміст, і лише .div2 дозволено розширювати.
— Гіма
Таким чином, це вирішує проблему, яку я мав у Firefox, де вміст був ще занадто великий для браузера. На жаль, у Chrome це лише не вирішує цю проблему. Однак, також встановлення поля та прокладки до 0 робить.
— Майкл Шепер
це правильна відповідь, мінімальна висота: 100% працює лише в тому випадку, якщо в батьківському контейнері немає нічого більшого, і calc насправді не допомагає, якщо брати над елементом, що розширюється, мають невідому висоту
— zakius
Після години боротьби з цим питанням, це єдине рішення, яке насправді вирішило для мене. Лише пропущене трохи пояснення того, що робить кожна частина. Але все одно, дуже дякую @Gima.
— пілунд
18

Спробуйте пограти з наступним правилом css:

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

Змініть висоту відповідно до вашої сторінки. висота згадується двічі для сумісності браузера.

— Кевін Читай
джерело
це працює, але я виявив, що якщо збільшити мінімальну висоту до більш ніж 600 пікс, це створить прокрутку. Чи мали б ви уявлення, чому це відбувається?
— Сіддхарт Патель
1
@SiddharthPatel Оскільки #content div переповнює його батьків. Таким чином, встановіть батьків #content div мати переповнення: auto або overflow: приховане значення css, і воно повинно розширюватися / переповнюватися, щоб відповідати, а не прокручувати. Напевно, краще буде поставити такі запитання як нові запитання наступного разу, а не коментарі :)
— Кольт Маккормак
Після випробування методу кожної відповіді це єдиний, який працює. Навіть це працює чудово, тому що я повинен налаштувати значення висоти відповідно до висоти сторінки, тому це потребує налаштування. Однак це працює однаково для всіх браузерів.
— ТАРКУС
Дуже дякую за цю відповідь. Це просто і добре працює на декількох платформах. Я фактично використовував це раніше, не усвідомлюючи близько 1 року тому, хотів би, щоб я міг підняти два рази.
— 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

Властивість мінімальної висоти підтримується не в усіх браузерах. Якщо вам потрібен ваш #content, щоб збільшити його висоту на довших сторінках, властивість висоти скоротить його.

Це трохи хак, але ви можете додати порожній 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 дякую, я щойно відредагував коментар за іншим посиланням, яке працює.
— Vinicius José Latorre
1

Можна використовувати одиницю довжини "vh" для властивості мінімальної висоти самого елемента та його батьків. Він підтримується з 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;
}
— Ніко
джерело
Це розтягує діл лише на висоту вікна перегляду, а не на саму сторінку.
— jansmolders86
1

Я думаю, що проблема буде виправлена ​​лише змушенням html заповнити 100% також, можливо, тіло заповнює 100% html, але html не заповнює 100% екрану.

Спробуйте: 

html, body {
      height: 100%;
}
— Девід Марсіел
джерело
0

У мене немає коду, але я знаю, що робив це один раз, використовуючи комбінацію висоти: 1000px та margin-bottom: -1000px; Спробуйте це.

— Олександр Морланд
джерело
Ого, це насправді працює! Але якщо вміст переповнює контейнер, побачити переповнену частину
— неможливо
0

Залежно від того, як працює ваш макет, ви можете уникнути, встановивши фон на <html>елементі, який завжди є принаймні висотою вікна перегляду.

0

Це неможливо досягти, використовуючи лише таблиці стилів (CSS). Деякі браузери не приймуть

height: 100%;

як більш високе значення, ніж точка огляду вікна браузера.

Javascript - це найпростіше рішення для перехресних веб-переглядачів, хоча, як було сказано, не чисте чи красиве.

— Мартін
джерело
-2

Я знаю, що це не найкращий метод, але я не міг це зрозуміти, не псуючи свій заголовок, меню тощо. Отже .... я використав таблицю для цих двох колон. Це було Швидке виправлення. Не потрібно JS;)

— Вень-Д
джерело
-2

Не найкраща чи найкраща реалізація найвищих стандартів, але ви можете змінити DIV на SPAN ... Це не так рекомендується, але швидко виправити = P =)

— Метафаніел
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.