100% мінімальна висота CSS-макета

Який найкращий спосіб зробити елемент із мінімальною висотою 100% у широкому діапазоні браузерів?

Зокрема, якщо у вас є макет із headerта footerфіксованим height,

як змусити середню частину вмісту заповнити 100%простір посередині з footerфіксованим на дні?

Я використовую наступне: CSS Layout - 100% висота

Мінімальна висота

Елемент #container на цій сторінці має мінімальну висоту 100%. Таким чином, якщо вмісту потрібна більша висота, ніж передбачено вікно перегляду, висота #content змушує #container також стати довшою. Потім можливі стовпці в #content можна візуалізувати фоновим зображенням на #container; divs не є клітинками таблиці, і вам не потрібні (або потрібні) фізичні елементи для створення такого візуального ефекту. Якщо ви ще не впевнені; мислити хиткі лінії та градієнти замість прямих та простих кольорових схем.

Відносне позиціонування

Оскільки #container має відносне положення, #footer завжди залишатиметься внизу; оскільки мінімальна висота, згадана вище, не заважає #container зменшити масштаб, це буде працювати, навіть якщо (а точніше особливо, коли) #content змушує #container стати довше.

Прокладка-дно

Оскільки він більше не перебуває у нормальному потоці, то нижня частина #content тепер забезпечує простір для абсолютного # footer. Ця підкладка за замовчуванням включена у висоту прокрутки, щоб колонтитул ніколи не перекривав вищевказаний вміст.

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

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}

Добре працює для мене.

Щоб встановити власну висоту, десь заблоковану:

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}

<div id="outerbox">
  <div id="innerbox"></div>
</div>

Ось ще одне рішення, засноване на vh, або viewpoint height, для детальної інформації, відвідайте підрозділи CSS . Він заснований на цьому рішенні , яке замість цього використовує flex.

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    min-height: 100vh;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100vh; /* this helps with the sticky footer */
}
main {
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
	min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
	min-height:2.5em;
}

<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

Одиницями є vw, vh, vmax, vmin. В основному кожна одиниця дорівнює 1% розміру вікна перегляду. Отже, у міру зміни вікна перегляду браузер обчислює це значення та відповідно коригує його.

Ви можете знайти більше інформації тут:

Конкретно:

1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest

Відповідь kleolb02 виглядає досить добре. Іншим способом було б поєднання липкого нижнього колонтитула та мінімальної висоти

Для min-heightкоректної роботи з відсотками, успадковуючи цей батьківський вузол min-height, фокусом буде встановити висоту батьківського вузла, 1pxі тоді дитина min-heightбуде працювати правильно.

Демонстраційна сторінка

Чисте CSSрішення ( #content { min-height: 100%; }) буде працювати у багатьох випадках, але не у всіх, особливо в IE6 та IE7.

На жаль, вам потрібно буде вдатися до рішення JavaScript, щоб отримати бажану поведінку. Це можна зробити, обчисливши потрібну висоту вмісту <div>та встановивши його як властивість CSS у функції:

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

Ви можете встановити цю функцію в якості обробника onLoadі onResizeподій:

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>

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

Подумайте про це так, якщо ваш заголовок - висота 50px, а колонтитул - висота 50px, а вміст автоматично налаштовано на простір, наприклад 100px, а контейнер сторінки становить 100% від цього значення, його висота буде 200px. Тоді, коли ви встановите висоту бічної панелі на 100%, вона становитиме 200 пікселів, хоча вона повинна розміщуватися між заголовком і колонтитулом. Натомість він закінчується 50px + 200px + 50px, тому сторінка зараз становить 300px, оскільки бічні панелі встановлені на ту ж висоту, що і контейнер сторінки. У вмісті сторінки буде великий пробіл.

Я використовую Internet Explorer 9, і це те, що я отримую як ефект при використанні цього 100% методу. Я не спробував це в інших браузерах, і я припускаю, що він може працювати в деяких інших варіантах. але він не буде універсальним.

Спочатку слід створити за divдопомогою id='footer'свого contentdiv, а потім просто зробити це.

Ваш HTML повинен виглядати так:

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

І CSS:

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}

Спробуйте це:

body{ height: 100%; }
#content { 
    min-height: 500px;
    height: 100%;
}
#footer {
    height: 100px;
    clear: both !important;
}

divЕлемент нижче DIV контенту повинен мати clear:both.

Мабуть, найкоротше рішення (працює лише в сучасних браузерах)

Цей невеликий фрагмент CSS складає "the middle content part fill 100% of the space in between with the footer fixed to the bottom":

html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }

єдина вимога - вам потрібно мати колонтитул фіксованої висоти.

Наприклад для цього макета:

    <html><head></head><body>
      <main> your main content </main>
      </footer> your footer content </footer>
    </body></html>

вам потрібна ця CSS:

    html, body { height: 100%; }
    main { min-height: calc(100% - 2em); }
    footer { height: 2em; }

Ви можете спробувати це: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ Це 100% висота та горизонтальний центр.

просто поділіться тим, чим я користувався, і працює чудово

#content{
        height: auto;
        min-height:350px;
}

Як згадується у відповіді Афшина Мехрабані, слід встановити висоту тіла та html на 100%, але щоб отримати колонтитул там, обчисліть висоту обгортки:

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}