具有全角頁腳的固定寬度布局

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從未關閉。 您需要再次查看標記。