Question

以下是一个示例页面：

我想为content类设置100％的高度（请参阅CSS源代码中的“此处的问题”注释），但是当我执行此左右列时（嵌套在content中） div）变为0px高度。但是当content高度设置为像素时，它可以正常工作。

有没有JavaScript的解决方案吗？

Answer 1

使用display: inline-block作为列，使用height:100%作为html和body代码：

    <!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>

CSS：3列高度100％

1 个答案: