0

所以我有一个简单的网站。

其中一个有一个标题，然后是一个包含 div 内容和侧边栏的 site_content，然后是一个粘性页脚。

这是我的代码：

html:

    <!DOCTYPE HTML>
<html>

<head>
  <title>Turismo Murtoseiro</title>
  <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
  <link rel="stylesheet" type="text/css" href="style.css" title="style" />
</head>
<body>
<div class="wrapper">
  <div id="header">
  <div id="logo"></div>
  <div id="menubar">
  <ul id="menu">
          <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
          <li class="selected"><a href="index.html">Home</a></li>
          <li><a href="ilustracao.html">Cafés</a></li>
          <li><a href="3d.html">Restaurantes</a></li>
          <li><a href="video.html">Hotéis</a></li>
          <li><a href="video.html">Pensões</a></li>
          <li><a href="contacto.html">Contacto</a></li>
          </ul>
          </div>
          </div>
  <div id="site_content">
    <div id="sidebar">
      <!-- insert your sidebar items here -->
      trujytkyukliyluilouiluiol </div>
    <div id="content">
      <!-- insert the page content here -->
      <h1>Pedro Fidalgo - freelancer</h1>
    <div>
        <p> O meu nome &eacute; Pedro Fidalgo, e estudo na &aacute;rea de Multim&eacute;dia, na escola Padre Ant&oacute;nio Morais da Fonseca, na Murtosa.</p>

    </div>
    </div>
  </div>
  <div class="push"></div>
  </div>
  <div id="footer" class="footer">
    Copyright &copy; Pedro Fidalgo 2011</div>
</body>
</html>

CSS：

* {margin:0;
padding:0;
} 

html, body {height: 100%;
font: normal .80em 'trebuchet ms', arial, sans-serif;
}

p
{
    padding: 0 0 20px 0;
    line-height: 1.7em;
    color: #666;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    background: #F0EFE2;
    margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 30px; /* .push must be the same height as .footer */
    clear: both;
}


h1, h2, h3, h4, h5, h6 
{ font: normal 175% 'century gothic', arial, sans-serif;
  color: #43423F;
  margin: 0 0 15px 0;
  padding: 15px 0 5px 0;}

a, a:hover
{ outline: none;
  text-decoration: underline;
  color: #A4AA04;}

a:hover
{ text-decoration: none;}

.left
{ float: left;
  width: auto;
  margin-right: 10px;}

.right
{ float: right; 
  width: auto;
  margin-left: 10px;}

.center
{ display: block;
  text-align: center;
  margin: 20px auto;}

blockquote
{ margin: 20px 0; 
  padding: 10px 20px 0 20px;
  border: 1px solid #E5E5DB;
  background: #FFF;}

ul
{ padding: 2px 0 22px 17px;}

ul li
{ list-style-type: circle;
  padding: 0 0 4px 5px;}

ol
{ padding: 8px 0 22px 20px;}

ol li
{ padding: 0 0 11px 0;}

#logo, #menubar
{
    margin-left: auto;
    margin-right: auto;
}



#header
{
    height: 150px;
    background-color: #708B1A;
}

#logo
{
    width: 877px;
    position: relative;
    height: 100px;
    background-color: #003;
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
}


#menubar
{ width: 877px;
  height: 50px;
  padding: 0;
  background: #29415D url(images/menu.png) repeat-x;} 

ul#menu, ul#menu li
{ float: left;
  margin: 0; 
  padding: 0;}

ul#menu li
{ list-style: none;}

ul#menu li a
{ letter-spacing: 0.1em;
  font: normal 100% 'lucida sans unicode', arial, sans-serif;
  display: block; 
  float: left; 
  height: 24px;
  padding: 20px 26px 6px 26px;
  text-align: center;
  color: #FFF;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;} 

ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
{ color: #FFF;
  background: #1C2C3E url(images/menu_select.png) repeat-x;}

#site_content
{ width: 837px;
  overflow: hidden;
  color #000;
  height: 100%;
  margin: 0 auto 0 auto;
  padding: 20px 24px 20px 37px;
  background: #FFF url(images/content.png) repeat-y;} 


 #content
{ text-align: left;
  width: 595px;
  min-height: 100%;
}


#sidebar
{
    float: right;
    width: 200px;
    padding-top: 0;
    padding-right: 15px;
    padding-bottom: 30px;
    padding-left: 15px; 
}


#footer
{ width: 878px;
  font: normal 100% 'lucida sans unicode', arial, sans-serif;
  height: 30px;
  text-align: center; 
  margin: 0 auto 0 auto;
  background: #29425E url(images/footer.png) repeat-x;
  color: #FFF;
}

而且我不能将我的 site_content（带有内容和侧边栏）设置为 100% .. 我错过了什么？

4

1 回答 1

1

删除所有指定的宽度，例如width: 878px;, width: 837px;, width: 877px;... ，您将使其呈现为100%宽度。

演示

于 2013-04-10T08:29:52.003 回答