假设一个例子:
<!DOCTYPE HTML> < html lang =en-US> < head> < meta charset =UTF-8> < style type =text / css> html,body {height:100%; width:100%; padding:0; margin:0; } body {overflow:scroll; } #wrapper {background:#5f9ea0; width:500px;高度:100%; min-height:100%; margin:0 auto; overflow:auto; } #content {background:#336699; width:400px;高度:100%; min-height:100%; margin:0 auto; overflow-x:hidden; position:relative;} #info-block {background:#d2691e; width:300px; left:20px; position:absolute; } < / style> < / head> < body> < div id =wrapper> < div id =content> < div id =info-block>资料...< br>< br>< br>< br>< br>< br>< br> ;< br>< br>< br>< br>< br>< br>< br>< br>< br>< br> ; br>< br>< br>< br>< br>< br>< br>< br> ... End< / div> < / div> < / div> < / body> < / html>这个例子有几个问题:
所以实际的问题是我需要页面来获取#info-block 元素的内容的高度。尝试可能不同的设置,都会失败。
一个解决方案 - 使用jQuery并比较#info-block 对 body 的高度递增地应用到 body , #wrapper 和 #content 。但这只是错了。寻找CSS的解决方案。
而且,我不能摆脱 position:absolute c $ c>#info-block 元素,因为它是交互式水平手风琴的一部分。
提前感谢。
解决方案另一个Stackoverflow线程,我将链接该线程供您查看。
父级内的子级,最小高度100%不继承高度
你不能继承在Chrome / Safari / Firefox的最小高度的高度。也许这是问题?有在线程中的jQuery问题解决,以及有人报告显示:块;应该可以解决这个问题。
看看!
Suppose an example:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <style type="text/css"> html, body { height:100%; width:100%; padding:0; margin:0; } body { overflow:scroll; } #wrapper { background:#5f9ea0; width:500px; height:100%; min-height:100%; margin:0 auto; overflow:auto; } #content { background:#336699; width:400px; height:100%; min-height:100%; margin:0 auto; overflow-x:hidden; position:relative;} #info-block { background:#d2691e; width:300px; left:20px; position:absolute; } </style> </head> <body> <div id="wrapper"> <div id="content"> <div id="info-block">Info..<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>...End</div> </div> </div> </body> </html>There's couple of problems with this example:
So the actual problem is I need the page to get the height of the content of the #info-block element. Tried may different setting, all fail.
The one solution that works - is using jQuery and comparing the height of the #info-block against the height of the body, and apply it recursively to the body, #wrapper and #content. But this is just wrong. Looking for CSS only solution.
And, I can't get rid of position:absolute property of #info-block element, because it's a part of interactive horizontal accordion.
Thanks in advance.
解决方案A similar question was asked in another Stackoverflow thread, I will link the thread for your viewing.
child inside parent with min-height 100% not inheriting height
It seem's that you cant inherit height in Chrome/Safari/Firefox with min-height. Maybe that is the issue? There is the jQuery problem solve in the thread, as well as someone reporting that display: block; should solve the issue.
Have a look!
更多推荐
如何设置父div的100%的高度与绝对定位的儿童(不是重复)?
发布评论