0

不断发展的问题

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

结论

现在的主要问题是如何正确地装箱整个页面的不同部分。因此，我重写了标题以澄清这一点，希望现在这个问题更有趣或更合适。尽管我在 CSS2.1 文档中对此进行了研究，并阅读了有关使用框架和表格来构建页面的错误的各种建议，但我仍然不清楚如何准确地实现这一点。在尝试 Zemljoradnik 的最新答案时，他在其中应用了position: absolute与“位置：相对”之间的关系，这终于让我满意了。在这里可以看到我现在扩展他的解决方案中的想法所能实现的目标。

历史

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

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

对（1）的评论：正确。

(2)这是否意味着当视图矩形仅部分充满内容时，没有真正好的 CSS3 兼容解决方案可以让页脚附着在窗口底部？如果是这种情况，那么我将停止尝试这样做，因为我想创建一个仅使用 W3C 最新思想的网站。

对 (2) 的评论：老实说，我认为希望在视图顶部附加页眉和在底部附加页脚并始终可见并在必要时垂直滚动内容之间没有任何问题。这在主计算机浏览器情况下运行良好。如果特别小的窗口设备是一个问题，您可以创建一组单独的样式并使用该media: media-type选项。这不是用另一种解决方案妥协。

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

页脚实验

对 (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）的评论：我有点恼火，因为在编辑时部分代码被完全删除后，我不得不将一些代码放回上面，所以我已将其修复为 html 部分已完成工作代码。我不会再次粘贴完整的示例。我有自己的网站，所以我很容易提供相关工作页面的链接。

4

3 回答 3

2

你给了你的html和body元素 100% 的高度，这意味着它们已经占据了整个窗口的高度（html占 100%window和body100% html）。当您向其中一个子元素添加边距时，该边距加起来为body元素的总高度，使其高度为 100% 窗口高度 + 2px。

编辑： 您可以使页脚粘在页面底部。这是这样做的方法：

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

CSS：

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

http://jsfiddle.net/P75f9/

这样，您就可以利用 和 之间的关系position: relative，position: absolute其中绝对定位的元素总是相对于它的第一个相对定位的祖先定位自己。因此，通过赋予body元素 100% 的高度和宽度（这样它的高度和宽度不取决于它的内容，而是拉伸以适应窗口），您可以使用、 和top属性bottom将元素放置在窗口中您想要的任何位置。leftright

于 2013-10-07T09:59:40.183 回答
1

代替 body 中第一个元素的上边距，使用 body 本身的 padding 并使用 box-sizing 进行调整。

所以在你的 CSS 中，body 得到

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;

就这些。

演示

于 2013-10-07T14:00:18.487 回答
1

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

演示

css

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

或者

演示1

css

html,body{
margin:0;
padding:0;
}
于 2013-10-07T09:43:21.907 回答