Question

我有一个简单的div问题。我想创建一个覆盖整个屏幕的大div（“容器”）并将其他两个div（“A”和“B”）放入其中。 “A”的高度为200px，我希望“B”能够覆盖左侧图片上的剩余空间。下面我粘贴我的代码，但它无法正常工作，因为“B”也在“容器”之外，如右图所示。有谁知道如何扩展“B”以覆盖左侧图片中“容器”中的剩余空间？我很感激答案。

What I want to get Result produced by my code

的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;   
}

Answer 1

您可以使用“冲突绝对定位”技术，如下所示：

http://jsfiddle.net/TjArZ/

#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, #B, #container {
  border-style: solid;
  border-width: 4px;   
}

基本思想是将div拉伸到您指定的坐标。背景here on ALA。

Answer 2

尝试：

#A {
    border-color: green;
    height: 200px;
    position:relative;
    top:0;left:0;
}

#B {
    border-color: red;
    overflow: hidden;
    position:relative;
    top:200px;left:0;bottom:0;
}

Answer 3

你可以试试这个：

#container {
border-color: blue;
width: 100%;
height: auto !important;
height: 100%;
}

#A {
border-color: green;
height: 200px;
min-height: 200px;
max-height: 200px;
}

#B {
border-color: red;
height: 100%;

}

#A, #B, #container {
border-style: solid;
border-size: 1px;   
}

垂直展开div

3 个答案: