Question

我在asp.net项目中使用了Ryan的粘性页脚。我在母版页和子母版页上使用过它我有一个垂直导航栏。问题是页脚在导航栏后面。我希望它在导航栏的顶部。在儿童母版页的右侧还有一个可滚动的水平空间，我不想要。另外我的一些页面内容较少，所以如何根据我的意愿改变其高度，以便我可以相应地设置页脚。

垂直导航栏：

#sidebar-nav ul{
background-color:#2ca8d2;
color: white;
height: 100%;
padding: 0;
position: fixed;
left: 0;
top: 50px;
width: 19%;
z-index: 2;
display:block;
}
#sidebar-nav li a {
display: block;
color: white;
padding: 8px 0 8px 16px;
text-decoration:none;
font-size:16px;
border-bottom: 1px solid #fff;
}

#sidebar-nav li a.active {
background-color: #4CAF50;
color: white;
}

#sidebar-nav li a:hover:not(.active) {
background-color: orangered;
color: white;
}

页脚：

 * {
 margin: 0;
 }
 form, html, body {
 height: 100%;
 }

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto 200px;
}
 .footer, .push 
 {
 height: 200px;
 background-color:#333;
 z-index:10;
 }
 .footer, .push {
  clear: both;
  }

Answer 1

我希望它位于导航栏的顶部。

因为你有

z-index: 2;

在垂直导航栏上

，您需要在页脚的主容器上使用更高的z-index，例如3。你在页脚类上有z-index 10，但我不知道你的html文件嵌套了什么。你能发布页脚和垂直导航栏的html代码吗？

粘性页脚低于内容

1 个答案: