Div height:100%

**duri93** · 06-12-2010, 12:26

Salve ragazzi!
Sto creando un sito e mi sono imbattuto in questo problema che non sono riuscito a risolvere cercando in internet, perciò chiedo a voi

Nella mia pagina c'è un div #Navi con all'interno un'altro div .Sx
Sx serve per creare un bordo a sinistra di Navi, perciò deve avere la stessa altezza, ed è qui che il css non fa quello che vorrei: su browser tipo chrome e FF il div Sx prende height:100% e tutto è a posto, mentre (naturalmente) su IE il div Sx non si prende l'altezza giusta, ma una inferiore, non ricoprendo tutto il bordo.

Il codice è questo:

codice:

<div id="Navi">
     Un po di testo, che non ha lunghezza fissa ma cambia da pagina a pagina
     <div class="Sx"></div>
</div>

CSS:
div #Navi{
	background:url(../images/bg.png) repeat;
        width:513px;
	position:relative;
	top:16px;
 }
div #Navi .Sx{
	background-image:url(../images/navi_sx.png);
	background-repeat:repeat-y;
	width:7px;
	height:100%;
	position:absolute;
	top:0px;
	left:-7px;
 }

Penso che questo sia dovuto al fatto che Navi non ha altezza fissa...
Qualcuno mi può aiutare??

PS: Ho visto una soluzione che si basava su javascript, ma preferirei evitarla se possibile

GRAZIE a tutti in anticipo!!

**duri93** · 07-12-2010, 20:41

Up! Per favore rispondete!

GRAZIE!

**Mich_** · 08-12-2010, 20:40

Perche` c'e` uno spazio nel CSS tra div e #Navi?
Vuol dire l'oggetto #Navi solo se e` contenuto dentro un altro <div>, mentre se capisco il tuo raginamento tu vuoi il <div> che ha id="Navi", e allora lo spazio non ci va.

E perche` usi i posizionamenti assoluti? Io proverei a dare posizionamento relativo al .Sx.

Ma comunque non mi pare una buona idea, quella di inserire un blocco solo per fare un bordo. La cosa corretta sarebbe di usare l'attributo border dei CSS.

**duri93** · 08-12-2010, 22:25

1 - Lo spazio è solo un errore di scrittura perchè ho riscritto velocemente solo la parte di css interessata;
2 - Con il posizionamento relativo non capisco cosa vuoi dire (cioè so cos'è il posizionamento relativo, però l'oggetto non viene levato dal flusso del documento quindi mi troverei il contenitore alto come il contenuto+il bordo, o forse aggiungere anche display:inline-block?)

3 - Non ho usato l'attributo border perchè non avevo visto che si poteva specificare un'immagine

;
Domani provo a cambiare il css con border-image, poi ti dico come è andata questa esperienza;

Comunque, solo per curiosità, é possibile riuscire a impostare height:100% ad un div contenuto in un'altro di altezza variabile?

Buona notte e grazie mille!

**duri93** · 09-12-2010, 16:28

Cattive notizie!
Ho utilizzato border, e funziona davvero alla geande! Peccato che a internet explorer (ho provato sull'8) non va bene!
Precisamente non viene visualizzato nulla riguardante il bordo... mi sapete dire perché?

Il codice incriminato è questo:

codice:

div#Header{
	width:738px;
	height:108px;
	/*background:url(../images/floor_bg.png) repeat;*/
	border-width:0px 15px 34px 23px;
	-moz-border-image:url("../images/border-header.png") 0 15 34 23 stretch stretch;
        -webkit-border-image:url("../images/border-header.png") 0 15 34 22 stretch stretch;
	border-image:(../images/border-header.png) 0 15 34 23 stretch stretch;
	text-align:center;
 }

e grazie ancora!

**Mich_** · 09-12-2010, 17:30

Che mi risulti IE si comporta in maniera (quasi) standard, ma solo se usi una DTD strict.
Se usi una transitional, IE si comporta in modo retrocompatibile, e alcuni attributi CSS non sono riconosciuti, mentre altri usano si comportano in modo diverso.

**duri93** · 09-12-2010, 17:44

Ho modificato da DTD transitional a strict, eppure non vedo risultati positivi...

E' giusta questa riga vero?

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

**duri93** · 11-12-2010, 17:56

Up!
Per favore rispondete... non so come venirne a capo... grazie

Ho provato a modificare la riga della dtd così

codice:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>

Ma non cambia nulla...

**Prill** · 11-12-2010, 18:42

border-image è proprietà dei css3 non ancora supportata da tutti i browser (firefox e Safari infatti usano i prefissi proprietari), Explorer la ignora anche nella versione 9 beta.
Per ottenere lo stesso effetto, potresti impostare l'immagine di sfondo che deve apparire a sinistra sul contenitore principale, a cui daresti un padding-left di 7 pixel, e al suo interno poi andrebbe il div con l'altro sfondo che lascerebbe scoperto uno spazio di 7 pixel a sinistra. Eviteresti così i posizionamenti assoluti con relativi problemi

**duri93** · 11-12-2010, 20:31

Quindi addio

border-image e si torna indietro... peccato me ne ero già innamorato

ok proverò quando avrò tempo a rifare tutte le immagini

e poi vedremo

Oppure torno ancora più indietro: prima dei layout table-less, come piace a mio fratello!

Ciao ciao alla prossima e grazie ancora

Discussione: Div height:100%

Strumenti discussione

Ricerca discussione

Visualizza

Div height:100%

Permessi di invio