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

Question

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

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

}

1787 18

html css border

18 ответов:

Comments

Ничего не найдено.

Jason Hernandez · Accepted Answer · 2017-04-10 10:30:55

ваша проблема не в том, что 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/

Gima · Accepted Answer · 2014-06-02 05:08:51

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

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

демо на (перетащите ручку кадра, чтобы увидеть эффект):http://jsfiddle.net/NN7ky
(вверх: чистый, простой. недостаток: требует адаптируемых блоков - 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;
}
та-да - или я просто слишком сонный

Kevin Read · Accepted Answer · 2013-11-27 01:47:59

попробуйте поиграть со следующим правилом css:
#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}
измените высоту в соответствии с вашей страницей. высота упоминается дважды для кросс-браузерной совместимости.

Owen · Accepted Answer · 2008-09-29 07:44:24

вы можете своего рода взломать его с помощью мин-высота декларация
<div style="min-height: 100%">stuff</div>

Anjisan · Accepted Answer · 2009-07-26 02:44:10

попробуйте "липкий нижний колонтитул" Райана Фейта,

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

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

Gene · Accepted Answer · 2008-09-29 10:00:54

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

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

Adam Franco · Accepted Answer · 2008-09-30 06:39:18

хотя это не так элегантно, как чистый 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>

Steph · Accepted Answer · 2013-11-26 23:03:28

попробуй:

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

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

David Horák · Accepted Answer · 2013-11-26 23:14:30

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

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;
}

David Marciel · Accepted Answer · 2016-08-08 11:38:24

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

попробуйте с помощью:
html, body {
      height: 100%;
}

Vinicius José Latorre · Accepted Answer · 2018-06-01 06:15:39

попробуйте http://mystrd.at/modern-clean-css-sticky-footer/

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

Demo:

<!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>

Dan · Accepted Answer · 2008-09-29 07:46:43

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

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

Alexander Morland · Accepted Answer · 2008-09-29 10:19:14

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

score 0 · Accepted Answer · 2009-02-23 21:29:45

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

Martin · Accepted Answer · 2011-09-28 12:51:08

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

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

Nico · Accepted Answer · 2016-03-10 17:40:03

вы можете использовать единицу длины "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;
}

Wen-D · Accepted Answer · 2011-12-02 19:30:08

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

Metafaniel · Accepted Answer · 2012-06-08 20:25:48

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