使用顶部,中间和底部部分的标记,问题是：
1-如您所见,尽管页脚div上具有position：absolute和bottom：0px,但黑色的页脚并未真正位于页面底部
2-更重要的是,leftSection,middleSection和rightSection DIV与页眉和页脚DIV重叠,实际上,在此提琴中,查看3个中间部分显示的文本的唯一方法是放置填充,以避免将其显示在中间.标头DIV.
我试过在MiddleContainer上放置30px的top和bottom值来解决重叠问题,但这不能解决问题,我只想将headerContainer放在顶部,将footerContainer放在底部,而所有3个中间部分都调整为100％高度. leftSection和rightSection具有固定的宽度,但是middleSection具有灵活的宽度和高度.
body {
margin: 0;
}
#mainContainer {
position: absolute;
right: 4%;
left: 4%;
height: 100%;
}
#headerContainer {
width: 100%;
z-index: 10;
position: absolute;
background: #323232;
color: white;
height: 30px;
}
#middleContainer {
height: 100%;
}
#leftSection {
position: absolute;
float: left;
width: 175px;
background: #71ABD1;
height: 100%;
overflow: auto;
color: black;
padding-top: 30px;
}
#middleSection {
position: absolute;
height: 100%;
background-color: yellow;
left: 175px;
right: 175px;
color: black;
padding-top: 30px;
}
#rightSection {
float: right;
height: 100%;
width: 175px;
border-left: 1px dotted black;
background: red;
color: black;
padding-top: 30px;
}
#footerContainer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #323232;
color: white;
}
headerContainer
leftSection
middleSection
rightSection
footerContainer