100% высота div в angularjs (проблема с номером класса ng)

Я хочу поставить 100% -ное изображение высотой на моей первой странице, которое заполняет весь экран, а затем отображать другие изображения и текст при прокрутке. Я последовал за это руководство, чтобы сделать так:100% высота div в angularjs (проблема с номером класса ng)

Демо: http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

Объяснение: http://www.minimit.com/articles/solutions-tutorials/fullscreen-backgrounds-with-centered-content

Вопрос заключается в том, что, насколько я понимаю, если вы хотите иметь DIV, который 100%, то высота окна браузера, вы должны дать 100% высоты всем своим родительским элементам. Поэтому, чтобы сделать эту работу в angularjs, я дал 100% высоты html, body и ng-scope (с использованием min-height: 100% не работает).

Проблема в том, что наличие высоты: 100% в классе ng-scope приводит к некоторому нежелательному поведению. Например, если я хочу добавить нижний колонтитул (который является статичным, вне директивы ng-view), нижний колонтитул отображается сразу после первой 100% высоты, вместо того, чтобы появляться в конце страницы, что-то вроде того, что я имитировал здесь:

http://jsfiddle.net/x3zbufhk/

путем моделирования класса нг-рамки с:

#ng-scope { 
    height: 100%; 
    background-color:red; 
}

Итак, есть ли какой-либо способ, имеющий 100% высоты дивы в angularjs без изменения высоты нг-рамки?

Большое спасибо!

EDIT: На 100% высота div, я имею в виду div, на 100% высоту окна браузера.

источник

2015-01-04 user1294122

100% высота = 100% высота документа? – tom10271

Да, извините, потому что это, вероятно, неясно. Я хочу, чтобы div, на 100% превышающий высоту браузера. Спасибо! – user1294122

Веб-сайт minimit не загружается для меня. Вы ищете что-то вроде [этого] (http://jsfiddle.net/x3zbufhk/1/)? С другой стороны, использование '# ng-scope' - это идентификатор' ng-scope', а не класс. –

Просто используйте min-height: 100% вместо height: 100% на #ng-scopeFIDDLE

источник

2015-01-04 20:27:01 Anubhav

Эй, спасибо большое. По какой-то причине использование min-height в .ng-scope не работает, чтобы сделать изображение на 100% размером окна (после учебника, который я связал), но вы совершенно правы, он работает с текстом, который я использовал для имитации проблема в скрипке. Позвольте мне попытаться выяснить, почему ... – user1294122

Это немного Hacky, а не полностью ответить на ваш вопрос (как это сделать, не изменяя нг-диапазон), но она работает.

html, body, .ng-scope { 
    height: 100%; 
}

Или с Bootstrap

html, body, .ng-scope, .container-fluid, .row { 
    height: 100%; 
}

источник

2015-03-03 04:34:31 jmknoll

Вот как я установил эту проблему при использовании Wijmo FlexGrid и AlgularJS.

Я пытаюсь отредактировать многострочный текстовый ящик в ячейке моей сетки. Когда я перехожу в режим редактирования, wijmo вставляет div вокруг моего текстового поля с классом ng-scope. Как вы заметили изменение размеров .ng-scope {height: 100%} с помощью всей вашей страницы. Если вы используете инструменты F12/Developer в своем браузере, вы можете проверить элементы вокруг атрибута, который вы пытаетесь изменить. В моем случае это выглядело так:

виновный ДИВ был нг-сфера, которая имела высоту 144px.

Я добавил на свой сайт.css переопределение, основанное на вложенном классе .wj-cell.нг-сфера

Это будет изменять только нг-сферу, когда его родитель имеет класс WJ-клетки.

источник

2016-10-19 18:58:54

100% высота div в angularjs (проблема с номером класса ng)

ответ

Смежные вопросы