CSS: 3 column height 100%

六眼飞鱼酱① 提交于 2020-02-05 04:20:31

问题


Here is an example page:

http://jsfiddle.net/SkeLLLa/pwfH2/

I want to set 100% height for the content class (see the "Problem here" comment in the CSS source), but when I do this left and right columns (nested in the content div) become 0px height. But when content has height set in pixels it works fine.

Are there any solutions without JavaScript?


回答1:


Use display: inline-block for the columns and height:100% for the html and body tags:

    <!doctype html>
    <html>
      <head>
      <style>
      html, body, #content, #left, #right, #center { height: 100%; }
      #content { width: 100%; }
      #left, #center, #right { display:inline-block; }
      #left, #center, #right { width: 32%; border: 1px solid red; }
 
      /* media query for IE 6-7 */
      @media, 
        { 
        #left, #center, #right { display:inline; }
        }
      </style>
      </head>
      <body>
        <div id="content">
            <div id="left">foo</div>
            <div id="center">bar</div>
            <div id="right">baz</div>
        </div>
      </body>
    </html>


来源:https://stackoverflow.com/questions/10086007/css-3-column-height-100

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!