-1

对于任何想要构建具有全宽页眉和/或页脚的简单 html 页面的相关业余爱好者/初学者来说，这是一个很有帮助的问题。

我是如此业余，并试图帮助朋友以零预算建立一个网站。

我正在为此使用 Kompozer/NVU，以防与答案相关。

当您听到/看到我是如何做到这一点时，请不要畏缩，不知道我冒犯了多少 html 或 css 神 ;-) 我的问题也将是简单的英语，很少或没有适当的术语......你一直警告。

[mods注意：我也敢于绕过你的垃圾邮件保护新手规则，最多2个链接，因为我缺乏程序员语言，一个链接说了一千个字来帮助澄清我的问题，因此我希望这对每个人来说都可以益处。没有垃圾邮件，保证！]

我的具体目标：

我希望我的页眉和页脚（在此页面上： http: //abchealth.info/doc-mike-special/test/）

  1. 粘/总是在底部
  2. 周围有 0 个边距/空白

最好的

  1. ~760-960px 内容区域始终居中
  2. 除非小于内容区域，否则在未最大化的浏览器中不会出现滚动条。

（我知道 3&4 [哦，第二组 1/2，这个编辑正在编辑我......] 是单独的问题，所以不需要解决它们来完成回复，但似乎它们会成对出现很多人，所以为什么不尝试将它放在一个地方......）

我的问题：

好吧，简而言之，目前情况并非如此。

页眉和页脚是简单的表格（所有 0px 边距、填充等），我目前的研究表明

  1. 这是一种过时/愚蠢的方式（我应该在身体外使用CSS框？）和
  2. 它周围的空白不是来自网站，而是实际的“父”，即浏览器。

我学到了什么/尝试了什么

我经历了几个小时的研究和尝试，但事实证明，如果你知道正确的关键字，谷歌和 stackoverflow 会更好地工作......我知道，这很令人震惊。

我似乎找到的最合适的教程是 http://www.sitepoint.com/css-extend-full-width-bars/#fbid=5AozZvdpZOs，

但我什至无法遵循这些简单的指示，因为它们似乎假设了我显然缺乏的非常基本的理解。

我的跟随看起来像这样：

abchealth.info/testx/

页眉解决方案运行良好，但我使用 CSS body 标签作为页面背景图像，所以这不是我的选择，我需要另一种方法来做到这一点（与页脚相同？）。

页脚我可能做对了，也可能做错了，我什至不知道，我只知道我现在无法让它看起来像我想要的那样/为页脚添加一个水平重复的图像并让它看起来像我的页面链接到上面（只是没有空白/居中/没有不必要的滚动条）。

什么对我最有帮助

您的回答越“通俗易懂”——或者甚至更好地直接复制/粘贴到这里，将这些设置用于那个 CSS 标记有点东西——我就越有可能不必再提出一个更愚蠢的问题......

我希望我的问题没有冒犯任何人，如果我这样做了，你不应该读到这么远，无论如何我仍然爱你:-)

如果它可以帮助/节省您 30 秒，则 css 文件是上面链接到的“test”文件夹中的 main.css（不是“testx”）。

非常感谢您的帮助！

迈克尔

4

3 回答 3

3

首先，您真的不应该使用表格来控制您的页面布局。表格可以很好地显示表格数据，但肯定不是网站。我已经将这个 jsFiddle 示例放在一起，它应该让您开始了解如何“某种”实现您正在寻找的东西。我会尽力回答你的任何问题。

标记

<div id="mastercontainer">
    <div id="header">This is the header</div>
    <div id="content">
        <div id="innercontentmiddle">
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
        </div>
    </div>
    <div id="footerclear"></div>
</div>
<div id="footer">This is the footer</div>

CSS

html, body {
    height: 100%;
    min-height: 100%;
    color: #fff;
}

div#mastercontainer {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin-bottom: -100px;
}

div#header {
    background-color: #f00;
    height: 100px;
}

div#content {
}

div#innercontentmiddle {
    background-color: #0f0;
    margin: 0 auto;
    width: 300px;
}

div#footerclear {
}

div#footer {
    background-color: #00f;
    height: 100px;
}​

基本上我们在这里所说的是，我们希望我们的主容器是可用空间的 100% 的宽度和高度。它包括一个页眉和内容以及一个footerclear元素（这是为了防止内容从您的内容流过您的页脚，因此在此设置一个合理的高度）。出页脚元素位于主容器之外，并在主容器中 100 像素（以防止它在没有足够的内容来保证它时显示在页面之外）。mastercontainer上的 margin-bottom必须始终与页脚的高度相同才能正常工作。

为了进一步阅读，我一直很喜欢这篇关于布局的文章。

编辑 1

如果您的页眉和页脚仍然有间距，那么很可能是您的 BODY 元素边距/填充。在您的 CSS 中尝试以下操作：

html, body {
    height: 100%;
    min-height: 100%;
    color: #fff;
    margin: 0;
    padding: 0;
}
于 2012-08-14T09:30:01.290 回答
0

不是 100% 肯定，但我认为这可能是您所要求的：

http://jsfiddle.net/gHWVe/5/

于 2012-08-14T09:36:38.390 回答
0

我的解决方案与 Delan 的类似，但我现在已经编写了所有代码，所以无论如何我都会发布它：http: //jsfiddle.net/EB8GP/

编辑：嗯，他似乎删除了他的答案。

HTML

<header>
    <h1>MySite</h1>
</header>
<section>
    <h2>Content</h2>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
</section>
<footer>
    <p>Copyright &copy; 2012</p>
</footer>​

CSS

header,
footer {
    background: #06c;
    text-align: center;

    /* Makes the header and footer stick to the top */
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}
footer {
    /* We want the footer in the bottom */
    top: auto;
    bottom: 0;
}
section {
    background: #eee;

    /* Centers the content area (margin: 0 auto) */
    width: 70%;
    margin: 0 auto;

    /* Here's the tricky bit, the margin-top needs to be exactly the height of the header (which may not be known) and the margin-bottom needs to be the height of the footer - I'm using an arbitrary number here and setting it properly with JS */
    margin-top: 15px;
    margin-bottom: 15px;
}
​

除非您为页眉和页脚都设置了固定高度，否则您需要使用 JS 计算它们的高度并相应地更改内容区域的边距：

$(function () {
    var headerHeight = $('header').outerHeight();
    var footerHeight = $('footer').outerHeight();

    $('section').css({
        marginTop:    headerHeight + 'px', 
        marginBottom: footerHeight + 'px', 
    });
});​

Edit2：在一个大型站点（不是 JSFiddle 示例）上，我会给出这些元素 ID 和样式以及脚本，因为您可能会使用多个header,footer和section.

于 2012-08-14T09:41:18.307 回答