Question

不断变化的问题

我原来的问题是页眉边距导致出现神秘的垂直滚动条。这部分是由于我试图实现的目标在未解决的并发症中有点模糊。我选择了一个表达其中一个并发症的简单问题。现在，在几个反馈周期之后，我已经能够改进我的问题，因为我现在可以更好地处理我试图解决的整体问题。这是我在其他StackExchange论坛上的经验。最好是在一个页面上发展问题并将结果保存在一个页面上，而不是在整个地方散布一些详细的问题，每个问题最终都会有大量的重复信息。

结论

现在的主要问题是如何正确地整理整个页面的不同部分。所以，我重写了标题以澄清这一点，希望现在这个问题更有趣或更合适。尽管我已经在CSS2.1文档中对此进行了研究，并阅读了有关使用框架和表来构建页面的错误的各种建议，但我仍然不清楚如何实现这一目标。在尝试Zemljoradnik的最新答案时，他已经应用了position: absolute和＆＃39; position：relative＆＃39;之间的关系，最终点击了我。我现在能够实现的目标是扩展他的解决方案中的想法here。

记录

在这里，我对先前的陈述/问题进行了编号，并根据我发布原始问题后的经验对其进行了评论。

（1）我觉得问题可能是由100%设置引起的，但我使用它的原因是由于网站管理员的另一个问题的答案关于将页脚保持在窗口底部，即使页面本身没有太多内容。 overflow:hidden的使用并不是真正的解决方案，因为当您有足够的内容需要垂直滚动时，您就会失去它。

评论（1）：正确。

（2）这是否意味着当视图矩形只是部分内容充满时，没有真正好的CSS3兼容解决方案让页脚粘贴到窗口底部？如果是这样，那么我将不再尝试这样做，因为我想创建一个仅使用W3C最新思路的网站。

关于（2）的评论：老实说，我认为想要在视图顶部附加一个标题，并且底部附有一个页脚，两者都可见，这没什么不对。时间和必要时在垂直滚动之间的内容。这在主计算机浏览器情况下运行良好。如果特别小的窗口设备出现问题，您可以创建一组单独的样式并使用media: media-type选项。这不是一个解决方案与另一个解决方案的妥协。

（3）我当然意识到我不必拥有margin: 2px。而不是在这里粘贴代码，我想任何人都可以从他们的浏览器中看到它，以下链接是我自己的底部附加页脚没有边距的结果。

Footer Experiment

对（3）的评论：Zemljoradnik的回答表明这很容易解决。在他的帮助下，我已经能够更进一步。我现在在顶部有一个绝对标题，在底部有一个绝对的页脚，主要内容在它们之间滚动。由于滚动条不会干扰页眉和页脚的形状，因此可以提供一致的外观。

（4）我原来的问题起初看起来似乎是一个简单的问题，但它解决了其他问题，我觉得我应该指出我不是只是计算机或数学的新手，或在互联网论坛上讨论它们，我故意提供一个MWE，现在被别人的编辑拆开了。我花了很多麻烦来隔离运行程序所需的相关样式并将它们放在标题中。我通常使用.css个文件，但认为将它们放在<head>中更容易粘贴到这个问题中，以便提供一个完整的工作示例，这通常是回答者所喜欢的。

遗憾的是，似乎没有协议可以在建议之前讨论建议的编辑。 StackExchange总的来说是一种民主的表现，当然这也是如此。我也不确定为什么这个问题是从网站管理员那里迁移出来的，因为具有讽刺意味的是，我首先得到了这个实验的想法。

关于（4）的评论：我支持这些评论，因为其中提到的一些要点是针对新用户，不一定是新手，只是新用户。建议如何改进问题比仅仅立即编辑某人而不进行讨论或通过不投票或在没有提供一些有用建议的情况下完全忽略它而诋毁问题要好得多。再一次，这就是我从maths.se和tex.se那里学到的。

原始问题正文

（5）有谁知道为什么在最顶层<div>添加非零保证金会导致垂直滚动条出现，即使页面几乎为空。我出于各种原因一直在尝试使用以下代码，我花了一段时间才意识到margin: 2px; <header>导致了这种奇怪现象。如果删除该行，问题就会消失。它发生在Safari和Firefox上。我在Mac上工作。

如果您正在使用它，您会在我的其他代码中看到任何可疑内容，请告知我们。我现在已经处于提出各种问题的边缘，但要么自己解决，要么通过搜索找到答案。我热衷于遵循所有最新的W3C指南等等。

对（5）的评论：这不是一个愚蠢的问题。我还要求对我的代码提出意见，我也认为这不是一个愚蠢的问题。 Zemljoradnik在这方面非常有帮助，我感谢他。

（6）

CSS

footer_thing.css

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
header.topic {
    border: 1px solid black;
    padding: 4px;
    background-color: #99CC99;
    width: auto;
    margin: 2px;
}
footer.topic {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid black;
    padding: 4px;
    background-color: #99CC99;
    height: 30px; /* Height of the footer */
}
span.boxed_links {
    display: inline-block;
    vertical-align: middle;
    padding: 4px;
    width: auto;
    border: 1px solid black;
    margin-left: 80px;
    background-color: #FFF7CA;
}
a.top_link {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 75%;
}
p.explain {
    max-width: 15cm;
    text-indent: 1.5em;
    padding: 4px;
    background-color: #FFCC33;
}

HTML

<html>
    <head>
        <title>
            Footer That Stays Put
        </title>
        <style media="screen" type="text/css">
            @import "footer_thing.css";
    </style>
    </head>
    <body>
        <header class="topic">
            <span class="boxed_links">
                <a class="top_link" href="">
                    Home
                </a>
                |
                <a class="top_link" href="">
                    Topics
                </a>
            </span>
        </header>
        <p class="explain">
        What's with the vertical scroll bar, there's hardly anything here?
        </p>
    </body>
</html>

关于（6）的评论：我有点恼火，因为在编辑完一部分之后我不得不将一些代码放回上面，所以我＆＃39已经修复了html部分是完整的工作代码。我再也不会粘贴完整的例子了。我有自己的网站，所以我只需提供相关工作页面的链接即可。

Answer 1

您为html和body元素提供了100％的高度，这意味着他们已经占据了整个窗口的高度（html占用了window的100％，{{{ 1}}占body}的100％。当您为其中一个孩子添加边距时，该边距会增加html元素的总高度，使其高度为100％窗口高度+ 2px。

修改您可以将页脚粘贴到页面底部。这是做到这一点的方法：

body

CSS：

<div id="scrollable-contanier"> <header> <span class="boxed_links"> <a class="top_link" href=""> Home </a> | <a class="top_link" href=""> Topics </a> </span> </header> <div id="content"> <p class="explain"> You can put as much content as you like in here, the fooret will stay locked to the bottom, and the rest of the page will have a scrollbar when needed. </p> </div> </div> <footer> </footer>

http://jsfiddle.net/P75f9/

这样你就可以利用html, body { height: 100%; width: 100%; position: relative; margin: 0; } #scrollable-contanier { position: absolute; top: 2px; left: 2px; right: 2px; bottom: 34px; overflow-y: auto; } header { height: 30px; border: 1px solid black; padding: 4px; background-color: #99CC99; } footer { position: absolute; height: 30px; left: 2px; right: 2px; bottom: 2px; background-color: #99CC99; border: 1px solid black; }和position: relative之间的关系，其中绝对定位的元素总是相对于它的第一个相对定位的祖先而定位自己。因此，通过赋予position: absolute元素100％的高度和宽度（这样它的高度和宽度不依赖于它的内容，而是拉伸以适合窗口），您可以使用body，{{1 }}，top和bottom属性可以将元素放置在窗口中的任何位置。

Answer 2

喜欢这样请remove html,body height:100%; or solution no. 2 :添加overflow:hidden;

<强> demo

<强> CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow:hidden;
}

或

<强> demo1

<强> CSS

html,body{ margin:0; padding:0; }

Answer 3

而不是身体第一个元素的上边距，而是在身体上使用填充，并使用框大小进行调整。

所以在你的CSS中，正文得到了

margin: 0;
padding: 2px 0 0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;

和header.topic获取

margin: 0 2px 2px;

就是这样。

Demo

使用CSS管理整体页面结构

3 个答案: