Html 带底部属性的绝对定位div的页边距顶部_Html_Css_Position

Html 带底部属性的绝对定位div的页边距顶部

html css

Html 带底部属性的绝对定位div的页边距顶部,html,css,position,Html,Css,Position,我正在创建一个div作为页脚，如下所示： <div class="content">blah blah blah</div> <div class="content">more content</div> <div class="content">even more content</div> <div id="footer">blah blah blah</div> 那么如何在内容和页脚之间留出5

我正在创建一个div作为页脚，如下所示：

<div class="content">blah blah blah</div>
<div class="content">more content</div>
<div class="content">even more content</div>
<div id="footer">blah blah blah</div>

那么如何在

内容

和

页脚

之间留出

50px

的空间呢？我尝试在两者之间添加一个间隔div，但没有成功。间隔棒div需要大于

内容物的高度

，才能产生任何效果。我尝试了将

页边顶部

改为

#页脚

，但没有效果，但我不希望

内容

有

页边底部

，因为内容容器是多个的。为

内容设置底部边距将破坏它们的渲染方式。谢谢你的帮助
请注意，这不是对的副本
编辑：从下面的评论中，您要查找的是静态页脚
#footer{
    height: 50px;
    display: block;
    margin-top: 50px;
}


我是一个如此无知的人，我无法对更多信息发表评论：|。我想你可能是想达到一个页脚总是出现在页面底部的效果？如果你能提供一个你想要达到的效果的例子，我很乐意用更具体的信息编辑我的答案
无论如何，因为您使用的是绝对定位，所以该元素将从文档流中删除，并且不会影响页面上的任何其他元素。这意味着利润不起作用。固定定位也是如此，如果你正在做一个固定的定位，这就是你真正想要的
如果希望边距对图元产生任何影响，则需要将“图元显示”特性设置为块级图元（块、表、内联块等），并将其定位为静态（默认）或相对
对于健壮的粘性页脚，最干净的方法是使用flex box。注意使用语义html标记和类而不是id
<style>
     /**
     * 1. Avoid the IE 10-11 `min-height` bug.
     * 2. Set `flex-shrink` to `0` to prevent Chrome, Opera, and Safari from
     *    letting these items shrink to smaller than their content's default
     *    minimum size.
     */
    .site {
        display: flex;
        flex-direction: column;
        height: 100vh; /* 1 */
    }
    .header,
    .footer {
        margin-top: 50px;
        flex-shrink: 0; /* 2 */
    }
    .content {
        flex: 1 0 auto; /* 2 */
    }
</style>

<body class="site">
    <header class="header">…</header>
    <main class="content">…</main>
    <footer class="footer">…</footer>
</body>


/**
* 1. 避免IE 10-11“最小高度”错误。
* 2. 将“flex-shrink”设置为“0”，以防止Chrome、Opera和Safari受到攻击
*让这些项收缩到小于其内容的默认值
*最小尺寸。
*/
.地点{
显示器：flex；
弯曲方向：立柱；
高度：100vh；/*1*/
}
.标题，
.页脚{
边缘顶部：50px；
弹性收缩：0；/*2*/
}
.内容{
弹性：10自动；/*2*/
}
…
…
…

菲利普·沃尔顿提供
请注意，这只适用于较新的浏览器，因此，如果您支持旧版本的IE，则需要使用基于固定位置的粘性页脚，或者将粘性页脚全部忘记。
好的，让我们来讨论一下
也许这对你的人生有点帮助：

如果您描述您想要实现的行为，包括页面在不同大小下应该如何响应，这会有所帮助。也许你可以用叉子（复印）笔，做些补充来帮助我们理解你的问题
祝你好运

。外部{
位置：绝对位置；
溢出：滚动；
背景：#ccc；
底部：100px；
左：0；
右：0；
排名：0；
}
.内容{
轮廓：1px纯蓝色；
}
#页脚{
轮廓：1px纯红；
背景：#ccc；
高度：50px；
显示：块；
位置：绝对位置；
右：0；
左：0；
底部：0；
}

废话废话
更多内容
更多内容
诸如此类诸如此类的废话
Ya，它不会那样工作的。因为您给了#footer一个绝对位置，所以它的位置与文档中其他元素的位置无关
在两个互不相关的事物之间不会显示任何边距或填充。
绝对定位时，这并不理想。。。你想要实现什么？好吧，bottom
只有在position:absolute
的情况下才有效。另外，我想把#页脚
放在页面底部。你能提供一个你正在尝试的东西的草图吗？我们无法从您提供的代码中猜出您想要什么…谢谢j08691。我已经更正了错误。@Milkmannetje我已经添加了草图。谢谢Simon。但我不希望页脚粘在底部。我想让它和内容一起滚动，并作为页面上的最后一件事，但在它和最后一个内容之间有一些空间。我只是想确切地了解你在寻找什么样的行为。页脚要么是粘性的，要么不是粘性的。如果你想要一个粘性的页脚-使用上面提供的任何代码示例，如果没有，那么你可以删除position:absolute并添加页边距顶部：50px。这实际上取决于当页面上的内容很少或页面上的内容很多时，您希望页脚的行为。当页面超长时，您是否希望您的用户必须滚动亿万年才能到达页脚？当页脚很少时，是否希望页脚保持在底部content@TroubleZero如果你对这个答案感到满意并且它有效，你能接受这个答案吗。
<style>
     /**
     * 1. Avoid the IE 10-11 `min-height` bug.
     * 2. Set `flex-shrink` to `0` to prevent Chrome, Opera, and Safari from
     *    letting these items shrink to smaller than their content's default
     *    minimum size.
     */
    .site {
        display: flex;
        flex-direction: column;
        height: 100vh; /* 1 */
    }
    .header,
    .footer {
        margin-top: 50px;
        flex-shrink: 0; /* 2 */
    }
    .content {
        flex: 1 0 auto; /* 2 */
    }
</style>

<body class="site">
    <header class="header">…</header>
    <main class="content">…</main>
    <footer class="footer">…</footer>
</body>