Div div e child div estendono almeno l'intera altezza della finestra del browser

Ho bisogno di avere immagini che si estendono lungo i lati sinistro e destro del mio div del corpo principale (in realtà per una sorta di effetto ombreggiatura sotto il div).Div div e child div estendono almeno l'intera altezza della finestra del browser

Questo sarebbe semplice se non fosse per il fatto che io voglio questo div essere espandibile, e ho bisogno di lavorare in IE7 e IE8, e lo voglio estendere ad almeno nella parte inferiore della la pagina.

Ho provato a utilizzare il polyfill per far andare la magia CSS3 ma non funzionavano neanche (ho provato PIE e alcuni filtri senza fortuna).

Mi sento come se avessi provato tutto ... che mi porta qui! Questo è quanto ho ottenuto tramite appena CSS/html, mi sento come dovrei essere in grado di farlo funzionare, ma finora nessun sigaro:

<div class="left-image"> 
<div class="right-image"> 
main body text 
</div> 
</div>

con il seguente CSS:

html,body{ 
    height: 100% 
} 
.left-image{ 
    background: transparent url('image/url.png') repeat-y top left; 
    min-height: 100%; /*this alone works for making outer div extend browser & content height*/ 
    min-width: 960px; 
    max-width: 1280px; 
    margin: 0 auto; 
} 
.right-image{ 
    background: transparent url('image/url.png') repeat-y top left; 
    height: 100%; /*this only makes the div the height of its content*/ 
}

Questo risulta nel div .left-image che riempie l'altezza della finestra del browser o l'altezza del contenuto (a seconda di quale è più grande), ma il div di immagine destro si adatta solo all'altezza del contenuto (quindi se il contenuto è più piccolo della finestra del browser non lo riempirà).

Un modo per aggirare questo? Basta usare jQuery?

fonte

2012-01-22 Sabrina Leggett

Questo è un problema comune senza una soluzione semplice. CSS3 lo risolverà ma supportare i browser più vecchi significa che non andrà via presto.

check out

http://www.alistapart.com/articles/fauxcolumns/

e vedere se questo si punta nella direzione giusta. Fondamentalmente hai bisogno di fingere (colonne false) o usare javascript per quanto ne so.

fonte

2012-02-16 23:35:18

Poiché si tratta di un hit di Google con il punteggio più alto, I volevo solo aggiungere che "CSS3 lo risolverà" significa http://stackoverflow.com/a/16837667/1463507 – kqr

Una soluzione economica che ho usato in passato è stata quella di impostare le posizioni superiore e inferiore a zero.

.left-image{ 
    background: transparent url('image/url.png') repeat-y top left; 
    /*min-height: 100%;*/ 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    min-width: 960px; 
    max-width: 1280px; 
    margin: 0 auto; 
} 
.right-image{ 
    background: transparent url('image/url.png') repeat-y top left; 
    /*height: 100%;*/ 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
}

fonte

2012-01-22 22:51:48 Shredderroy

Grazie! Ciò funziona perfettamente in termini di ottenere il div per adattarsi allo schermo, ma se si scorre verso il basso nel documento il div non si allunga per il contenuto (si ferma non appena si scorre). Mi chiedo se potrei fare qualcosa con la posizione: fisso (magari rendere il contenuto in div separato? Ci giocherò con esso ...) –

-1

ho finito per usare:

$(".left-image, .right-image").height($(document).height());

(ho usato su carico documento, sulla finestra di ridimensionamento, e quando le chiamate Ajax sono fatti che potrebbe espandersi pagina)

penso che il mio nuova regola sarà che se qualcosa mi prende più di venti minuti per capire usando css da solo ho intenzione di andare nel modo più semplice e utilizzare javascript/jquery ...

fonte

2012-01-23 11:42:48

I tuoi tentativi nella tua domanda mostrano che non conosci bene il CSS e che cadi nell'uso jQuery "trap significa che hai scelto di rinunciare invece di imparare come funziona. – Rob

guidarmi nella giusta direzione è più utile che criticare la mia conoscenza ... Non so tutto sui CSS, altrimenti non mi chiederei qui. –

Questo potrebbe essere risolto in css. – Dementic

Probabilmente starai meglio con noi un'immagine di sfondo - vedere http://jsfiddle.net/ZXpyT/ per un esempio. Si noti che ciò presuppone che il contenuto del corpo sia largo 960 px; l'idea sarebbe quella di creare un'immagine (ripetibile verticalmente) che sostituisca le attuali immagini sinistra/destra separate.

fonte

2012-01-26 23:56:22 Conan

Lo sfondo deve espandersi e restringersi con il div principale. Il div principale ha un min-with di 960px e una larghezza massima di 1280px e ho bisogno dell'immagine di sfondo per bordarla a qualsiasi larghezza, motivo per cui ho bisogno che siano due immagini separate. –

è possibile specificare più sfondi per il tuo div involucro anziché alle 2 div, come questo

.wrapper{ 
background: url('left.jpg'),url('right.jpg'); 
background-repeat: repeat-y, repeat-y; 
height:100%; 
}

dispiace di aver perso la matrice del browser che si desidera supportare ... beh eccolo goes..try questo ..questo lavorato per me in tutti i browser

<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      .left-image{ 
       background:grey; 
       min-height:100%; 
       height:100%; 
       width:100%; 
       position:absolute; 
      } 
      .right-image{ 
       background:#eee; 
       min-height:100%; 
       height:100%; 
       width:50%; 
       margin:0 auto; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="left-image"> 
      <div class="right-image"> 
       main body text 
      </div> 
     </div> 
    </body> 
</html>

fonte

2012-01-27 10:24:09 Abhidev

http://www.w3schools.com/css3/css3_backgrounds.asp Gli sfondi multipli non funzionano in IE8 e sotto. Non sono stato in grado di far funzionare il PIE e non sono sicuro che valga la pena di combatterlo o semplicemente di usare JS. –

Bel tentativo! :) Se inserisci del testo che si estende più dell'altezza della finestra del browser, non funziona. Ti sto dicendo ... sembra facile ma non così tanto! –

un altro modo potrebbe essere ... dare posizione: fisso a div immagine a sinistra. Hai provato questo? – Abhidev

Perché non dare .left-imageheight:100%? Alcuni browser per ottenere il 100% di larghezza/altezza del browser, devi impostare ogni elemento contenente al 100%.

fonte

2012-02-09 22:17:03

Che ne dici di height: inherit;? Dovrebbe prendere l'altezza del tag genitore così com'è.

fonte

2012-02-10 13:39:50 Giannis

funziona quando il contenuto è almeno all'altezza della pagina, ma avevo bisogno che i div fossero alti almeno quanto la finestra del browser. Penso di aver letto da qualche parte quell'altezza: il 100% non funziona quando l'elemento esterno ha un valore automatico e l'altezza minima è considerata automatica, questo è probabilmente il caso anche di ereditarietà –

Stai usando min-height sull'immagine di sinistra, perché non anche sull'immagine giusta?

fonte

2012-02-12 11:41:21 JuanOjeda

-1

C'è una soluzione davvero semplice. Aggiungi questo al tuo css display: bock;

fonte

2012-03-06 20:05:30

Div div e child div estendono almeno l'intera altezza della finestra del browser

risposta

Problemi correlati