CSS: 3 column height 100%

2019-07-26 20:35发布

站内问答 / HTML/CSS
1873 1 6

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条回答
相关推荐>>
2楼-- · 2019-07-26 20:57

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)