Expand div vertikal

Ich habe ein einfaches Problem mit divs. Ich möchte ein großes div ("Container") erstellen, das den ganzen Bildschirm abdeckt und zwei weitere divs ("A" und "B") hineinlegt. "A" hat 200px Höhe und ich möchte "B", um den verbleibenden Platz wie auf dem Bild links abzudecken. Im Folgenden füge ich meinen Code ein, aber es funktioniert nicht richtig, weil "B" auch außerhalb von "container" ist, wie auf dem Bild rechts. Weiß jemand, wie man "B" ausdehnt, um den verbleibenden Platz in "Container" abzudecken, wie auf dem Bild links? Ich wäre dankbar für die Antwort.Expand div vertikal

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

Quelle

2012-11-05 mchrobok

http://jsfiddle.net/S27an/ hier seine RAN sehr schön, was Problem ist das.? – Selvamani

Sie konnten die ‚widersprüchlichen absolu verwenden te Positionierung‘Technik wie folgt aus:

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

Die Grundidee ist, dass die divs auf die Koordinaten gestreckt werden Sie angeben. Hintergrund here on ALA.

Quelle

2012-11-05 14:09:32

Versuchen:

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

Quelle

2012-11-05 14:06:38

Sie können dies versuchen:

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

Quelle

2012-11-05 14:10:21

Expand div vertikal

Antwort

Verwandte Themen