Question

我正在使用此代码来创建我的网站的布局。我的问题是“左”和“右”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>

Answer 1

工作方式：

您需要更改这些类：

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

我这样：

Layout

希望这有帮助！：）

Answer 2

在

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

添加

<br style="clear:both;">

CSS div高度100％布局

2 个答案: