2

I am creating a resizable <ul> with 2 <li> elements, a header and content. The header should stay at a fixed height: 35px;, no matter what happens to the rest of the elements. I would like the content to take up the rest of the <ul>. The problem is it can never fill the rest, because it grows at its own rate, so there is a small margin of the <ul> at the bottom. I could fix this with height: calc(100% - 35px); but there is so little that supports calc. Is there a way to do this with out calc?

jsfiddle

Improve this question

3 Answers 3

Reset to default
2

You can use crosse-browser calc like this 

.foo { width: -webkit-calc(100% - 35px); //Chrome width: -moz-calc(100% - 35px); //firefox width: calc(100% - 35px); //IE }

or with JQuery:

document.getElementsByClassName("foo").style.width= window.innerWidth - 35;
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Demo Fiddle

No calc needed!

Simply set the postion of the parent container to relative then the children to absolute, anchoring the content with a bottom of zero and top of 35 (the height of the header).

CSS

.resize_container { position: fixed !important; top: 65% !important; left: 0px !important; } .container_t { list-style: none; bottom: 0px; left: 0px; width: 350px; height: 150px; background-color: red; padding: 0; margin: 0; position:relative; } .header_t { width: 100%; height: 35px; background-color: blue; padding: 5px; box-sizing: border-box; position:absolute; } .content_container_t { width: 100%; background-color: green; padding: 5px; box-sizing: border-box; position:absolute; top:35px; bottom:0; } .ui-resizable-n { cursor: n-resize; border-top: 5px solid purple; } ui-resizable-e { cursor: e-resize; border-right: 5px solid purple; }
Improve this answer

5 Comments

But would this work if I added content inside of the content_container like a textarea that or buttons?
@EasilyBaffled - this should work absolutely fine, you can always add overflow:auto to .content_container_t in order to ensure correct space allocations.
Unfortunatly its not perfect, I tried adding a textarea with a height and width of 90% to the content_container_t in your example, and the textarea ended up suffering from the same problem as I stared with. I was able to fix it with '.content_t { position:absolute; width: 90%; left: 5px; top: 5px; bottom: 5px; }' but can you think of a cleaner way?
See fiddle: jsfiddle.net/swfour/k4E5F/4 This is a question of CSS styling, you may need to open another question for the specifics of what you're trying to do next to ensure it gets maximum visibility by the community
Any idea with my issue here: stackoverflow.com/questions/26386171/…
0

You could do something like this:

.content_container_t { position:absolute; top:35px; bottom:0; left:0; right:0; overflow: scroll; }

DEMO

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.