（html/css）需要全宽页眉/页脚帮助：三面空白/空白

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

我是这样的业余爱好者，试图帮助一个朋友建立一个零预算的网站

我使用的是Kompozer/NVU，以防与答案相关

当你听到/看到我这样做时，请不要畏缩，不知道我冒犯了多少html或css神；-）我的问题也将是简单的英语，很少或没有适当的术语…你已经得到警告

[mods注意：我还敢绕过你的垃圾邮件保护新手规则，最多2个链接，因为我没有程序员语言，一个链接可以帮助澄清我的问题，因此我希望这对每个人都有利。没有垃圾邮件，承诺！]

我的具体目标：

我希望我的页眉和页脚（在本页：）为

粘/总是在底部

周围有0页边距/空白

最好的

~760-960px内容区始终居中且

除非小于内容区域，否则不会在未最大化的浏览器中显示滚动条

（我知道3和4[哦，第二套1/2，这个编辑正在编辑我…]是独立的问题，所以没有必要为完整的响应解决它们，但是对于许多人来说，它们似乎是成对的，所以为什么不试着把它们放在一个地方……）

我的问题：

那么,简而言之,以上这些目前都不是这样

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

这是一种过时/愚蠢的方法（我应该在身体外使用CSS框？）

它周围的白色间隔不是来自网站，而是实际的“家长”，即浏览器

我学到的/尝试过的

几个小时的研究和尝试让我很沮丧，但如果你知道合适的关键词，谷歌和stackoverflow的效果会更好……我知道，这很令人震惊

我找到的最合适的教程是 ,

但我甚至不能按照这些简单的指示去做，因为它们似乎假设了一个我显然缺乏的非常基本的理解

我的以下内容如下所示：

abchealth.info/testx/

页眉解决方案工作得很好，但我正在为页面背景图像使用CSS body标记，因此这不是我的选项，我需要另一种方法来完成它（与页脚相同？）

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

什么对我最有帮助

你的回答越是“通俗易懂”，或者直接复制/粘贴到这里就更好了，使用CSS标签之类的设置，我就越可能不需要回答更愚蠢的问题

我希望我的问题没有冒犯任何人，如果我冒犯了，你不应该读到这么深，我仍然爱你：-）

为了帮助/节省30秒，css文件是链接到上面的“test”文件夹（而不是“testx”）中的main.css

非常感谢您的帮助

Michael首先让您控制页面布局。表格可以显示表格数据，但肯定不是网站。我已经列出了一些可以让你开始了解如何“某种程度上”实现你想要的东西的方法。我会尽力回答你的任何问题

标记

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

基本上我们在这里说的是，我们希望我们的主容器是可用空间宽度和高度的100%。它包括一个页眉和内容以及一个footerclear元素（这是为了防止content中的内容流过页脚，因此在此设置一个合理的高度）。Outfooter元素位于主容器外部，100px进入主容器（以防止在没有足够内容时显示在页面外）。主容器上的页边距底部必须始终与页脚的高度相同才能起作用

为了进一步阅读，我一直喜欢布局

编辑1

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

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

---

不是100%确定，但我认为这可能是你想要的：

---

我的解决方案与Delan的类似，但我现在已经编写了所有代码，因此我将发布它：

编辑：嗯，看来他删除了他的答案

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

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

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

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

---

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

标题

，

页脚

和

部分

请在此处发布相关代码。回答你的问题：你用桌子来布置，现在它咬你的屁股。这样的事情应该让你开始：首先，我想表达我对这个社区的感谢，你们所有人都对一个陌生人如此友好地回应，尤其是一个显然没有任何东西可以回馈这个特殊社区的人。我不知道你是否还意识到这有多特别…谢谢你。Terric，你的小提琴似乎正是我想要的，你的代码肯定改进了我的工作，谢谢你…但是，我仍然在页眉和页脚（页眉/f）周围获得相同的空间

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;
}
​

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

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