Question

我现在已经阅读了很多论坛和帖子，但似乎没有什么能解决我的问题。我有一个页脚（使用WordPress空白主题），页面底部是100％宽度，不用担心。我在一个“foot”div中有3个div，它位于HTML 5钩子里面。我希望内部div“foot”具有相同的宽度并保持与其上方的包装相同，因此它看起来与包装器@ 960px宽度相同。我正在努力弄清楚如何实现这一目标。您可以在http://newsite.dramanotebook.com查看我的代码和CSS，因为我相信您知道如何使用Google Chrome或firefox firebug。让我知道您认为最好的解决方案，即使这意味着必须更改页面/页脚模板以实现我想要的目标。

我希望<footer>的宽度为100％，以扩展用户窗口的宽度，<div id="foot">的宽度限制为960px。这是捕获。我希望<div id="foot">与上面的其他网站保持垂直对齐。 <div id="wrapper"></div>我指的是。

<div id="wrapper" class="hfeed">
<header>

<div id="branding">
</header>
<div id="container">
<div id="main" class="clearfix">
<!-- I have removed all the bloat in the middle to keep to my issue at hand -->
</div>
<div class="clear"></div>
</div> <!-- end of container div -->
</div> <!-- end of wrapper div -->
<footer> <!-- what I was referring to by HTML hook, my apologies "element"-->
<div id="foot">
    <div id="left-footer">
        <div id="trustwave_img">
            <script type="text/javascript" src="https://sealserver.trustwave.com/seal.js?code=5d243334f2474482a03b5e1f5d5fe4f5"></script>
        </div>
    </div>
    <div id="center-footer">

    </div>
    <div id="right-footer">

    </div>
</div>
</footer>

以下是我目前拥有的相关CSS，我相信这里有更聪明的人可以帮助我改进以获得我需要的地方，并在此过程中学到一些东西:)。

body {
  font-size: 16px;
  font-family: Tahoma, Helvetica, Verdana;
  color: #424242;
  line-height: 1.4em;
  background: #fdffd0;
}

#wrapper {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
  Position: relative;
  background: #fff;
  padding: 0 10px;
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;  

}
#container {
  position: relative;
  overflow: hidden;
  clear: both;
    padding-bottom: 40px;
}
footer {
  clear:both;
  width: 100%;
  height: 150px;
    border-top: 1px solid #eee;
    background-color: #A4EDA1; /*#9BE398;*/
    opacity: .8;
}
footer #foot {
    width: 960px;
    height: 150px;
    margin-left: 127px;
    position: relative;
}
#left-footer {
    width: 241px;
    height: 100%;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
}
#center-footer {
    width: 496px;
    margin-left: 365px;
    height: 100%;
}
#right-footer {
    width: 240px;
    float: right;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

谢谢，吉姆

Answer 1

以自动保证金为中心#foot。

footer #foot {
    width: 960px;
    height: 150px;
    margin: 0 auto;
    position:relative;
}

Answer 2

margin: 0 auto;不适用于#foot元素的原因是因为您绝对将内部<div>定位在该元素中。当您绝对定位它们时，您将从文档的默认流程中取出它们，并且边距和浮动将不再适用。

您只需删除...

position: absolute;
top: 0;
left: 0;

...来自#left-footer和#right-footer选择器。

如果要在该元素中创建三列页脚，则无需为子项<div>指定不同的浮点数，边距等。相反，只需使用：

footer {
    overflow: hidden; /* Used to clear floats */
    width: 100%;
}
footer > div {
    box-sizing: border-box; /* To define the total width (padding plus border, if any) at the specified width and not more */
    float: left;
    width: 33%;
}

p / s：您的CSS存在一些问题 - 没有必要清除<footer>元素中的浮点数（没有意义），并且position属性已被拼错了#wrapper。您的<div id="header">也未在您发布的HTML代码中正确关闭。

100％页脚与内部div相同的包装宽度

2 个答案: