-1

このコードを使用して、サイトのレイアウトを作成しています。私の問題は、「左」と「右」の div が画面に表示されないことです (高さをパーセントではなくピクセルで設定すると表示されます)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css" media="screen">
    * { 
        margin: 0; 
    }

    html, 
    body { 
        height: 100%; 
    }

    #wrapper {
        min-height: 100%;
        height:     auto !important;
        height:     100%;
        margin:     0 auto -44px; /* -44px being the size of the footer */
    }

    #header { 
        height: 86px; 
    }

    #footer, 
    #push {
        height: 44px;   
    }

    #left
    {
      width:8px;
      width:100%;
      background-color:blue;
      float:left;
    }


    #right
    {
      width:8px;
      width:100%;
      background-color:blue;
      float:right;
    }

    #left: first,
    #right: first,
    {
    content: "";
    height: 0;
    clear: both;
    display: block;
    }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="header">header</div>
        <div id="content">
         <div id="left"></div>
         content
         <div id="right"></div>
        </div>
        <div id="push"></div>
    </div>
    <div id="footer">footer</div>
</body>
</html>
4

2 に答える 2

4

働く方法:

これらのクラスを変更する必要があります:

#content {height: 80%;}
#left, #right {width: 30%; height: 100%;}

以下のコードを更新し、完全なファイルを投稿しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css" media="screen">
    * { 
        margin: 0; 
    }

  html, 
  body { 
      height: 100%; 
  }

  #wrapper {
      min-height: 100%;
      height:     100%;
      margin:     0 auto -44px; /* -44px being the size of the footer */
  }

  #header { 
      height: 86px; 
  }

  #footer, 
  #push {
      height: 44px;   
  }

  #left
  {
    width:8px;
    width:30%;
    background-color:blue;
    float:left;
  height: 100%;
  }


  #right
  {
    width:8px;
    width:30%;
    background-color:blue;
    float:right;
  height: 100%;
  }

  #left: first,
  #right: first,
  {
  content: "";
  height: 0;
  clear: both;
  display: block;
  }
  #content {
  height: 80%;
  }
  </style>
</head>
<body>
  <div id="wrapper">
      <div id="header">header</div>
      <div id="content">
       <div id="left"></div>
       content
       <div id="right"></div>
      </div>
      <div id="push"></div>
  </div>
  <div id="footer">footer</div>
</body>
</html>

私はこのようになります：

レイアウト

お役に立てれば！:)

于 2012-06-09T05:38:24.180 に答える
0

後

<div id="footer">footer</div>

追加

<br style="clear:both;">
于 2012-06-09T05:27:25.243 に答える