好的,问题在于:
我的左侧菜单无法正确显示页面大小。如果内容不必滚动,则页脚应位于底部,菜单div应向下延伸以触摸页脚。我尝试了粘性页脚技巧或w / e它被称为...但菜单没有运气。
这是我的CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
background: #999966 url(bgbottom.png);
background-attachment: fixed;
background-position: bottom;
background-repeat: repeat-x;
}
a {
color: #29211D;
}
h2 {
font-size: 26px;
font-weight: normal;
}
.head {
background-image: url(bg.jpg);
width: 100%;
border-bottom: 4px solid #29211D;
overflow: hidden;
height: 185px;
}
.nav {
background-color: #29211D;
width: 150px;
color: white;
padding: 10px;
height: auto !important;
min-height: 100%;
font-size: 14px;
float: left;
}
.content {
font-size: 14px;
width: 80%;
float: left;
padding-left: 10px;
padding-right: 10px;
height: auto !important;
min-height: 70%;
background-color: #FFF;
border: 2px #666 solid;
margin-left: 2%;
margin-top: 1%;
}
.footer {
background-image: url(bg.jpg);
border-top: #29211D solid 3px;
border-bottom: #29211D solid 3px;
text-align: center;
font-size: 12px;
padding-top: 3px;
padding-bottom: 3px;
}
答案 0 :(得分:2)
如果我了解您要执行的操作,您希望导航部分触及页脚的底部?如果是这样,那是一个简单的改变:
将.nav类的min-height属性从min-height: 70%;
更改为min-height: 100%;
Demo (obviously without all the pictures on it)
当前.css:
@charset "utf-8";
/* CSS Document */
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
background: #999966 url(bgbottom.png);
background-attachment: fixed;
background-position: bottom;
background-repeat: repeat-x;
}
a {
color: #29211D;
}
h2 {
font-size: 26px;
font-weight: normal;
}
.head {
background-image: url(bg.jpg);
width: 100%;
border-bottom: 4px solid #29211D;
overflow: hidden;
height: 185px;
}
.nav {
background-color: #29211D;
width: 150px;
color: white;
padding: 10px;
height: auto !important;
min-height: 73%;
font-size: 14px;
float: left;
overflow: auto;
}
.content {
font-size: 14px;
width: 80%;
float: left;
height: auto !important;
padding-left: 10px;
padding-right: 10px;
background-color: #FFF;
border: 2px #666 solid;
margin-left: 2%;
margin-top: 1%;
}
.footer {
background-color: #999966; /* Can probably be removed as you will have a background image */
width: 100%;
position: absolute;
bottom: 0;
background-image: url(bg.jpg);
border-top: #29211D solid 3px;
border-bottom: #29211D solid 3px;
text-align: center;
font-size: 12px;
padding-top: 3px;
padding-bottom: 3px;
z-index: 100; /* Since it is will need to overlay the background of the navigation behind it */
}
希望有所帮助:)