Вопрос по css – Установка 100% высоты для абсолютно позиционированного элемента, когда содержимое расширяется за размер окна

9

Поэтому после прочтения Stack Overflow и веба я понял, что есть два основных способа достижения 100% высоты:

Set height:100% on both the HTML and BODY Set your element to have either: height:100%, or top:0, bottom:0, position:absolute

Однако даже с этими приемами у меня возникают трудности с установкой высоты абсолютно позиционированного DIV на истинные 100%. Я могу получить 100% размера области просмотра, но если пользователь прокручивает страницу вообще, становится очевидно, что div действительно не имеет 100% высоты.

Я сделал простую JS Fiddle из ситуации здесь: http://jsfiddle.net/9FEne/

Мой вопрос: знает ли кто-нибудь еще какие-нибудь хитрости, чтобы получить истинный (то есть, content-height, а не viewport-height) абсолютный позиционный div с высотой 100%?

position: relative? top: 0; bottom:0 будет иметьno эффект на относительно позиционированный элемент. animuson♦
@Interstellar_Coder, нет, это не так ... :) Prestaul
Ну, может быть, этот подход должен был использовать положение: абсолютное. Я просто знаю эту позицию: абсолют не работает для меня, но я где-то видел технику top: 0 / bottom: 0 ... machineghost
@Interstellar_Coder, это совсем не то, что мы говорим. Установка его на что-либо не влияет на относительно позиционированные элементы. По умолчанию они имеют значение «авто» (не ноль) и установка их на ноль (или что-либо еще) имеет эффект, но только если вы используете положение & quot; absolute & quot; или "исправлено". Prestaul
Я думаю, что я хотел сказать, вы все еще можете применитьtop, left и т.д. свойства относительно позиционированных элементов. Я думаю, что вы пытаетесь сказать, что установка его0 не будет иметь никакого эффекта, поскольку в любом случае он находится в нормальном потоке. aziz punjani

Ваш Ответ

3   ответа
11

я пропустил настоящий вопрос раньше и подумал, что вы хотите, чтобы окно было заполнено. Если проблема в том, что содержимое длиннее окна, то вам нужно добавитьposition:relative к телу.http://jsfiddle.net/9FEne/7/

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

Это действительно не работает, если отсутствует или слишком мало контента, чтобы заполнить высоту экрана. Вы также можете добавитьheight: 100%; на обоихbody а такжеhtml элементы.
4

чтобы назначить высоту и ширину, равные высоте документа и ширине окна соответственно; Я изменил ваш jsfiddle, чтобы продемонстрировать его здесь:

http://jsfiddle.net/9FEne/1/

Это вопрос CSS, а не вопрос Javascript ...
Это достаточно справедливо, но это не сложно решить с помощью css, и добавление javascript в микс приводит к другим проблемам ... Например. что происходит, когда пользователь изменяет размер своего браузера?
Вы оба правы: я искал чисто CSS-решение, но я никоим образом не указывал это прямо в исходном вопросе. Я по-прежнему предпочитаю чисто CSS-решение, но так как оно еще не появилось, похоже, что JS может быть единственным способом. machineghost
На самом деле, если вы читаете его вопрос, нет ничего намекающего на тот факт, что его решение должно быть только для CSS. Фактически это звучит так, как будто он исчерпал css и все еще нуждается в желаемом результате. Не уверен, почему другое решение стоит -1 ... кажется, что было бы лучше, чтобы все варианты были представлены, нет?
7

var h = $(window).height();
$('#yourdiv').height(h);
Это вопрос CSS, а не вопрос JavaScript.
Вы можете легко определить, когда размер окна изменяется с помощью jQuery, используя метод resize ().
Кроме того, вы пропустили суть его вопроса. Он не хочет размера окна. Он хочет измерить содержание своего документа.
Хорошо, вы спросили, были ли "какие-либо дальнейшие уловки". JavaScript мог бы дать простое решение этой проблемы.
Я скажу то же самое, что я сказал OnResolve: это достаточно справедливо, но это не сложно решить с помощью css, и добавление javascript в смесь создает другие проблемы ... Например, что происходит, когда пользователь изменяет размер своего браузера?

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