Change height of a div according to outer div in angularJS

Question

I have a div which has flexible height and two div's inside it. First one has fixed height of 60px, second ones height should contain all other left area inside the outer div. I need angularJS answer, not the JavaScript itself or JQuery

I looked at forms and there was written only cases in which outer div is browser window. Also I tried to write directives by myself but no solution.

Would appreciate any answer or suggestion.

html code

<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>

Outer div: styleOuter() function in angularJS directory sets outer divs height to "windowSize-100px"

First div: Its height is fixed (60px)

Second div: style() function in angularJS directory should set second divs height to "outerDivSize - 60px"

That is CSS question, not related to Angular JS. You can do this by absolutetly positioning elements. — ŁukaszBachman
– ŁukaszBachman, Commented Jul 19, 2013 at 9:15
You can't use percentage because there is two divs, first fixed, second flexible. If you try to set a percentage size to second div, there will be problem. When size of outer div changes second div vould be changed according to outer div, first wont. I can't use absolutely positioning because outer div would change according to window size — pixelll
– pixelll, Commented Jul 19, 2013 at 11:25
absolute position of outer div is not known. Maybe its 30px to top, maybe 60px or 200px. Because of that I can't use absolute positioned divs. Inner divs' height and position should be set according to outer divs' height and position only. — pixelll
– pixelll, Commented Jul 19, 2013 at 12:13

ŁukaszBachman · Accepted Answer · 2013-07-19 13:04:50Z

1

I'm posting this solution as an answer. It's a second version of the Fiddle I posted before in comment.

I'm sorry @pixelll, but I'm almost sure you are overthinking things. If you know the size of outer div (windowSize-100px) and fixed div (height: 60px) then the only thing you need to do for the inner div is to set CSS position of it's parent to anything (this, creating new positioning context) and within this new context you should absolutely position the inner div with bottom: 0. I think that's it.

answered Jul 19, 2013 at 13:04

ŁukaszBachman

33.8k11 gold badges68 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pixelll Over a year ago

Yes, I did it in this way. I was trying to set that "100px" as "Xpx". It would be better if it was X, but it seems very hard to do that, at least for novice(me). Thank you very much, you were very helpful.

Akallabeth · Accepted Answer · 2013-07-19 09:13:12Z

0

Can you provide a jsfiddle explaining the question? I've difficulties in understanding your problem, seems to be a css problem, but if you provide an example I'll find a valid solution.

answered Jul 19, 2013 at 9:13

Akallabeth

3433 silver badges9 bronze badges

1 Comment

Akallabeth Over a year ago

Ok, much better, hovewer I think that @LukaszBackman found the correct and as I know, "only", solution for your problem. It's just a css problem...

Collectives™ on Stack Overflow

Change height of a div according to outer div in angularJS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related