个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
26
4
我有以下页面(死链接:http://www.workingstorage.com/Sample.htm)有一个页脚，我无法将其放在页面底部。
我想要页脚
CSS 是继承的，让我感到困惑。我似乎无法正确更改它以在内容上放置最小高度或使页脚位于底部。
最佳答案
在每个示例中，文本都是可自由编辑的，以说明内容在不同场景中的呈现方式。
body{ min-height: 100vh; margin:0; }
header{ min-height:50px; background:lightcyan; }
footer{ min-height:50px; background:PapayaWhip; }
/* The article fills all the space between header & footer */
body{ display:flex; flex-direction:column; }
article{ flex:1; }<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>body{
min-height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
}
header{
min-height:50px;
background:lightcyan;
}
footer{
min-height:50px;
background:PapayaWhip;
}<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>下面的这个方法使用了一个“技巧”，通过放置一个 ::after body 上的伪元素, 并将其设置为具有页脚的精确高度，因此它将占据与页脚完全相同的空间，因此当页脚为 absolute 时放置在它上面，看起来页脚真的占用了空间并消除了它的绝对定位的负面影响(例如，越过正文的内容)
position:absolute (没有动态页脚高度)body{ min-height:100vh; margin:0; position:relative; }
header{ min-height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }
/* Trick: */
body {
position: relative;
}
body::after {
content: '';
display: block;
height: 50px; /* Set same as footer's height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>html{ height:100%; }
body { min-height:100%; margin:0; }
header {
height: 50px;
background: lightcyan;
}
article {
height: 1%;
}
footer {
height: 50px;
background: PapayaWhip;
}
/**** Trick: ****/
body {
display: table;
width: 100%;
}
body > footer {
display: table-row;
}<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>关于CSS 使 HTML 页面页脚以最小高度停留在页面底部，但不与页面重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/643879/
26
4
0
这是我的代码 />100 1000 它不按要求工作.. 当提交表单时(并且在任何错误情况下)它返回到默认选中的单选按钮，即值 = 1000 用户必须再次单击值 = 100，而目标是，如果用户选择了 1
假设我有一个透明的红色 HTML 元素。当我悬停该元素时，它应该变成纯红色。当我停止悬停该元素时，它应该动画回到第一个状态，但仅在 X 秒后。 到目前为止一切顺利，请参阅代码片段。 我的问题是当我停止
我遇到了 cookie 情况，我的 cookie 会存储一个颜色名称或根本不存储任何内容。所以让我们这样解释吧。我的 cookie 与我网站的外观有关，我的网站有 3 种外观: 正常(完全没有 coo
这是我的问题。我有一张包含三个 div 的 Bootstrap v4 卡。 A 是最重要的一个，我希望它保持在左上角。 当页面较宽时，我希望 B 和 C 在 A 的右侧。 当页面变窄时，卡片缩小，C
示例表: uid time_stp traf 1 2016-01-13 00:00:00 6 1 2016-01-13 05:00:00 8 1
我是一名优秀的程序员,十分优秀！