垂直展开div
我有div的简单问题.我想创建一个覆盖整个屏幕的大div("容器")并将其他两个div("A"和"B")放入其中."A"的高度为200px,我希望"B"能够覆盖左侧图片上的剩余空间.下面我粘贴我的代码,但它无法正常工作,因为"B"也在"容器"之外,如右图所示.有谁知道如何扩展"B"以覆盖左侧图片中"容器"中的剩余空间？我很感激答案.
的index.html
<html>
<head>
<link rel=stylesheet href="style.css" type="text/css" media=screen>
</head>
<body>
<div id="container">
<div id="A">text</div>
<div id="B">text</div>
</div>
</body>
</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;
}
您可以使用“冲突绝对定位”技术，如下所示：
\n\n\n\n#container {\n border-color: blue;\n width: 100%;\n position:absolute;\n top:0;\n bottom:0;\n}\n\n#A {\n border-color: green;\n height: 200px;\n}\n\n#B {\n border-color: red; \n position:absolute;\n top:204px;\n bottom:0;\n left:0;\n right:0;\n}\n\n#A, #B, #container {\n border-style: solid;\n border-width: 4px; \n}\xe2\x80\x8b\n基本思想是 div 被拉伸到您指定的坐标。ALA 的背景。
\n