将页脚置于包装纸之外

发布于 2024-12-24 02:33:31 字数 6692 浏览 1 评论 0原文

目前，我的页脚（在此处找到）与包装纸的宽度相同。但是，我希望它能够占据页面的整个宽度。问题是，我似乎无法将其从包装中取出。我会向您展示我的index.php 文件，但它似乎无法在此处正确显示。

为了给您一个简短的概述，我使用

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

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

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

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

任何帮助都会很棒！

编辑 - 这是我尝试发布我的index.php代码：所有的缩进等使它看起来非常混乱，对此我深表歉意。如果您想查看 index.php、footer.html 和 header.html 的原始代码，这是下载链接

<?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>

原文

At the moment, my footer (found here) is the same width as the wrapper. However, I'd like to get it so that it goes the full width of the page.
The problem is, I can't seem to get it out of the wrapper.
I would show you my index.php file, but it doesn't seem to display properly here.

To give you a brief overview, I am using the

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

to call the footer into each of my pages, which are all PHP files. I am doing the same thing for the header as well.

If anyone has Google Chrome, with the Developer view (think it's a default extension, accessed with F12?) you'll see that the call is in the wrapper. If I drag the called footer_wrapper section and put it at the same level as the wrapper, by dragging it down to above the /body, it does exactly what I want, and expands the footer to cover the page.
EDIT: It works fine there, but that's only in Developer mode in Chrome, so nothing is saved. The problem is, I don't know how to replicate that in the actual PHP file

I know that was a poor explanation, but I'm really not sure how to explain it properly!

Any help would be great!

EDIT - Here is my attempt at posting my index.php code:
All the indents etc make it a look very messy, and for that I apologise. If you'd like to see the raw code for the index.php, footer.html and 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> </p>
  <div id="stock">
    <img src="images/stock.png" alt="Stock Images!" />   <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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迷荒 2024-12-31 02:33:31

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

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

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

另外，看起来您的包含内容（header.html、footer.html 等）本身就是完整的 HTML 文档。也就是说，它们包括和标签。这非常糟糕。

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

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

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

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

为您解决一切问题。在此处下载。基本上，我从 index.php 中删除了无关的 html 和 body 标签，并关闭了包装器 div footer.html 的开头而不是末尾。这有效地将其“拖”到包装器 div 之外。

I imagine index.php looks something like this?

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

Change it so you include footer.html outside of the wrapper div:

Also, it looks like your includes (header.html, footer.html, etc.) are themselves full HTML documents. That is, they include <html> and <body> tags. This is Very Bad.

The final page the browser sees should have only one html element and one body element. These includes should not include anything but the actual HTML elements you want inserted at a given point.

For example, footer.html should look like this:

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

It's sometimes easier to use different file extensions for includes [.include, .tmpl, etc.] as a quick reminder that they aren't full HTML documents.

Fixed everything up for you. Download here. Basically, I removed the extraneous html and body tags from index.php, and closed the wrapper div at the start of footer.html instead of at the end. Which effectively "drags" it outside that wrapper div.

回复收藏 0 原文

泪之魂 2024-12-31 02:33:31

您的页面出了问题， body 标记在标记的一半处结束。

无论如何，进入文件，您想要移动尽可能靠近文档末尾，然后将 #footer 宽度设置为 100%

回复收藏 0 原文

青丝拂面 2024-12-31 02:33:31

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

#footer_wrap {width:100%;}

但是，如果您不顾一切地不移动标签（如果您无权访问模板文件），页面加载后，您可以使用 javascript 或 jquery 展开页脚。但这绝对是最后的选择。

The other answers here are correct: you need to pull the footer outside the wrapper and then make sure that in your stylesheets you have

#footer_wrap {width:100%;}

However, if you're desperate not to move the tag (if you have no access to the template files), you can use javascript or jquery to expand the footer once the page loads. But this is definitely an option of last resort.

回复收藏 0 原文

~没有更多了~