css - 中心 3 div 水平全屏

Question

请引用下图(浏览器屏幕):A、B、C 和 D 是 div。 A 和 C 具有固定的高度和宽度 = 100%。D是以B为中心的div。有人可以帮助 css 代码来完成这个吗？

如果可能，必须与 IE6 兼容。

Answer 1

您可以使用各种 css 属性来获取它。这是一个示例，根据您的依赖项进行更改

#A{
height: 100px;
background-color: orange;
}
#B{
height: inherit;
}
#D{
display: inline-block;
position: relative;
top: 50%;
left: 50%;
margin-top: 70px;
margin-left:-100px;
}
#C{
height: 100px;
background-color: green;
position: absolute;
bottom: 0px;
width: 100%;
}

See Demo