我有div的简单问题.我想创建一个覆盖整个屏幕的大div(“容器”)并将其他两个div(“A”和“B”)放入其中. “A”的高度为200px,我希望“B”能够覆盖左侧图片上的剩余空间.下面我粘贴我的代码,但它无法正常工作,因为“B”也在“容器”之外,如右图所示.有谁知道如何扩展“B”以覆盖左侧图片中“容器”中的剩余空间？我很感激答案.
的index.html
style.css文件
#container {
border-color: blue;
width: 100%;
height: 100%;
}
#A {
border-color: green;
height: 200px;
min-height: 200px;
max-height: 200px;
}
#B {
border-color: red;
height: 100%;
overflow: hidden;
}
#A,#B,#container {
border-style: solid;
border-size: 1px;
}
最佳答案
您可以使用“冲突的绝对定位”技术,如下所示：
原文链接：https://www.f2er.com/html/425897.html#container {
border-color: blue;
width: 100%;
position:absolute;
top:0;
bottom:0;
}
#A {
border-color: green;
height: 200px;
}
#B {
border-color: red;
position:absolute;
top:204px;
bottom:0;
left:0;
right:0;
}
#A,#container {
border-style: solid;
border-width: 4px;
}
基本思想是将div拉伸到您指定的坐标.背景here on ALA.
