1

ページの例を次に示します。

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

クラスの高さを100％に設定したいのですがcontent（CSSソースの「Problemhere」コメントを参照）、これを行うと、左右の列（contentdivにネストされている）が0px高さになります。ただし、content高さがピクセル単位で設定されている場合は、正常に機能します。

JavaScriptなしの解決策はありますか？

4

1 に答える 1

1

display: inline-block列 とタグheight:100%に使用します。htmlbody

    <!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 に答える