css - 使用CSS管理整体页面结构-6ren

css - 使用CSS管理整体页面结构

转载作者：太空宇宙更新时间：2023-11-03 21:48:16

不断发展的问题

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

结论

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

历史

在此，我为以前的陈述/问题编号，并根据发表原始问题以来的经验对它们进行评论。

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

评论（1）：正确。

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

关于（2）的评论：诚实地认为，将标头附加到视图的顶部，将页脚附加到视图的底部始终可见，并且在必要时使它们之间的内容垂直滚动是没有错的。这在主要的计算机浏览器情况下效果很好。如果出现异常小的窗口设备问题，则可以创建单独的样式集并使用media: media-type选项。这不是在一个解决方案与另一个解决方案之间进行折衷。

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

Footer Experiment

关于（3）的评论：Zemljoradnik的回答表明，这很容易解决。在他的帮助下，我已经能够进一步迈出这一步。现在，我在顶部具有绝对的页眉，在底部具有绝对的页脚，并且主要内容在其间滚动。由于滚动条不会干扰页眉和页脚的形状，因此外观一致。

（4）我最初的问题起初似乎只是一个简单的问题，但与解决其他问题纠结在一起，我觉得我应该指出，我不仅是计算机或数学的新手，还是在互联网论坛上讨论它们的人，故意提供一个MWE，该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部分已完全工作码。我将不再粘贴完整的示例。我有自己的网站，因此我很容易提供指向相关工作页面的链接。

最佳答案

您将html和body元素的高度设置为100％，这意味着它们已经占据了整个窗口的高度（html占据了window的100％，body占据了html的100％）。当您向其中一个子项添加边距时，该边距总计为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， left和 right属性可将元素放置在窗口中的任何位置。

关于css - 使用CSS管理整体页面结构，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19221457/

文章推荐： c - ubuntu上的opencv安装文件夹

文章推荐： opencv - Red5 与 OpenCv - 你怎么看？

文章推荐： javascript - 隐藏滚动条导致body向上滚动

css - 如何将 CSS 文件的 CSS 规则包含到另一个 CSS 文件的选择器中？
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点？ .someClass { //apply rules to
css - 将 css 文件移动到新的 css 文件夹后无法从我的 css 访问我的图片
在更新我的 css 之前，我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
css - css 3 中是否有任何 css 类分组 css 类？
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
css - 使用内联 CSS 删除从 CSS 文件继承的 CSS 属性
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。但是，如果元素中的某个属性弄乱了特定页面，而我不想只使用内联 CSS 在该页面中使用它怎么办
css - 初始规模与 desktop.css+phone.css+tablet.css？
我刚刚发现了 initial-scale 元属性。以前，我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素)，以便它们在桌面计算机的屏幕上显示得很好。然后，如果您使用的是
css - LESS CSS - 提取生成的 CSS
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗？我不想使用脚本
css - 如何将内联 CSS 转换为外部 CSS？
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页，我可以手动完成。但是有100页。有人有想法吗？最佳答案就像有人说的那样，“
css - 来自样式化组件时 CSS 模块中的动态 CSS
当我想从 Styled Components 迁移到 CSS Modules 时，出现了以下问题。假设我有以下样式组件，它接受动态参数 offset和一个动态 CSS 字符串 theme : con
css - 在 CSS 中引用 CSS
有没有办法将 CSS 类定义为与另一个类相等？例如，如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
css - 如何基于一个元素的 CSS 或它的前一个相邻兄弟的 CSS？
我正在尝试制作一组按钮，这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据，然后我用它来显示按钮。我的问题在于让按
css - 浏览器是否在加载 CSS 文件时解析 CSS？
浏览器是否在加载 CSS 文件时解析 CSS？还是在整个 CSS 文件被浏览器下载后才进行解析？不同浏览器的做法有区别吗？我在哪里可以找到这种底层信息？这个问题不是 Load and executi
css - 将已经定义的 CSS 添加到另一个 CSS
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。标题有点乱，我给大家看一下。假
css - css/main.css 是否还有其他用途？
我遇到了最奇怪的问题...... 在最简单的形式中，我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中，我已经大大减少了它) 当我查看页面的源代码时，我得到以下信息:
css - 如果缺少所需的 css，则加载备用 css
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间，min 文件不会与系统的其余部分一起发布。我有很多 css
css - CSS 框架和 CSS 网格有什么区别
请告诉我 CSS 框架和 CSS 网格之间的区别。最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途，例如 Hartija
css - 如何摆脱从 css 文件继承的 css？
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
css - 带有 CSS 模块的普通 CSS
我以前使用 bootstrap css import 很好。但是我正在尝试使用 CSS 模块，所以我添加了几行。 { test: /\.css$/, use:
css - CSS 中的嵌套 CSS 选择器
有没有办法在 css 选择器中创建一个 css 组。例如: .SectionHeader { include: .foo; include: .bar; include: .
css - CSS 定位和 CSS 边距之间的区别
今天我学习了 CSS 中的两个概念，一个是 CSS 定位(静态、相对、绝对、固定)，另一个是 CSS Margin，它定义了元素之间的空间。假设我想移动一个元素，这是最好的方法吗？因为这两个概念似乎
css - Gulp CSS 任务不会覆盖现有的 CSS
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 使用CSS管理整体页面结构