2

I have a dynamic wrapper centered on the page with a percentage height.

Inside it is a navigation bar with fixed height and a newsfeed that takes up the remaining space (100% of the wrapper minus the navigation bar).

I'm adding new news items to the feed via javascript.

Problem: the container grows with the news. It doesn't grow if it has a fixed height, like 200px; but that's not what i want.

This problem is driving me crazy, any help appreciated!

Check it out here: http://codepen.io/anon/pen/vedwA

[UPDATE]

What if I have a textarea in the #itemsContainer instead of the newsfeed? The textarea of course has also to occupy 100% of the height and width of the itemscontainer AND has to stay in that size even if the user pasts in much more text.

In my example the textarea stays within the outer #wrapper but pushes the navigation out to the top. in the codepen example the textarea shows the right behavior but doesn't occupy 100%. in either way, it doesn't work :-( http://codepen.io/anon/pen/nGmua

** Solution **

position: absolute;
top: 50px;
bottom: 0px;
width: 100%;

We're stretching the container not via height = 100% but via a fixed top and a bottom=0px; This works as long as the parent container has position: relative;

Beezle-Bug
  • 167
  • 5
  • 13

1 Answers1

0

The problem seems to be the display: table in its various forms together with the default overflow: visible of #wrapper. Technically, your news items are not spilling over but are expanding the table.

The solution requires applying overflow: hidden to #wrapper. However, the overflow property doesn't work on table elements. So, we get rid of display: table. See my annotations in the code below.

Hope it helps.

body {
  background: #900;
}

div {
  padding:0px;
  margin:0px;
  background: grey;
  color: white;
  text-align: center;
}

#wrapper{
  position:absolute;
  width: 40%;
  height: 50%;
  background: red;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid white;
  /* display: table;  should be block */
  overflow: hidden /* added */
}

#navigation{
  top:0px;
  height:50px;
  width: 100%;
  background: black;     
}

#itemsContainer{
  top:20px;
  /* width:100%;
     height: 100%;
     overflow: hidden;  you don't need these any more */
  background:red;
  /* display:table-row; should be block */
}

#itemsContainer div{
  border-bottom: 1px dashed white;
  padding: 1em;  
}
HQCasanova
  • 1,158
  • 1
  • 10
  • 15
  • wow, i can't believe i spent the half night with trial & error. Your solution works absolutely perfectly! thanks – Beezle-Bug Nov 03 '13 at 02:13
  • @Beezle-Bug Glad to hear that. I've since edited my answer to explain why it works. Thanks for accepting! – HQCasanova Nov 03 '13 at 12:48
  • i've got another one for you: What if i had a – Beezle-Bug Nov 04 '13 at 21:24
  • @Beezle-Bug Easiest solution is to get rid of the `height: 50%` of `#wrapper`. If that's not an option, force the number of rows of the textarea tag to 5: ` – HQCasanova Nov 04 '13 at 21:53
  • sorry @hqcasanova, can't pay any fees on that one, as getting rid of my plan is not according to my plan ;-) one night later i found this interesting post: http://stackoverflow.com/questions/2434602/css-setting-width-height-as-percentage-minus-pixels the cool solution to my second problem is as follows: position: absolute; top: 18px; bottom: 0px; width: 100%; This works as long as the parent container has position: relative; – Beezle-Bug Nov 05 '13 at 00:04
  • @Beezle-Bug Ha, ha! I was joking of course. Also, have you checked [the question linked](http://stackoverflow.com/questions/10420273/css-fix-the-height-of-a-section-within-a-variable-height-element/10420387#10420387) to the one you mentioned? – HQCasanova Nov 07 '13 at 14:42