Изменить высоту div в соответствии с внешним div в angularJS

У меня есть div с гибкой высотой и два div внутри него. Первый имеет фиксированную высоту 60 пикселей, высота второго должна содержать всю остальную левую область внутри внешнего div. Мне нужен ответ angularJS, а не сам JavaScript или JQuery

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

Был бы признателен за любой ответ или предложение.

HTML-код

<div ng-app = "myApp" id = "outer" ng-style = "styleOuter()">
   <div id = "first" style = "height: 60px">first content</div>
   <div id = "second" ng-style = "style()">second content</div>
</div>

Внешний элемент div: функция styleOuter() в каталоге angularJS устанавливает высоту внешнего элемента div на "windowSize-100px"

Первый div: фиксированная высота (60 пикселей).

Второй элемент div: функция style() в каталоге angularJS должна установить высоту второго элемента div на "outerDivSize - 60px"


angularjs angularjs-directive angularjs-scope
person pixelll    schedule 19.07.2013    source источник
comment
Это вопрос CSS, не связанный с Angular JS. Вы можете сделать это, абсолютно позиционируя элементы.   -  person ŁukaszBachman    schedule 19.07.2013
comment
Вы не можете использовать проценты, потому что есть два div, первый фиксированный, второй гибкий. Если вы попытаетесь установить процентный размер для второго div, возникнет проблема. Когда размер внешнего div изменяется, второй div должен быть изменен в соответствии с внешним div, первый не будет. Я не могу использовать абсолютное позиционирование, потому что внешний div будет меняться в зависимости от размера окна.   -  person pixelll    schedule 19.07.2013
comment
Это то, что вам нужно? jsfiddle.net/Bg8Us   -  person ŁukaszBachman    schedule 19.07.2013
comment
абсолютная позиция внешнего div неизвестна. Может быть, это 30 пикселей сверху, может быть, 60 или 200 пикселей. Из-за этого я не могу использовать div с абсолютным позиционированием. Высота и положение внутренних элементов div должны быть установлены только в соответствии с высотой и положением внешних элементов div.   -  person pixelll    schedule 19.07.2013
comment
Спасибо за ваш комментарий   -  person pixelll    schedule 19.07.2013

Ответы (2)


arrow_upward
1
arrow_downward

Я публикую это решение в качестве ответа. Это вторая версия Fiddle, которую я разместил ранее в комментарии.

Прости, @pixelll, но я почти уверен, что ты слишком много думаешь. Если вы знаете размер внешнего div (windowSize-100px) и фиксированного div (height: 60px), то единственное, что вам нужно сделать для внутреннего div, это установить позицию CSS его родителя на любое (это, создание новый контекст позиционирования), и в этом новом контексте вы должны обязательно позиционировать внутренний div с помощью bottom: 0. Я думаю, это все.

person ŁukaszBachman    schedule 19.07.2013
comment
Да, я сделал это таким образом. Я пытался установить эти 100 пикселей как Xpx. Было бы лучше, если бы это был X, но это кажется очень сложным, по крайней мере, для новичка (меня). Большое спасибо, вы были очень полезны. - person pixelll; 19.07.2013

arrow_upward
0
arrow_downward

Можете ли вы предоставить jsfiddle, объясняющий вопрос? Мне трудно понять вашу проблему, кажется, это проблема css, но если вы приведете пример, я найду правильное решение.

person Akallabeth    schedule 19.07.2013
comment
Хорошо, намного лучше, однако я думаю, что @LukaszBackman нашел правильное и, насколько я знаю, единственное решение вашей проблемы. Это просто проблема css... - person Akallabeth; 19.07.2013