Как сделать высоту на весь экран css

CSS получить высоту разрешения экрана

Мне трудно получить высоту более низкого разрешения экрана, потому что мое разрешение экрана составляет 1920×1080.

Кто-нибудь знает, как получить высоту и ширину разрешения экрана?

Я проверил свою работу на разрешении 1024х768, и она все испортила.

9 ответов

Я работал над HTML5, javascript и CSS, и я хочу получить высоту экрана и установить высоту моего div соответственно в CSS только без использования javascript и jquery.. так что он подстраивается под любой экран. Я пробовал использовать height=100%, но он занимает высоту столько же, сколько и.

Я новичок в javafx. Можно ли динамически устанавливать предпочтительную ширину и высоту в файле fxml на основе разрешения экрана? Я знаю, как получить разрешение экрана и установить его на сцену: Screen screen = Screen.getPrimary(); Rectangle2D bounds = screen.getVisualBounds();.

Вы можете использовать длину видового экрана в процентах.

Это работает так:

Более подробная информация также доступна через Mozilla Developer Network и W3C .

Добавляя к ответу @Hendrik Eichler, n vh использует n% исходного содержащего блока окна просмотра.

Кроме того, высота окна просмотра предназначена для устройств любого разрешения, высота порта просмотра, ширина-один из лучших способов (аналогично дизайну css, использующему значения%, но основанному на высоте и ширине порта просмотра устройства)

vh
, равный 1% высоты начального содержащего блока окна просмотра.

vw
, равный 1% ширины исходного блока, содержащего окно просмотра.

vi
Равно 1% размера исходного содержащего блока в направлении встроенной оси корневого элемента.

vb
, равный 1% размера исходного содержащего блока, в направлении оси блока корневого элемента.

vmin
Равно меньшему из vw и vh.

vmax
Равно большему из vw и vh.

На самом деле вам не нужно разрешение экрана, вам нужны размеры браузера, потому что во многих случаях браузер оконный, и даже в максимальном размере браузер не будет занимать 100% экрана.

вам нужны View-port-height и View-port-width:

это приведет к отображению div с 50% высоты внутреннего браузера и 25% его ширины.

(честно говоря, этот ответ был частью того, что хотел сказать @Hendrik_Eichler, но он только дал ссылку и не затронул проблему напрямую)

Невозможно получить высоту экрана от CSS. Однако, используя с CSS3, вы можете использовать запросы media для управления отображением шаблона в соответствии с разрешением.

Если вы хотите кодировать на основе высоты, используя запросы media, вы можете определить таблицу стилей и назвать ее так.

Это может закончиться вопросом yes или no. Начиная с Nougat (может быть, marshmallow?), пользователи могут изменять размер дисплея своего устройства. В частности, на Galaxy S8 и S8+ пользователь может изменить разрешение дисплея. Я видел решения здесь: получить ширину и высоту экрана QUESTION.

.visitcard-ipcashier < position: fixed; background: white; top: 0; right: 0; height: 95%; overflow: auto; z-index: 50; >В приведенном выше коде я использую height atrribute в 93%., но это зависит от экрана. Как я могу получить высоту экрана в css?

Вы можете привязать текущую высоту и ширину экрана к переменным css: var(—screen-x) и var(—screen-y) с помощью этого javascript:

Это было непосредственно адаптировано из примера леа веру в ее выступлении о переменных css здесь: https://leaverou.github.io/css- переменные/#slide31

Вы можете довольно легко получить высоту окна в чистом CSS, используя единицы измерения "vh", каждая из которых соответствует 1% высоты окна. В приведенном ниже примере давайте начнем централизовать block.foo, добавив поле-верхнюю половину размера экрана.

Но это работает только для размера ‘window’. С мазком javascript вы можете сделать его более универсальным.

Этот код создаст переменную CSS с именем "—windowHeight", которая будет содержать высоту окна. Чтобы использовать его, просто добавьте правило:

И почему он более универсален, чем просто использование "vh" единиц? Потому что вы можете получить высоту любого элемента. Теперь, если вы хотите централизовать block.foo в любом container.bar, вы можете:

И, наконец, для того, чтобы он реагировал на изменения размера окна, вы можете использовать (в этом примере контейнер равен 50% высоте окна):

Для того, чтобы получить разрешение экрана, вы также можете использовать jquery . Эта ссылка очень поможет вам решить эту проблему.

Чтобы получить разрешение экрана, используйте Javascript вместо CSS: Используйте screen.height для высоты и screen.width для ширины.

Используйте высоту и ширину в процентах.

Похожие вопросы:

Кто-нибудь знает, как получить высоту экрана в сценарии Perl CGI? Я знаю, что Perl — это серверный язык, но есть ли какой-нибудь способ получить высоту экрана (пиксели) экрана пользователя? Спасибо

Я пытаюсь получить высоту экрана устройства, на котором работает приложение. Как бы я стал получать только высоту?

Возможный Дубликат : IPhone/IPad: как программно получить ширину экрана? Как получить зависящую от ориентации высоту и ширину экрана? Учитывая различные устройства и ориентации iOS, каков самый.

Я работал над HTML5, javascript и CSS, и я хочу получить высоту экрана и установить высоту моего div соответственно в CSS только без использования javascript и jquery.. так что он подстраивается под.

Я новичок в javafx. Можно ли динамически устанавливать предпочтительную ширину и высоту в файле fxml на основе разрешения экрана? Я знаю, как получить разрешение экрана и установить его на сцену.

Это может закончиться вопросом yes или no. Начиная с Nougat (может быть, marshmallow?), пользователи могут изменять размер дисплея своего устройства. В частности, на Galaxy S8 и S8+ пользователь.

.visitcard-ipcashier < position: fixed; background: white; top: 0; right: 0; height: 95%; overflow: auto; z-index: 50; >В приведенном выше коде я использую height atrribute в 93%., но это зависит.

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

Как применить стили для различных разрешений экрана Например: у меня есть компьютер с максимальным разрешением экрана 1366 X 768 , и я хочу указать css стилей только для этого разрешения . Css.

Я пытаюсь получить пропорцию экрана Это мой CSS, который я пытаюсь, но он не работает height: calc(50vw — calc(1vw / 1vh)*3); Как я могу разделить ширину экрана на высоту экрана? Спасибо

css — свободное — как сделать картинку по высоте экрана

Сделайте div, чтобы заполнить высоту оставшегося экрана. (20)

В настоящее время я работаю над веб-приложением, где хочу, чтобы контент заполнял высоту всего экрана.

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

У меня есть div и div . На данный момент я использую таблицу для компоновки следующим образом:

Вся высота страницы заполнена, и прокрутка не требуется.

Для чего-либо внутри содержимого div, установка top: 0; поместит его прямо под заголовком. Иногда контент будет реальной таблицей, а высота — 100%. Ввод header внутри content не позволит этому работать.

Есть ли способ добиться такого же эффекта без использования table ?

Обновить:

Элементы внутри содержимого div будут иметь значения высот и процентов. Так что что-то на 100% внутри div заполнит его до дна. Как и два элемента на 50%.

Обновление 2:

Например, если заголовок занимает 20% высоты экрана, таблица, указанная в 50% внутри #content , займет 40% экрана. Пока что обертывание всего предмета в таблице — единственное, что работает.

Отказ от ответственности: принятый ответ дает идею решения, но я нахожу его немного раздутым с ненужными правилами обертки и css. Ниже приведено решение с очень небольшим количеством правил CSS.

HTML 5

CSS

В приведенном выше решении используются блоки просмотра и http://caniuse.com/#feat=flexbox , и, следовательно, IE10 +, если вы используете старый синтаксис для IE10.

Codepen играть с: ссылка на codepen

Или этот, для тех, кому нужен основной контейнер для прокрутки в случае переполнения контента: ссылка на codepen

CSS только Подход (если высота известна / фиксирована)

Если вы хотите, чтобы средний элемент охватывал всю страницу по вертикали, вы можете использовать calc() которая вводится в CSS3.

Предполагая, что у нас есть фиксированный header и footer и мы хотим, чтобы тег section имел всю доступную вертикальную высоту .

Предполагаемая разметка

Поэтому ваш CSS должен быть

Итак, вот что я делаю, добавляя высоту элементов и вычитая из 100% используя функцию calc() .

Просто убедитесь, что вы используете height: 100%; для родительских элементов.

В CSS действительно нет звука, кросс-браузерного способа сделать это. Предполагая, что ваш макет имеет сложности, вам нужно использовать JavaScript для установки высоты элемента. Суть того, что вам нужно сделать, это:

Как только вы сможете получить это значение и установить высоту элемента, вам нужно прикрепить обработчики событий как к окну onload, так и к onresize, чтобы вы могли запустить функцию изменения размера.

Кроме того, если ваш контент может быть больше, чем область просмотра, вам нужно будет установить переполнение-y для прокрутки.

Винсент, я отвечу снова, используя ваши новые требования. Поскольку вам не нужно скрывать содержимое, если оно слишком длинное, вам не нужно плавать в заголовке. Просто поместите переполнение, скрытое в тегах html и body, и установите высоту #content на 100%. Содержимое всегда будет длиннее окна просмотра по высоте заголовка, но оно будет скрыто и не будет вызывать полосы прокрутки.

Для мобильного приложения я использую только VH и VW

Если вы не справитесь с поддержкой старых браузеров (то есть MSIE 9 или старше), вы можете сделать это с помощью http://caniuse.com/#feat=flexbox который уже является W3C CR. Этот модуль позволяет использовать и другие интересные трюки, такие как переупорядочение контента.

К сожалению, MSIE 9 или lesser не поддерживают это, и вам нужно использовать префикс поставщика для свойства CSS для каждого браузера, кроме Firefox. Надеюсь, что другие поставщики также скоро снимут префикс.

Другим выбором будет CSS Grid Layout, но это еще меньше поддерживает стабильные версии браузеров. На практике это поддерживает только MSIE 10.

Как насчет того, что вы просто используете vh который обозначает view height в CSS .

Посмотрите на фрагмент кода, который я создал для вас ниже, и запустите его:

Кроме того, посмотрите изображение ниже, которое я создал для вас:

Ни одно из выпущенных решений не работает, когда вам нужно, чтобы нижний div прокручивался, когда контент слишком высок. Вот решение, которое работает в этом случае:

Почему бы не просто так?

Давая вам html и body (в таком порядке) высоту, а затем просто придавайте вашим элементам высоту?

Работает для меня

Сейчас есть тонна ответов, но я нашел, используя высоту: 100vh; для работы над элементом div, который должен заполнить все доступное вертикальное пространство.

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

То, что сработало для меня (с div в другом div, и я предполагаю, что во всех других обстоятельствах), должно установить нижнее дополнение на 100%. То есть, добавьте это в свой css / stylesheet:

Фактически вы можете использовать display: table чтобы разделить область на два элемента (заголовок и содержимое), где заголовок может варьироваться по высоте, а контент заполняет оставшееся пространство. Это работает со всей страницей, а также когда область представляет собой просто содержимое другого элемента, расположенного с position установленной relative , absolute или fixed . Он будет работать до тех пор, пока родительский элемент имеет ненулевую высоту.

Это можно сделать исключительно с помощью CSS с помощью vh :

Я проверил его, он работает во всех основных браузерах: Chrome , IE и FireFox

Я искал для этого ответ. Если вам посчастливилось иметь возможность нацелить IE8 и выше, вы можете использовать display:table и связанные значения, чтобы получить правила рендеринга таблиц с элементами уровня блока, включая div.

Если вам даже повезло, и ваши пользователи используют браузеры верхнего уровня (например, если это приложение для интрасети на компьютерах, которыми вы управляете, как и мой последний проект), вы можете использовать новый макет гибкой коробки в CSS3!

Я нашел довольно простое решение, потому что для меня это была просто проблема дизайна. Я хотел, чтобы остальная страница не была белой под красным нижним колонтитулом. Поэтому я задал цвет фона страниц красным. И содержимое backgroundcolor белое. С высотой содержимого, установленной, например. 20 или 50% почти пустая страница не оставит всю страницу красной.

Простой способ CSS3

все основные браузеры в наши дни поддерживают его, поэтому продолжайте, если у вас нет требований к поддержке старинных браузеров.

Спрятав идею г-на Алиена .

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

Просто используйте min-height (вместо высоты) с calc () в блоке содержимого.

Calc () начинается со 100% и вычитает высоты верхних и нижних колонтитулов (необходимо указать значения заполнения)

Использование «min-height» вместо «height» особенно полезно, поэтому оно может работать с обработанным javascript контентом и фреймами JS, такими как Angular2. В противном случае вычисление не будет подталкивать нижний колонтитул к нижней части страницы после просмотра содержимого, отображаемого в javascript.

Вот простой пример верхнего и нижнего колонтитула с использованием высоты 50px и 20px padding для обоих.

Конечно, математика может быть упрощена, но вы получите идею .

он никогда не работал для меня иначе, чем с использованием JavaScript, как предлагалось NICCAI в самом первом ответе. Я использую этот подход для изменения масштаба <div> с помощью Google Maps.

Вот полный пример, как это сделать (работает в Safari / FireFox / IE / iPhone / Andorid (работает с вращением)):

Как сделать изображение на весь экран HTML?

Чтобы растянуть изображение на весь экран, ему необходимо задать min-height и width со значением 100%. А чтобы изображение не сжималось до размера меньшего, чем оригинальный, установим min-width со значением равным ширине картинки.

Как сделать div на всю ширину страницы?

Растянуть блок на всю ширину и высоту окна браузера можно с помощью:

  1. position: fixed; . Пример: онлайн линейка. &#8230;
  2. единиц vw и vh div
  3. начальной width и height тега html . По умолчанию height любого тега, в том числе html и body , равна его содержимому.

Как расширить картинку в html?

Для изменения размеров рисунка средствами HTML у тега предусмотрены атрибуты width (ширина) и height (высота). В качестве значения используются пикселы, при этом аргументы должны совпадать с физическими размерами картинки.

Как сделать фоновую картинку в HTML?

Фон на веб-странице

  1. Установка фонового рисунка на веб-страницу традиционно происходит через атрибут background тега . &#8230;
  2. Добавление рисунка происходит путем установки адреса картинки через ключевое слово url.

Как растянуть картинку на весь экран в ворде?

Для этого зажимаем на нем левой кнопкой мыши и тащим его к углу, чтоьы занял там все пространство. Затем наводим на противоположный угол изображения и начинаем тянуть за кончик, тем самым увеличивая картинку. Нам важно, чтобы весь лист был залит фоном, это значит, что частью фотографии можно будет немного пожертвовать.

Как растянуть картинку на весь экран в игре?

Если ее нет, то попробуйте нажать правой кнопкой мыши по рабочему столу и найти этот пункт в выпадающем меню. Если и там вы его не обнаружите, то попробуйте посмотреть в панели управления. В окне программы выберите пункт «Регулировка размера и положения рабочего стола». Включите пункт «Во весь экран».

Как сделать чтобы сайт был на весь экран?

Смотрите сайты в полноэкранном режиме без всяких панелей инструментов и меню браузеров, нажав клавишу F11. Чтобы восстановить окно обратно в обычный режим нажмите клавишу F11 еще раз. В браузере Opera можно включить полноэкранный режим просмотра нажатием правой кнопки мыши и появившегося меню выбрать «Во весь экран».

Как сделать изображение на весь экран CSS?

Чтобы растянуть изображение на весь экран, ему необходимо задать min-height и width со значением 100%. А чтобы изображение не сжималось до размера меньшего, чем оригинальный, установим min-width со значением равным ширине картинки.

Как прижать footer к низу страницы?

Footer прижимается вниз путем его абсолютного позиционирования и вытягивания высоты родительских блоков (html, body и . wrapper) на 100%. При этом контентному блоку . content нужно указать нижний отступ, который равен или больше высоты подвала, иначе последний закроет часть контента.

Как задать размер страницы в HTML?

Что нужно прописать CSS для того, чтобы уменьшить масштаб HTML страницы? В браузере можно сделать так: нажать последовательно CTRL и &#8212; . После этого масштаб страницы уменьшится с сохранением ширины документа.

Как изменять размер картинки в CSS?

Чтобы изменить размера изображения в html средствами css используются свойства width(ширина) и height(высота) внутри атрибута style. Вы можете написать только width или height, и оставшееся неуказанное значение автоматически изменится с сохранением пропорций картинки.

Как сделать картинку в html?

Для добавления изображения в документ применяется тег , его атрибут src определяет путь к графическому файлу, который должен быть в формате GIF, PNG или JPEG.

Какой атрибут используется для отражения фонового рисунка?

HTML картинка &#8212; фон определяется с помощью атрибута background-image и картинки.

Как вставить картинку в html в блокноте?

Для добавления картинки на HTML-страницу используется тег IMG. Поддерживаются форматы изображений: PNG, GIF и JPEG. К обязательным атрибутам тега относится атрибут src, в котором указывается адрес файла с изображением.

Как изменить цвет текста в HTML?

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font.
&#8230;
Атрибуты тега FONT

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *