CSS scatola di ombra su div contenitore provoca barre di scorrimento

Question

Ho un sito web con la seguente configurazione:

<div id="container"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="clearfooter"></div> 
</div> 
<div id="footer"></div> 

Io uso il clearfooter e un piè di pagina di fuori del contenitore per mantenere il piè di pagina nella parte inferiore della pagina quando là isn abbastanza contenuto

mio problema è che vorrei applicare un'ombra scatola sul contenitore div nel seguente modo:

#container {width:960px; min-height:100%; margin:0px auto -32px auto; 
      position:relative; padding:0px; background-color:#e6e6e6; 
      -moz-box-shadow: -3px 0px 5px rgba(0,0,0,.8), 
      3px 0px 5px rgba(0,0,0,.8);} 
#header {height:106px; position:relative;} 
#content {margin:0px; padding:10px 30px 10px 30px; position:relative;} 
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;} 
#footer {height:32px; padding:0px; position:relative; width:960px; 
      margin:0px auto 0px auto;} 

Come si può vedere la sua un'ombra su ogni lato del div contenitore. Tuttavia, nel fare questo, quando il contenuto non occupa l'intera altezza, ci sono ancora barre di scorrimento causate dall'ombra che spinge oltre il fondo del piè di pagina a causa della sfocatura.

C'è un modo per evitare che l'ombra superi il bordo del contenitore div e causi una barra di scorrimento?

Grazie per il vostro aiuto!

Answer 1

Webkit ha cambiato il suo comportamento recente come sottolineato qui: http://archivist.incutio.com/viewlist/css-discuss/109662

Infatti da oggi è ancora un problema in Gecko e forse altri browser.

---

Sono riuscito a risolvere questo brutto problema su Gecko utilizzando margini negativi che funzionano anche su tutti gli altri browser. Supponete di avere un elemento a schermo intero (E) con ombreggiatura applicata con offset zero e raggio sfocatura R. Supponiamo che abbiate a che fare con il problema della barra di scorrimento orizzontale perché l'ombra fa sì che l'elemento E si ritragga con larghezza aggiuntiva.

1. involucro E con l'elemento di supporto avvolgitore (W)
2. set overflow: nascosto W
3. imbottiture: R 0 R 0 su W margine
4. serie: -R 0 -R 0 su W

L'idea è di utilizzare l'overflow nascosto per eliminare le ombre problematiche a sinistra e a destra. E poi usa il padding + trucco con margine negativo per non tagliare le ombre superiori e inferiori e mantenere la scatola sullo stesso punto nel flusso HTML.

È possibile adattare questa tecnica per ritagliare eventuali lati arbitrari della casella ombra problematica.

Answer 2

Imho, e secondo i miei test sembra che l'ombra css su un elemento stia aumentando sia la larghezza totale che l'altezza della pagina (se l'elemento circostante ha larghezza o altezza impostata al 100%) come hai detto tu e io non trovato una soluzione css per questo problema ancora.

Quindi ho una domanda per te, come stai mantenendo il tuo footer in fondo alla pagina? e qual è la larghezza del footer?

Ho provato con il posizionamento assoluto (come sono abituato a fare quando voglio un piè di pagina nella parte inferiore della pagina) ma il problema è lo stesso con la larghezza, ovviamente è possibile impostare la larghezza di un percentuale come il 90%, ma il problema rimane ... ecco un frammento che illustrano questo semplice concetto Quindi questa non è una vera risposta, non ho trovato una soluzione per questo ancora

pastebin

Speranza è utile

Answer 3

Sull'elemento principale di #container, l'aggiunta di overflow: visible potrebbe risolvere il problema.

Anche se consiglio come generale per il piè di pagina in fondo, si consiglia di dimenticare invece sull'impostazione della min-height su #container e invece impostare piè di pagina con position: absolute e bottom: 0 e dare #container un margin-bottom in modo da non ottenere mai nascosto dietro il piè di pagina. Se hai intenzione di avere il piè di pagina nella parte inferiore della finestra usa solo position: fixed.

Spero che aiuti.

Answer 4

Bene, o la soluzione a questo problema è molto oscura o non esiste una soluzione con la tecnologia corrente. È davvero pessimo, non c'è modo di realizzare questo perché è un tema comune nel web design.

Ho fatto ricorso all'utilizzo di un'ombra Png in quanto sembra essere l'unica soluzione sensata.

Answer 5

Non sono sicuro se questa sia la soluzione migliore in quanto è necessario aggiungere un contenitore div, ma se si avvolge l'elemento in un contenitore div e si imposta l'overflow su nascosto, sembra funzionare. Dovrai impostare il padding dove vuoi che l'ombra sia visibile.

So che non è la soluzione migliore a questo, ma funziona bene e non riesco a capire qualsiasi altra soluzione.

Answer 6

Prova ad aggiungere padding-bottom: 8px (dimensione dell'ombra altezza + sfocatura) alla #container elemento.

Answer 7

La soluzione migliore per me almeno, poiché non implica alcun elemento di avvolgimento, è posizionare un rettangolo di ritaglio sull'elemento con l'ombra.

Nell'esempio sopra, qualcosa come clip: rect(-LARGE_VALUE -LARGE_VALUE auto LARGE_VALUE) ritaglia l'ombra esterna solo in basso.

Answer 8

Ho un div che è al 100% altezza (cioè piena altezza sullo schermo) e c'era un box-shadow:
box-shadow: 0 0 10px rgba(0,0,0,0.4);

Questa è stata la causa di apparire le barre di scorrimento, anche se il contenuto non è stato più lungo dello schermo.

Tutto ciò che ho fatto è stato impostare un offset verticale negativo: box-shadow: 0 -10px 10px rgba(0,0,0,0.4); e questo lo ha risolto.

Answer 9

Si prega di aggiungere position: relative; nel div shadow, rimuovere dall'intestazione, contenuto, piè di pagina. È lavoro al mio fianco.