带全宽页脚的固定宽度布局答案

【问题标题】：Fixed-width layout with full-width footer带全宽页脚的固定宽度布局
【发布时间】：2013-11-20 20:56:14
【问题描述】：

我需要创建一个 980 像素宽度的固定页面，其中包含全宽（液体、流体、大于 980 像素）页脚和水平菜单。我希望简单地将它们都放在固定宽度的内容 div 之外就可以了，但它不适用于页脚（仅适用于菜单）。页脚仍然缩小到内容的 980 像素宽度。当我转到页面并通过 Firebug 检查 HTML 时，我看到页脚神奇地 inside 是一个内容 div。基本上，我在包装结束标记之后放置的任何内容都会被吸入内容 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>

【问题讨论】：

<%= yield %> 中有什么内容？只是文字？更多 HTML？
更多的是 HTML，我编辑了问题

标签： html css footer

【解决方案1】：

您没有正确关闭您的 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 未关闭。带有style="color:#515151;font-size:14px;" 的 div 也没有关闭。

页脚神奇地出现在内容 div 中的原因是它确实如此！内容 div 从未关闭。你需要再看看你的标记。

【讨论】：

【解决方案2】：

如果我删除整个 #content 样式并仅将宽度添加到 .wrapper，它对我有用：

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

See it running on JS Fiddle.

【讨论】：

谢谢，但对我没有帮助