Question

我需要创建一个固定的980像素宽页面，其中包含全宽（液体，流体，宽度超过980像素）的页脚和水平菜单。我希望简单地将它们放在一个固定宽度的内容div之外就可以了，但它不适用于页脚（仅适用于菜单）。页脚仍然缩小到内容的980px宽度。当我进入页面并通过Firebug检查HTML时，我发现该页脚神奇地内部内容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中的“Yield”取决于页面，所以这里是frontpage.html.erb，它取代了“yield”：

<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 {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -80px;
  width: 980px;
}

See it running on 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未关闭。 style="color:#515151;font-size:14px;"的div也未关闭。

页脚神奇地在内容div中的原因是因为它实际上是！内容div从未关闭。你需要再看一下你的标记。

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

2 个答案: