How to set element (DIV/TABLE/other) height to 100% of its container?

I am trying to accomplish a simple 'liquid layout' with two width=50% boxes on the left and one width=50% box on the right, where the height of the rightmost box follows the leftmost boxes and vice versa. I want a spacing between the boxes of 10px, a nice 3d feel for the boxes and no border or margin on the outside. I have tried to implemented this using DIV tags only, but didn't succeed. Due to lack of time I switched to a more familiar TABLE/TR/TD approach. Indeed the table cell height followed the total table height, however when I introduces DIV tags in the table cells so I could implement my 3D box border, the height shrinked again. No matter at which places in my code I try to put "height=100%", my browser doesn't seem to act on it. The problem is related to a question already asked on StackOverflow before (linked [here][2]). The proposed solution there is to use TABLE instead of DIV. In my case this will not work if I want to stick to both my 3D boxes and the spacing between my cells. I have included my code below containing two different approaches, both not working. Can somebody suggest me a way to fix my code so that the height of the box on the right will become 100% of the size of its TD container (shown green in the example?). Any other approaches with the same result are also very welcome. **UPDATE:*** Tor Valamo posted an answer pointing out where to place the 100%. Unfortunately, the result works only in IE and Firefox, not Chrome. The search therefore continued for a browser-independent solution.* **UPDATE:** *After receiving several useful suggestions, I've posted my own solution which is the only one acceptable to me at this point. Unfortunately it uses TABLE not DIV. Some work has been done on a DIV solution, for anyone who'd like to finish the job, the sources codes are available [here][1].*

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[1]: http://www.antiflu.dds.nl/layout.zip [2]: https://stackoverflow.com/questions/589754/div-stretch-to-height-100-in-a-table-cell

以上就是How to set element (DIV/TABLE/other) height to 100% of its container?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » HTML5 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏