5

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

我想得到什么 我的代码产生的结果

索引.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>

样式.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;   
}
4

3 回答 3

4

您可以像这样使用“冲突绝对定位”技术：

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 拉伸到您指定的坐标。ALA的背景。

于 2012-11-05T14:09:32.837 回答
0

尝试：

#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;
}
于 2012-11-05T14:06:38.410 回答
0

你可以试试这个： 

#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;   
}
于 2012-11-05T14:10:21.620 回答