Question

目前，我的页脚（found here）与包装器的宽度相同。但是，我想得到它，使其达到页面的整个宽度。问题是，我似乎无法将其从包装中删除。我会告诉你我的index.php文件，但它似乎没有正确显示在这里。

为了简要介绍一下，我正在使用

<?php include("footer.html");?>

将页脚调用到我的每个页面，这些页面都是PHP文件。我也在为标题做同样的事情。

如果有人使用Google Chrome浏览器，使用开发人员视图（认为它是默认扩展名，使用F12访问？），您会看到该调用位于包装器中。如果我拖动被调用的footer_wrapper部分并将其放在与包装器相同的级别，通过将其向下拖动到/ body上方，它完全符合我的要求，并展开页脚以覆盖页面。编辑：它在那里工作正常，但这只是在Chrome中的开发者模式，所以没有保存。问题是，我不知道如何在实际的PHP文件中复制它

我知道这是一个糟糕的解释，但我真的不确定如何正确解释它！

任何帮助都会很棒！

编辑 - 这是我尝试发布我的index.php代码：所有的缩进等使它看起来非常混乱，为此我道歉。如果您想查看index.php，footer.html和header.html的原始代码， here's the download link

<?php $thisPage="Home";?>
<html>
<head>
<title>Multiverse: The MMO Development Platform</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
</html>

<?php include("header.html");?>

<html>
<div id="content">

 <h2>Homepage</h2>
 <br/>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend imperdiet magna a tempor. Maecenas eu vulputate turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sit amet lorem sed dolor dignissim pulvinar. Sed mauris ipsum, interdum lobortis mattis sed, pellentesque id lacus. Sed sapien metus, dignissim in convallis eget, aliquet et nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus nunc risus, pulvinar in venenatis ultricies, mollis vel lectus.</p>
          <br/>
          <p>Suspendisse condimentum suscipit faucibus. Integer rutrum tincidunt neque sed sollicitudin. Donec pulvinar arcu id mauris luctus lacinia. Nam eu tempor  velit. Etiam molestie mattis dolor quis lobortis. Mauris mollis, risus at ultrices cursus, sem elit ultricies lectus, eu pretium urna magna a nisi. Maecenas nibh ante, fringilla quis sagittis non, vulputate eu urna. Cras ut turpis orci. Donec tempor bibendum neque. Curabitur ac augue id arcu consectetur adipiscing vestibulum non lorem. In ultrices aliquet augue, hendrerit scelerisque lorem interdum sit amet. Aliquam dictum ipsum varius nisl faucibus ultricies. Vivamus sollicitudin, ligula sed consequat suscipit, augue nulla placerat ante, eu tempus turpis ligula ut mauris.</p>
          <br/>
          <p>Praesent vehicula nisi in velit fringilla porttitor. Duis vulputate risus id sem fringilla auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer id placerat est. Mauris eu leo lacus. Maecenas nibh turpis, congue sed auctor mattis, vestibulum in dolor. Sed auctor commodo nunc. Donec varius posuere lorem, vel bibendum dui euismod vitae. Fusce nec accumsan leo. Maecenas et diam a eros adipiscing venenatis ac eget diam. Fusce semper massa sed eros fringilla sodales. Vestibulum a nibh velit, at adipiscing turpis. Maecenas quis nulla elit, a luctus nunc. Suspendisse nec risus vitae massa mattis adipiscing.</p>
          <br/>
          <p>Curabitur ultrices facilisis scelerisque. Vivamus varius ornare felis, et auctor lacus imperdiet ut. Vivamus vestibulum molestie tellus, eget pulvinar justo dignissim non. Fusce posuere orci vel ligula pretium tempor id sit amet ligula. Nam lectus sem, imperdiet a placerat et, pulvinar in diam. Suspendisse potenti. Nulla sit amet metus magna. Phasellus dapibus molestie mauris at tempus. Aliquam ac risus elit. Vivamus dapibus enim eu orci lobortis aliquam.</p>
          <br/>
          <p>Vivamus ullamcorper consectetur pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus eleifend nisi nec odio imperdiet molestie. Maecenas at nulla tortor, in condimentum lorem. Quisque aliquam tellus non velit varius fermentum. Vivamus sit amet nisi risus, sed sagittis risus. Duis dictum justo et diam vulputate egestas. Suspendisse vel lacus nibh, nec venenatis risus. Duis ac metus sapien, a sollicitudin mi. Vivamus elementum urna eget mauris laoreet hendrerit. Cras vestibulum rutrum nunc, et ultrices turpis congue in. Aliquam sed lorem ligula. Phasellus mollis erat in metus tincidunt pretium.</p>
          <br/>


  <h2>Image examples</h2>
  <p>&nbsp;</p>
  <div id="stock">
    <img src="images/stock.png" alt="Stock Images!" />&nbsp;&nbsp;&nbsp;<img src="images/stock.png" alt="Stock Images!" />
  </div>

<div id="featured_content">

        <div class="featured_block">
    <h3>Why Choose Multiverse?</h3>
    <div class="image" style="background-image:url(http://www.heroengine.com/wp-content/uploads/2011/10/Asset-Browser-Wireframes1.jpeg);"><a href="http://www.heroengine.com/heroengine/why-heroengine/"></a></div>
    <div class="text">
      <p>The Multiverse Platform, provides you with world building tools, renderer, integrated server architecture and an entire game’s worth of example code.</p>
    </div>
  </div>  
        <div class="featured_block">
    <h3>No Programming Required</h3>
    <div class="image" style="background-image:url(http://www.heroengine.com/wp-content/uploads/2011/10/Why-HeroCloud-IS-Right-For-You.jpg);"><a href="http://www.heroengine.com/herocloud/"></a></div>
    <div class="text">
      <p>You can actually make a functional MMO without programming knowledge. You only need to program when you want to make an advanced MMO.</p>
    </div>
  </div>  
        <div class="featured_block">
    <h3>Don't Spend A Cent</h3>
    <div class="image" style="background-image:url(http://www.heroengine.com/wp-content/uploads/2011/10/hfibhbcf.jpg);"><a href="http://www.heroengine.com/2011/10/failure-is-not-an-option-its-a-requirement-the-culture-of-testing-everything/"></a></div>
    <div class="text">
      <p>President and COO of HeroEngine, Neil Harris, discusses failure, it’s role in online game development and the culture of testing everything in his latest blog post.</p>
    </div>
  </div>  

</div>
</div>
<?php include("footer.html");?>
</html>

Answer 1

对于您的网页，body标记在标记的一半处结束..

无论如何，进入文件并希望尽可能靠近文档末尾移动<?php include("footer.html");?>，然后将#footer宽度设置为100％

Answer 2

我想index.php看起来像这样？

<div id="wrapper">
    <?php include("header.html");?>
    <div id="content">
    <!-- generate content -->
    </div>
    <?php include("footer.html");?>
</div>

更改它，以便在包装器footer.html之外包含div：

此外，您的包含（header.html，footer.html等）本身就是完整的HTML文档。也就是说，它们包含<html>和<body>标记。这非常糟糕。

浏览器看到的最终页面应该只有一个html元素和一个body元素。这些包括不应该包含除要在给定点插入的实际HTML元素之外的任何内容。

例如，footer.html应如下所示：

<div id="footer_wrap">
    <!-- code for footer -->
</div>

有时更容易使用包含[.include，.tmpl等]的不同文件扩展名作为快速提示，它们不是完整的HTML文档。

为您解决所有问题。 Download here。基本上，我从html中移除了无关的body和index.php标记，并在div的开头而不是在结尾处关闭了包装footer.html。这有效地“拖拽”它在包装div之外。

Answer 3

这里的其他答案是正确的：您需要将页脚拉到包装器外面，然后确保在您的样式表中有

#footer_wrap {width:100%;}

但是，如果您不想移动标记（如果您无法访问模板文件），则可以在页面加载后使用javascript或jquery展开页脚。但这绝对是最后的选择。

将页脚放在包装器外面

3 个答案: