Html 带有固定页眉和固定边栏的粘性页脚
我正在尝试建立一个响应性强的网站，它有一个固定的页眉，一个用于垂直导航的固定侧边栏，底部有一个粘性的页脚。目前，我正在使用固定位置的页眉和侧边栏，以及众所周知的css-tricks.com的粘性页脚： 我的实施： 出于某种原因，粘性页脚不适用于此实现，因为它不会粘在我的内容的底部。你知道这里可能有什么问题或其他解决方案吗 HTML和CSS代码段：Html 带有固定页眉和固定边栏的粘性页脚,html,css,fixed,sidebar,sticky-footer,Html,Css,Fixed,Sidebar,Sticky Footer,我正在尝试建立一个响应性强的网站，它有一个固定的页眉，一个用于垂直导航的固定侧边栏，底部有一个粘性的页脚。目前，我正在使用固定位置的页眉和侧边栏，以及众所周知的css-tricks.com的粘性页脚： 我的实施： 出于某种原因，粘性页脚不适用于此实现，因为它不会粘在我的内容的底部。你知道这里可能有什么问题或其他解决方案吗 HTML和CSS代码段： 标题{ 位置：固定； 顶部：0px； 左：20%； 高度：150像素； 宽度：70%； 最大宽度：1000px； 文本对齐：右对齐； 填充：40px
标题{
位置：固定；
顶部：0px；
左：20%；
高度：150像素；
宽度：70%；
最大宽度：1000px；
文本对齐：右对齐；
填充：40px0；
z指数：3；
背景颜色：蓝色；
}
.侧边栏{
位置：固定；
左：10%；
排名：0；
宽度：10%；
身高：100%；
背景色：#000；
z指数：5；
}
.内容{
宽度：70%；
最大宽度：1000px；
填充：0px 0px 30px 0px；
位置：绝对位置；
顶部：150px；
左：20%；
z指数：1；
}
/*粘脚*/
* {
保证金：0；
}
html，正文{
身高：100%；
}
.换页{
最小高度：100%；
/*等于页脚高度*/
边缘底部：-50px；
}
.换页：之后{
内容：“；
显示：块；
}
.站点页脚，.换页：之后{
高度：50px；
}
.网站页脚{
背景：橙色；
}
Lorem ipsum dolor sit amet，是一位杰出的献身者。射手座的奎斯克。在一条无尾长尾蛇中，尤伊斯莫·马萨·ac，朗卡斯·图皮斯。不要在智人的头脑中思考问题，因为他们的思维方式是复杂的。不允许车辆行驶，不允许车辆行驶，不允许车辆行驶。在hac habitasse Plateum，一句名言。Morbi suscipit pharetra felis，在Volvopat quam cursus et.Maecenas quis ligula viverra，molestie mi ac，feugiat mauris。康瓦利斯，马萨和拉奥里特元素，缺陷的直径，但节杖的长度和长度。发酵悬钩子。整数梅特斯·努拉，弗林利亚·康莫坐在阿梅特，普尔维纳尔坐在尼布。请不要轻举妄动。枕叶直径，前圣帆。
梅塞纳斯·维韦拉·法雷特拉·康莫多。是一种新品种。这是一个很好的例子。非舌苔层的金属元素。前庭弧状前庭。无症状的晨曦，8月下旬的前庭，红色的晨曦。在狮子座的教堂里，教堂的前厅是一个小房间。Nam a suscipit dui。
南酵素拍卖人酒后驾车，在我的名言。这是一个很好的例子。这是一个很好的例子。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。这是一种有效的性爱，是一种变化莫测的魔力。整张白纸。以同侧为例，以红色为例，以红色为例。纳姆·阿利奎特（Nam aliquet）、比本杜姆·莫莱斯蒂（bibendum molestie）的猫咪、尼西·艾库利斯·利奥（nisi Elite iaculis leo）、埃吉特·坦普斯（eget tempus）和乌尔纳（dui vel urna）。这是一种新的侵权行为。Suspendisse坐着amet hendrerit eros。尼姆·泰卢斯，佩伦特斯凯坐在阿梅特·鲁特鲁姆·埃吉特的位子上，库鲁斯坐在阿梅特·努拉的位子上。在酒后驾车时，坐在那里的是一名警察。我是奥基十字勋章，叶舌门。
前情欲者，前情欲者，前情欲者，前情欲者，前情欲者。在hac habitasse Plateum，一句名言。这是一种温和的发酵剂。莫利斯·厄罗斯·奎斯·康塞特图之家。在nisl vulputate sollicitudin sed id elit中的Donec和metus。整数sed vulputate justo。埃涅阿斯药剂师的效率是非温和的。虎口浮雕和肘部浮雕同侧前庭；东部的不结盟运动、塞姆佩尔·奥迪奥·ac、特尔杜姆·图尔皮斯。同侧腓肠肌，同侧腓肠肌，同侧腓肠肌。索利西图丁奥奇威尼斯人，自由女神。
大鼠足跖足跖足跖足跖足跖足跖足跖足跖足跖足跖足跖足跖足跖足跖足跖足跖足跖足跖足跖足跖足。我不知道该怎么做。埃蒂亚姆·奥奇·阿库，波苏尔·乌特·利奥·ac，波苏尔·奥古斯。阿利奎姆·埃拉特·帕特。前庭，侧堂，侧堂，侧堂。无尾蛇。经门惊厥前庭。
页脚-学分-版权所有
<html>
<head>
<link rel="stylesheet"href="index.css">
<script src="index.js"></script>
</head>
<body>
<nav></nav>
<aside></aside>
<section></section>
<footer></footer>
</body>
</html>
我正在寻找一个粘性页脚，它与固定页脚完全不同。但是我问题中链接的粘性页脚与您Jordan提出的布局配合得很好，谢谢。它帮助我找到了一个可行的解决方案。
body{
margin: 0 !important;
width: 100vw;
height: 100vh;
}
nav{
height: 62px;
width: 100%;
z-index: 999;
position: fixed;
background: #1e67cb;
box-shadow: 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
section{
height: 300vh;
}
aside{
left: 0;
top: 20%;
height: 400px;
width: 200px;
background: #ECF0F1;
-webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
position: fixed;
}
footer{
bottom: 0;
z-index: 999;
position: fixed;
height: 64px;
width: 100%;
background: #1e67cb;
box-shadow: 0 -1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: 0 -1px 5px rgba(0,0,0,.6);
}