2

I have two divs nested inside of a div.

<div id='outer' class='one'>
    <div id='inner'></div>
    <div id='button' class='bttn'>Click me!</div>
</div>

The outer div's height is a percentage of the page. I'd like one of the inside div's height to be a fixed difference away the outer div (i.e. $('#inner').height($('#outer').height() - 35)), because the second inner div is essentially a button with fixed height (35). I'd like this to happen even when I change the height (through CSS triggers (:hover/adding a class/etc. so I can use Transitions) or otherwise).

I googled around a bit and saw Less might be an answer, but from what I can tell it compiles in to static values, but I still need to use percentages, since I want this app to work/feel the same on any screen size.

I have examples of what I'm currently doing/how I'm thinking about it in some jsfiddles.

Current 'solution': http://jsfiddle.net/L9NVj/5/ (End heights are what I want them to be, but the transition looks terrible)

Idealistic 'solution': http://jsfiddle.net/L9NVj/6/ (End heights are wrong, but the inner div hugs appropriately)

Potential solution: http://jsfiddle.net/L9NVj/7/ (This hides the inner div on click and then shows it again when the appropriate size has been reached)

Any help/thoughts/insights would be greatly appreciated!

Improve this question
2
  • What level of browser support do you need? Commented Oct 2, 2013 at 16:12
  • All of the answers look awesome. I don't need to support many older browers. It's for a webapp game that I've made and am still improving. In theory, I just need it to work on smartphones/tablets and the browser that Phonegap runs so I can turn it into an Android and iOS app. Commented Oct 2, 2013 at 17:01

5 Answers 5

Reset to default
4

Consider absolute-positioning the inner elements, since the outer's size isn't controlled by their size/position.

#inner {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 35px;
    /* ... */
}

.bttn {
    position: absolute;
    bottom: 2px;
    left: 2px;
    /* ... */
}

Example: http://jsfiddle.net/L9NVj/9/

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

1 Comment

This seems to be the solution that works the best with PhoneGap. I was looking for a solution that I could calculate the height, I hadn't really thought about just setting the top and bottom.
2

CSS3's calc() is the answer you're looking for, in combination with a JavaScript fallback for browsers that don't support calc(). In your 'Idealistic solution' fiddle, change your CSS height definition to the following:

height: -webkit-calc(100% - 35px);
height: calc(100% - 35px);

While normally you should include all prefixes (and you still may need to, depending upon your level of browser support), according to Can I Use, the only browsers that currently need prefixing are -webkit browsers.

What I would do with this knowledge is the following: grab a feature detection script, I really like Modernizr and detect to see if calc() is available in the browser. Modernizr has a non-core detect for calc() that you can use. Use that CSS in your CSS file as the default, then using a resource loader such as yepnope (comes with Modernizr), load in a JS solution if calc() isn't available.

Of your JavaScript solutions, I'd probably suggest your "Potential Solution" option, but instead of jQuery's hide() and show(), set opacity to 0 and 1 and use a CSS3 transition to transition between the two. I'd also not rely upon a timeout, but rather use the transitionend JavaScript event.

Improve this answer

1 Comment

This is exactly what I was looking for in terms of a solution using math! Unfortunately, I found that the browswer implementation that PhoneGap uses doesn't support this feature from CSS3. Or CSS Transitions. Or Opacity. I'm starting to get seriously frustrated with PhoneGap.
1

How about conflicting absolute positioning. To do it, you'd just need to set the top, bottom, left and right of the #inner element and then transition those. That will maintain the distances around the edges of the element, and allow other positioning as well.

Note that while you don't need to actually calculate the value in this case, in the future, calc() can be used to calculate a dynamic value in CSS. In that case, you could do something like height: calc(100% - 37px); to get the same effect.

Improve this answer

3 Comments

This is an incomplete version of Paul Roub's answer
@Mathletics Actually the first piece is the same answer, just less code. However, I have been adding a bit more info to answer the original question about calculating values in CSS.
"same answer less code" is exactly what I mean by incomplete.
0

I edited your first jsfiddle little bit i think that's what you wanted. Just added line.

$(window).resize(function(){$('#inner').height($('#outter').height() - 35)});

jsfiddle:http://jsfiddle.net/Qqb3g/

You may have to some workaround to make transition smooth when button the button is clicked.

Improve this answer

Comments

0

you need to calculate the inner div in %, so it can resize belong outer div, change your js code to this :

 //calculating inner div'x height in % of outer
$('#inner').height((100 - (33/$('#outter').height() * 100)) + '%');
$('#button').click(function () {
    $('#outter').toggleClass('two');
});

give a try to DEMO

Improve this answer

1 Comment

Thanks, but the whole point of this is to do it without js. I was using js in the original fiddles to demonstrate what I was trying to accomplish.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.