Espandiamo div verticalmente

Ho un semplice problema con le div. Vorrei creare un grande div ("contenitore") che copra tutto lo schermo e inserisca altre due div ("A" e "B"). "A" ha altezza 200px e vorrei "B" per coprire lo spazio rimanente come nell'immagine a sinistra. Qui sotto incollo il mio codice ma non funziona correttamente, perché "B" è anche all'esterno del "contenitore" come nell'immagine a destra. Qualcuno sa come espandere "B" per coprire lo spazio rimanente in "contenitore" come nell'immagine a sinistra? Sarei grato per la risposta.Espandiamo div verticalmente

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

fonte

2012-11-05 mchrobok

http://jsfiddle.net/S27an/ qui la sua Ran molto bello, che problema è questo.? – Selvamani

è possibile utilizzare il 'absolu in conflitto TE posizionamento' tecnica in questo modo:

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

L'idea di base è che il div sono allungati alle coordinate specificate. Sfondo here on ALA.

fonte

2012-11-05 14:09:32

Prova:

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

fonte

2012-11-05 14:06:38

si può provare questo:

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

fonte

2012-11-05 14:10:21

Espandiamo div verticalmente

risposta

Problemi correlati