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

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

173 голосов
/ 29 сентября 2008

В разметке, показанной ниже, я пытаюсь заставить 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;
}

Ответы [ 18 ]

1 голос
/ 04 августа 2013

Попробуйте 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>
0 голосов
/ 10 марта 2016

Вы можете использовать единицу длины "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;
}
0 голосов
/ 29 сентября 2008

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

0 голосов
/ 08 июня 2012

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

0 голосов
/ 02 декабря 2011

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

0 голосов
/ 28 сентября 2011

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

height: 100%;

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

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

0 голосов
/ 29 сентября 2008

Также вам может понравиться это: http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

Это не совсем то, что вы просили, но это также может удовлетворить ваши потребности.

0 голосов
/ 23 февраля 2009

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

Страница:
...