Question

我正在使用960.gs frameowrk和http://www.cssstickyfooter.com，并希望为主要内容div提供单独的背景颜色。此div不会将背景拉伸到页面底部。

HTML：

    <div id="wrapper">
        <div id="content" class="container_12">

          <div class="grid_12" id="header"><a href="/"><img src=logo.png" alt="" width="145" height="160" border="0" /></a></div><!--header-->

          <div class="clear"></div>

          <div class="grid_12" id="navbar">
            <ul>
              <li><a href="/">Home</a></li>
              <li><a href="/menu 1">menu 1</a></li>
              <li><a href="/menu 2">menu 2</a></li>
              <li><a href="/menu 3">menu 3</a></li>
              <li><a href="/menu 4">menu 4</a></li>
              <li><a href="/menu 5">menu 5</a></li>
            </ul>
          </div><!--navbar-->

          <div class="clear"></div>

          <div class="grid_12" id="content_body">

            <div class="grid_4" id="sidebar">
              sidebar left
            </div> <!--sidebar-->

            <div class="grid_7" id="body_right">
              body right
            </div> <!--body_right-->

          </div> <!--content_body-->

          <div class="clear"></div>
        </div><!--content-->

      </div> <!--wrapper--> 
<div id="footer"> footer </div> <!--footer-->

CSS：

html, body, #wrapper {height: 100%;}

body > #wrapper { height: auto; min-height: 100%; }

/* must be same height as the footer */
#content { overflow: auto; 
padding-bottom: -1.5em; 
}


#footer {
  position: relative;
  margin-top: -1.5em; /* negative value of footer height */
  height: 1.5em;
  clear: both;
}

/*Opera Fix*/
body:before { /* thanks to Maleika (Kohoutec)*/
    content: "";
    height:100%;
    float: left;
    width: 0;
    margin-top: -32767px; /* thank you Erik J */
}


body {
  min-width: 960px;
  background: #E9F2F9;
}

div#header{
  background-color: #3399cc;
}

div#navbar {
  background-color: #FF9900;
}

div#navbar  LI{
  margin: 0 auto;
  display: inline;
  padding-right: 5px;
} 



div#content_body{
  background: #9CC4E4;
  }

Answer 1

你有一个div class =“clear”但你的CSS中没有定义clear - 你需要在.clear CSS类中指定“clear：both”。

使用960.gs和粘性页脚内容div背景不会延伸到页面底部

1 个答案: