5

私はdivに簡単な問題があります。画面全体をカバーする1つの大きなdiv（「コンテナ」）を作成し、他の2つの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>

スタイル.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 に答える