具有全角页脚的固定宽度布局

Question

我需要创建一个固定的980px宽度的页面，其中包含全角（液体，液体，宽度大于980px）页脚和水平菜单。 我希望仅将它们都放在固定宽度的内容div之外即可，但不适用于页脚（仅适用于菜单）。 页脚仍会缩小到内容的980px宽度。 当我转到页面并通过Firebug检查HTML时，我发现页脚神奇地位于内容div中。 基本上，无论我在包装器结束标记之后加上的内容，都会被吸到content div中。 但是如何？

这是html：

<div class="wrapper">
  <header id="header"></header>
  <nav id="horizontal_menu"></nav>
  <div id="content">
    <%= yield %>
  </div>
  <div class="push"></div>
</div>
<div id="footer">some text</div>

CSS：

html, body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -80px;
}

#content, {
  width:980px;
  margin:auto;
 }

.footer, .push {
   height: 80px;
 }

#footer {
   background:#393939;
   color:#777;
   clear:both;
 }

（如果需要的话，它是Rails应用程序）

编辑：原来问题仅在首页上。 其他页面运行良好。 内容div中的“收益”取决于页面，因此这里是frontpage.html.erb，它代替了“收益”：

<div style="color:#515151;font-size:14px;">
  <div id="navslides">
    <nav id="sidebar">
       some list  
     </nav>

    <div id="boxes">
      <div class="box"></div>
      <div class="box"></div>
  <div class="box"></div>
    </div>
  </div>
  <div id="latest">
      <div class="frontarticle">
      <div class="frontarticle">
  </div>
  <div class="righties">
     <ul class="tabs" data-persist="true">
        <li><a href="#view1">text</a></li>
        <li><a href="#view2">text</a></li>
     </ul>
     <div class="tabcontents">
        <div id="view1" style="min-height:200px;">text</div>
        <div id="view2" style="min-height:200px;">text</div>
</div>
  <div class="righties" style="margin-top:40px;margin-bottom:400px;">
    text
  <div>

Answer 1

如果我删除整个#content样式，然后将宽度添加到.wrapper ，那么.wrapper ：

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -80px;
  width: 980px;
}

看到它在JS Fiddle上运行 。

Answer 2

您没有正确关闭div，使用您发布的其他HTML，页面标记将如下所示：

http://jsfiddle.net/TC4S5/

<div class="wrapper">
  <header id="header"></header>
  <nav id="horizontal_menu"></nav>
  <div id="content">
    <div style="color:#515151;font-size:14px;">
        <div id="navslides">
            <nav id="sidebar">some list</nav>
            <div id="boxes">
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
            </div>
        </div>
        <div id="latest">
            <div class="frontarticle">
                <div class="frontarticle"></div>
                <div class="righties">
                    <ul class="tabs" data-persist="true">
                        <li><a href="#view1">text</a>
                        </li>
                        <li><a href="#view2">text</a>
                        </li>
                    </ul>
                    <div class="tabcontents">
                        <div id="view1" style="min-height:200px;">text</div>
                        <div id="view2" style="min-height:200px;">text</div>
                    </div>
                    <div class="righties" style="margin-top:40px;margin-bottom:400px;">text</div>
                </div>
                <div class="push"></div>
            </div>
            <div id="footer">some text</div>

latest未关闭， content未关闭， wrapper也未关闭。 该div带有style="color:#515151;font-size:14px;" 也没有关闭。

页脚之所以神奇地位于内容div之内，是因为它实际上是！ 内容div从未关闭。 您需要再次查看标记。