Для розширення div на всю висоту

80

Чи є метод, який я можу використовувати для розширення div на всю висоту? У мене також є липкий нижній колонтитул.

Ось веб-сторінка: Веб-сайт видалено . Середній біт, про який я кажу, - це білий div, midcontent, який має значення CSS:

.midcontent{
     width:85%;
     margin:0 auto;
     padding:10px 20px;
     padding-top:0;
     background-color:#FFF;
     overflow:hidden;
     min-height:100%;
     max-width:968px; 
     height:100%;
}

Так що так, очевидно height:100%, не спрацювало. Крім того, ВСІ батьківські контейнери мають встановлену висоту.

Ось загальна структура

<body>
    <div id="wrap">
        <div id="main">
            <div class="headout">
                <div class="headimg"></div>
            </div>
            <div class="midcontainer"></div>
        </div>
    </div>
    <div id="footer">
        <div class="footer"></div>
    </div>

css xhtml html

— ведмідь
джерело

Це ДУЖЕ поширене запитання, ваше рішення майже напевно знайдеться в інших відповідях: stackoverflow.com/search?q=css+div+100 або stackoverflow.com/search?q=css+div+height

— Бен

2

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

— ведмідь

1

Я не впевнений, чи ваше питання досить чітке. Ви шукаєте щось, що змушує "midcontainer" займати весь простір, що залишився між "headout" і "footer"? Бо це, безумовно, не дорівнює 100%

— цезарсалазар

138

Ви пам'ятали, як встановлювали висоту тегів html і body у своєму CSS? Як правило, я отримав DIV для розширення на повний зріст:


<html>
  <head>
    <style type="text/css">

      html,body { height: 100%; margin: 0px; padding: 0px; }
      #full { background: #0f0; height: 100% }

    </style>
  </head>
  <body>
    <div id="full">
    </div>
  </body>
</html>

— Том
джерело

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

— Sodiumitrate

2

Я вважаю, що код правильний, але питання неправильне: він повинен запитати, чи встановлюєте ви теги body і html на 100%. Тому що тег html також може по-різному впливати на результат ...

— Alexis Wilke

2

Здається, html 100% захоплює лише видимий екран. Використовуючи chrome devtool, коли я вибираю елемент "html", він закінчується в кінці видимої сторінки, коли я прокручую вниз, ніби це вже не частина <html>

— Nathan H

як щодо використання vh?

— mfnx

38

Це може допомогти: http://www.webmasterworld.com/forum83/200.htm

Відповідна цитата:

Більшість спроб зробити це було зроблено шляхом присвоєння властивості та значення: div {висота: 100%} - це одне не буде працювати. Причина полягає в тому, що без визначеної батьком висоти div {height: 100%;} не має на що враховувати 100% відсотків, і за замовчуванням буде мати значення div {height: auto;} - auto є "як необхідне значення" ", що регулюється фактичним вмістом, так що div {висота: 100%} буде = = поширюватися лише на стільки, скільки вимагає вміст.

Рішення проблеми знайдено шляхом присвоєння значення висоти батьківському контейнеру, в даному випадку елементу body. Запис вашого тіла в стилі з урахуванням висоти на 100% забезпечує необхідне значення.
html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}

— Брайан Клаппер
джерело

2

Привіт, у всіх батьків є контейнери height:100%.

— ведмідь

2

@Shamil, Усі батьки, включаючи тег html? Можливо, це була ваша проблема. Я найчастіше забуваю про тег html як графічний тег.

— Alexis Wilke,

@AlexisWilke так, це було - рідко я не включаю теги html

— нести

3

Включаючи тег форми на мій подив

— Адам

ключовим елементом є 100% висота на тілі І теги html

— luismesas

9

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

— Френк Леммер
джерело

2

У випадку, якщо встановлення висоти html і тіла на 100% робить все для вас неприємніше, як це було для мене, мені працювало наступне:

height: calc(100vh - 33rem)

- 33rem висота елементів , що надходять після того, як той , який ми хочемо взяти повний зріст, тобто, 100vh. Віднімаючи висоту, ми переконаємося, що немає переповнення, і вона завжди буде реагувати (припускаючи, що ми працюємо з rem замість px).

— Джохат
джерело

Просто переконайтеся, що не робите height: calc(100vh -33rem)там, де від’ємний знак торкається значення, оскільки це буде недійсним CSS. Також 33rem також можна замінити піксельним значенням.

— Rich Finelli

1

якщо встановлення висоти 100% не працює, спробуйте min-height = 100% для div. Вам все ще потрібно встановити тег html.

html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
}

#fullHeight{

    width: 450px;
    **min-height: 100%;**
    background-color: blue;

}

— Димитріс Кремезіс
джерело