Відсоток висоти HTML 5 / CSS

176

Я намагаюся встановити <div>у CSS певний відсоток висоти, але він просто залишається такого ж розміру, як вміст всередині нього. <!DOCTYTPE html>Однак, коли я видаляю HTML 5 , він спрацьовує, <div>займаючи всю сторінку за бажанням. Я хочу, щоб сторінка була перевірена, і що мені робити?

У мене є цей CSS на <div>, у якого є ідентифікатор page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

html css height

— Д. Строут
джерело

3

Ось просте і зрозуміле пояснення властивості CSS heightз відсотковими значеннями: stackoverflow.com/a/31728799/3597276

— Майкл Бенджамін

звертається до проблеми DOCTYPE: stackoverflow.com/a/32215263/3597276

— Michael Benjamin

371

Я намагаюся встановити div на певну висоту відсотків у CSS

Відсоток чого?

Для встановлення відсоткової висоти його батьківський елемент (*) повинен мати явну висоту. Це досить очевидно, оскільки, якщо ви залишите висоту як auto, блок буде приймати висоту свого вмісту ... але якщо сам вміст має висоту, виражену у відсотках від батьків, ви трохи зробили себе Лов 22. Браузер здається та просто використовує висоту вмісту.

Отже, батько діва повинен мати явну heightвластивість. Хоча ця висота також може бути відсотковою, якщо ви хочете, це просто пересуває проблему до наступного рівня.

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

(*: або, якщо знак розміщений, "містить блок", який також має бути розташований найближчим предком.)

Крім того, усі сучасні браузери та IE> = 9 підтримують нові CSS-одиниці щодо висоти вікна перегляду ( vh) та ширини вікна перегляду ( vw):

div {
    height:100vh; 
}

Дивіться тут для отримання додаткової інформації .

— бобінець
джерело

Хоча це і не працює для портретної орієнтації екрана stackoverflow.com/questions/23198237 / ...

— Dchris

1

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

— MG Developer

69

Вам також потрібно встановити висоту <html>і на <body>елементів; інакше вони будуть лише досить великими, щоб вмістити вміст. Наприклад :

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

Розгорніть фрагмент

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

6

¬_¬ Знадобилося 20 хвилин, щоб зрозуміти, що я повинен встановити висоту документа також на 100%. Я прочитав це трохи пізно, але все-таки дуже блискуче. зітхання

— omninonsense

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

— codefreaK

Я згоден, це правильна відповідь, висота не працює, тому що потрібно встановити батьківський елемент body та html. Ця відповідь має бути прийнятою відповіддю.

— MG Developer

Це не правильна відповідь - якщо вміст більше, ніж буде відповідати висоті екрана, решта вмісту все одно більше не видно, таким чином висота НЕ встановлена на 100% вікна браузера, а знову на 100% змісту. Це, можливо, не логічно, але саме це відбувається у двох основних браузерах, Firefox та Chrome - просто спробуйте. Таким чином, прийнята відповідь є єдино правильною.

— непдев

15

Відповідь bobince дасть вам знати, в яких випадках "висота: XX%;" буде чи не буде працювати.

Якщо ви хочете створити елемент із встановленим співвідношенням (висота:% власної ширини), найкращий спосіб зробити це - ефективно встановити висоту за допомогою padding-bottom. Приклад для квадрата:

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

Квадратний контейнер буде просто виготовлений з прокладки, а вміст розшириться, щоб заповнити контейнер. Довга стаття з 2009 року на цю тему: http://alistapart.com/article/creating-intrinsic-ratios-for-video

— Олександр Пономаренко
джерело

це чудово працює. Він також швидко відчуває себе у веб-переглядачі, змінюючи розмір сторінки, що містить 100+ елементів. Дякую!

— декан гранд

5

Можна використовувати 100vw / 100vh. CSS3 дає нам одиниці відновлення до огляду. 100vw означає 100% ширини огляду. 100vh; 100% висоти.

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>

— Ахмад Агазаде
джерело

4

Привіт! Щоб використовувати відсоток (%), потрібно визначити% його батьківського елемента. Якщо ви використовуєте тіло {зріст: 100%}, воно не працюватиме, оскільки у батьків немає відсоткового зростання. У такому випадку, щоб працювати на тій висоті тіла, потрібно додати це в html {висота: 100%}

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

кузов {зріст: 100vh}

vh означає висоту вікна перегляду

Я думаю, що це допомагає

— М. А. Барик
джерело

2

Іноді ви можете умовно встановити висоту знака, наприклад, коли весь вміст менше висоти екрана. Якщо встановити всі батьківські елементи на 100%, вимкніть вміст, якщо він довший за розмір екрана.

Отже, спосіб обійти це встановлення мінімальної висоти:

Продовжуйте дозволяти батьківським елементам автоматично регулювати свою висоту. Потім у вашому головному розділі віднімайте розміри пікселів заголовка та ділянки нижнього колонтитула від 100vh (одиниць перегляду). У css щось на кшталт:

мінімальна висота: calc (100vh - 246px);

100vh - повна довжина екрана, мінус навколишні діви. Встановлюючи мінімальну висоту, а не висоту, вміст довше екрана продовжуватиме витікати, замість того, щоб відрізати.

— Яхмічний
джерело