1

这是一个示例页面：

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

我想为content类设置 100% 的高度（请参阅 CSS 源代码中的“这里的问题”注释），但是当我这样做时，左右列（嵌套在contentdiv 中）变为0px高度。但是，当content以像素为单位设置高度时，它可以正常工作。

有没有没有 JavaScript 的解决方案？

4

1 回答 1

1

用于display: inline-block列和 height:100%andhtml标记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>

于 2012-05-22T23:48:21.597 回答