різниця між висотою css: 100% проти висоти: авто

167

Мене в інтерв'ю мені задали питання про те, "в чому різниця між css height:100%іheight:auto ?"

Чи може хтось пояснити?

css

— Гоусікан
джерело

236

height: 100% надає елементу 100% висоти його батьківського контейнера.

height: auto означає, що висота елемента буде залежати від росту його дітей.

Розглянемо наступні приклади:

висота: 100%

<div style="height: 50px">
    <div id="innerDiv" style="height: 100%">
    </div>
</div>

#innerDiv буде мати height: 50px

висота: авто

<div style="height: 50px">
    <div id="innerDiv" style="height: auto">
          <div id="evenInner" style="height: 10px">
          </div>
    </div>
</div>

#innerDiv буде мати height: 10px

— Маніш Мішра
джерело

5

Я думаю, що у випадку 'висота: auto #innerDiv буде 10px + the size it needs for its own content- дивіться цю jsfiddle

— BornToCode

@Manish Mishra: Який найкращий чуйний дизайн? Встановлення висоти дочірнього елемента або елемента контейнера і дозволити іншому отримати його висоту?

— Джон Строд

@Djack, все залежить від того, який вигляд, відчуття та поведінку ви очікуєте від свого дизайну на різних екранах, і відповідно ви пишете свій css. Не існує такого загального глобального правила, як setting the height of the child element or the container element. Ви можете робити все що завгодно, щоб досягти свого дизайну, за умови дотримання певної послідовності, уникаючи дублювання, зменшення повторної роботи, групування загальних макетів. Коротше кажучи, має бути система / схема для вашої роботи, щоб її легко читати і змінювати, і, звичайно, той факт, що вона працює

— Manish Mishra

2

Я думаю, що хороший спосіб думати про авто - це те, що ви «непорозуміли» висоту - це як би не встановити її.

— niico

1

Я змінив загадку, якою ділився BornToCode вище, щоб зробити більш очевидним, що autoзмушує елемент зростати, щоб розмістити ВІДМОВИЙ його вміст та вміст його дитини. На відміну від цього, значення фіксованої висоти не збільшує (або показує) вміст, який не може вміститися в межах оголошеної висоти. jsfiddle.net/m3f8y6xr/1 Я вважаю, що ця відповідь недостатньо сформульована для того, щоб зрозуміти, що елемент зростатиме, включаючи весь вміст, будь то його власний текст чи вміст дитини. Звичайно, можна стверджувати, що власний текст - це теж дитина. Це забезпечує візуальне підтвердження поведінки.

— SherylHohman

5

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

— Рохіт Азад
джерело

3

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

— goonerify

1

За замовчуванням знаходиться height: autoу браузері, але height: X%визначає висоту у відсотках, що містить блок.

— Вахід Гейдаринежад
джерело

0

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

— Чуквуемка
джерело