问题
I am trying to convert my table design to css div design.
What does not work:
1.) The black div will have list items therefore I need scrollbars which is shown at the moment. Thats fine. But I do not want to limit the height to 400px. My former design had 100% for the height so it takes all vertical space on the screen.
2.) The red div (rightContent) should have a fixed width of 200px; When I set this what do I have to set, that the leftContent takes all horizontal space.
Above all in the old table layout were no outer vertical scrollbar visible around the whole layout.
I tested this on IE9
http://jsfiddle.net/pEMwP/4/
回答1:
For Question1: If you want a scrollbar, you should not set the height property to auto. Instead you can dynamically set the Div height via Javascript like this.
document.getElementById("ListData").style.height=<your Size>;
For Question 2: If you want to set height to Red Div. You can specify like this.
height: 200px;
overflow:hidden;
this will limit the div to 200px. Now you can increase your other div/divs width to occupy this space .
回答2:
If I was starting something like this from scratch I'd rethink the layout so I didn't have such tight constraints, but as you're converting an existing site I appreciate this might not be an option.
You could use the display: table;, display: table-row; and display: table-cell; declarations to get a semantically correct (it's not tabular data, right?) structure which behaves just like the oft misused <table> of yore. Admittedly, you'd have to implement some work-around for IE6&7 (probably 2-3% of users), but perhaps you could accept that it's usable but imperfect in those browsers?
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
来源：https://stackoverflow.com/questions/10981290/can-not-stretch-the-css-divs-100-vertically-and-horizontally