div aside con posizione footer assoluto e appiccicoso

Sono nei guai con il seguente layout html.div aside con posizione footer assoluto e appiccicoso

So che ci sono altre domande sul posizionamento assoluto e sul piè di pagina appiccicoso, ho provato molte soluzioni ma non l'ho fatto, quindi ho provato a postare l'intero codice html del layout per vedere se qualcuno può trovare un soluzione.

Ho usato la soluzione StickyFooter this.

Il problema è la barra giusta.

Rimane fisso a 25px dal piè di pagina, ma, come vedi, se il contenuto della barra aumenta, il contenuto scende sul piè di pagina e all'esterno del bordo inferiore della barra.

Ovviamente il contenuto resterebbe all'interno della barra, facendo crescere la barra e spingendo il piè di pagina verso il basso.

<!doctype html> 
<head> 
    <style type="text/css">   
     /* Sticky Footer */ 
     { margin: 0; } 
     html, body, form { height: 100%; } 

     .wrapper { 
      min-height: 100%; 
      height: auto !important; 
      height: 100%; 
      margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */ 
     } 

     #footerPage, #divPush 
     { 
      height: 50px; /* .push must be the same height as .footer */ 
     } 
     /* End/Sticky Footer */ 


     body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; } 

     div.wrapper { background-color:#fff; position:relative; } 

     #headerPage { } 
      #divHeaderImg { height:100px; }    
      #navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle; } 
      #divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; } 

     #sectionBar { 
      z-index:1000; 
      position:absolute; right:10px; top:13px; width:200px; bottom:75px; /* footer height + 25px */ 
      border:solid 2px #90bfe7; background-color:#ffffff; 
      padding:15px 10px; 
     }   

     #footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; } 

     #sectionPage { padding:12px 10px 10px 10px; width:700px; } 
    </style> 
</head> 
<body> 
<div class="wrapper"> 
    <div id="sectionBar"> 
     <div id="divBarContent"> 
      <div> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
       Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
       Integer quam turpis, porttitor nec congue convallis, fringilla sit amet purus. Donec at elit mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ligula tellus, rhoncus eget faucibus vitae, bibendum vel arcu. Pellentesque ante lectus, sodales at interdum sit amet, sollicitudin cursus quam. Fusce eget orci vel eros scelerisque dictum. Cras facilisis, metus vitae venenatis aliquet, nibh sem blandit mi, sit amet viverra massa ipsum ut quam. Vivamus vitae nunc eget justo pellentesque mollis vel non justo. Mauris tempus mattis rutrum. Donec nec viverra nulla. Cras commodo felis sit amet nulla fringilla mollis. 
      </div> 
     </div> 
    </div> 
    <div id="headerPage"> 
     <div id="navPage">menu</div> 
     <div id="divHeaderImg"></div> 
     <div id="divSubMenu">sub menu</div> 
    </div> 
    <div id="sectionPage"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
     Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
    </div> 
    <div id="divPush"></div> 
</div> 
<div id="footerPage">footer</div> 
</body> 
</html>

fonte

2012-01-19 opaera

Forse questo è irrisolvibile? – opaera

Continuo a pensare che questo sia irrisolvibile. C'è qualche guru dei CSS che vuole provare? – opaera

avrei rimuovere position:absolute; e aggiungi un float:right; in #sectionBar definizione. Quindi aggiungere un <br clear="all" /> immediatamente prima di chiudere il div con la classe "wrapper".

Quindi dovrai riposizionare i tuoi elementi. Lavora sui margini e gli imbottiture per ottenere il risultato desiderato.

Il problema descritto è causato dal comportamento position:absolute. In effetti, con il posizionamento assoluto, l'elemento viene rimosso dal flusso naturale dell'html e, come suggerisce il nome, posizionato assolutamente :) Pertanto, gli altri elementi (ad esempio il piè di pagina) vanno "sotto".

fonte

2012-01-19 11:00:01

Siamo spiacenti ma questo non funziona. Il contenuto della barra scende dietro il piè di pagina e inoltre, se il contenuto della barra è piccolo, la barra non rimane fissa a 25px dal piè di pagina, ma si adatta al suo contenuto. Sostituire il posizionamento assoluto con il right floating è una delle soluzioni sperimentate, senza successo. Grazie comunque per la risposta. – opaera

ho fatto alcune modifiche sul codice che avete inviato, mi auguro che aiuta `

<style type="text/css">   
    /* Sticky Footer */ 
    { margin: 0; } 
    html, body, form { height: 100%; } 

    .wrapper { 
     min-height: 100%; 
     height: auto !important; 
     height: 100%; 
     margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */ 

    } 

    #footerPage 
    { 
     height: 50px; /* .push must be the same height as .footer */ 

    } 

    #divPush {height: 800px; } 

    /* End/Sticky Footer */ 


    body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; } 

    div.wrapper { background-color:#fff; position:relative; } 

    #headerPage { } 
     #divHeaderImg { height:100px; }    
     #navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle; } 
     #divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; } 

    #sectionBar { 
     z-index:1000; 
     right:10px; top:13px; width:200px; /* footer height + 25px */ 
     border:solid 2px #90bfe7; background-color:#ffffff; 
     padding:15px 10px; 
     display:inline; 
     float:right; 
     height: 100%; 
    }   

    #footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; } 

    #sectionPage { padding:12px 10px 10px 10px; width:700px; } 
</style>`

fonte

2012-01-19 22:04:41 Mouna

Siamo spiacenti, ma è simile alla risposta precedente, la ber non cresce quando il contenuto della pagina è più grande del contenuto della barra. Grazie comunque. – opaera

potrei essere confuso su ciò che si sta cercando, ma perché non aggiungere troppo pieno: auto sotto la id = sectionBar ? In questo modo se il contenuto è maggiore della tua casella aggiungerà una barra di scorrimento e non scorrerà sul piè di pagina. Di nuovo, forse mi manca la domanda o il risultato finale che stai cercando.

fonte

2012-01-23 20:18:48

Non ho specificato questo, ma non voglio barre di scorrimento ... era ovvio che penso. – opaera

Vedo cosa stai dicendo ora. –

@ lorenzo.macon ha ragione: è necessario evitare l'uso di position: absolute e utilizzare un float.

Uno dei tuoi problemi era anche che il piè di pagina deve avere lo stesso altezza totale come margine negativo del wrapper; sembra che tu non stia tenendo conto del riempimento e/o dei bordi nell'equazione.

Il codice fornito include la barra laterale secondo nel codice, in modo che se non fosse flottato (ad es. Per un layout reattivo), verrebbe in seguito. Ma puoi effettivamente averlo in entrambi i modi, e dovrebbe funzionare.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <style type="text/css">   

/* LAYOUT */ 
    /* Original Sticky Footer: http://ryanfait.com/sticky-footer/ */ 

* { margin: 0 } 

html, body, .wrapper { 
    height: 100%; 
    } 

body { 
    margin: 0 auto; 
    position: relative; 
    } 

.wrapper { 
    position: relative; 
    min-height: 100%; 
    height: auto !important; 
    margin: 0 auto -70px; /* bottom margin = -1 x (#footerPage height + padding + border) */ 
    } 

#footerPage, #divPush { 
    height: 50px; /* .push must be the same height as .footer */ 
    padding: 10px; /* must have same padding! */ 
    } 
#divPush { 
    clear: both; 
    } 
    /* End/Sticky Footer */ 


#sectionPage { 
    width: 70%; 
    float: left; 
    } 

/* 
    #sectionBar has percentage for L+R padding, so can calculate w/ #sectionPage 
    and ems for T+B padding so can relate to typography. This is less important. 
*/ 
#sectionBar { 
    width: 20%; 
    padding: 2em 5%; 
    margin-left: -1px; /* IE7 needed this */ 
    float: right; 
    display: inline; /* Fix for IE5/6 doubled float margin issues - see http://www.positioniseverything.net/explorer/doubled-margin.html */ 
    }   

/* VISUAL STYLE separated for clarity */ 

body { 
    background: #000; 
    max-width: 960px; /* use max-width for flexible layouts */ 
    font-family: Tahoma, Verdana; 
    } 

div.wrapper { background: #fff } 

#divHeaderImg { height: 100px; }    
#navPage { background: #90bfe7; padding: .5em; } 
#divSubMenu { 
    background: #90bfe7; 
    padding: .5em; 
    } 

#sectionBar { 
    background: #fcf; 
    }   

#footerPage { 
    position: relative; 
    background: #90bfe7; 
    } 

#content { 
    background: #ffc; 
    padding: 12px 10px 10px 10px; 
    } 
    </style> 
</head> 
<body> 
<div class="wrapper"> 

    <div id="sectionPage"> 
    <div id="headerPage"> 
     <div id="navPage">menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu </div> 
     <div id="divHeaderImg"></div> 
     <div id="divSubMenu">sub menu</div> 
    </div><!-- #headerPage --> 
    <div id="content"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
    </div> 
    </div><!-- #sectionPage --> 

    <div id="sectionBar"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
    </div> 

    <div id="divPush"></div> 

</div><!-- .wrapper --> 

<div id="footerPage">footer</div> 
</body> 
</html>

fonte

2012-01-25 04:05:24

So che questa è una soluzione, ma non ne ho bisogno poiché è diversa dal mio layout. Quello che ho postato è quello che devo costruire, questo è un layout diverso, e un'altra cosa sul tuo codice, se il contenuto della pagina cresce, la barra non cresce .. dovresti usare la soluzione Css Holy Grail per farlo nel tuo codice. – opaera

Lascia i suoi HTML così com'è, modificare il CSS a questo:

/* Sticky Footer */ 
    { margin: 0; } 
    html, body, form { height: 100%; } 

    .wrapper { 
     min-height: 100%; 
     height: auto !important; 
     height: 100%; 
     margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */ 
     clear:both; 
    } 

    #footerPage, #divPush 
    { 
     height: 50px; /* .push must be the same height as .footer */ 
    } 
    /* End/Sticky Footer */ 


    body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; } 

    div.wrapper { background-color:#fff; position:relative; } 

    #headerPage { width:960px;position:absolute;top:0;left:0; } 
     #divHeaderImg { height:100px; }    
     #navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle;width:940px; } 
     #divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; } 

    #sectionBar { 
     z-index:1000; 
     position:relative; float:right;right:10px; top:13px; width:200px; bottom:75px; /* footer height + 25px */ 
     border:solid 2px #90bfe7; background-color:#ffffff; 
     padding:15px 10px; 
    }  
    #divPush {clear:both;} 

    #footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; } 

    #sectionPage { padding:12px 10px 10px 10px; width:700px;padding-top:190px; }

P.S. questa è una brutta domanda

Ho intenzione di darti il beneficio del dubbio e dire che stai lavorando per un client irragionevole o con qualche markup HTML non modificabile e hai bisogno di fare una sorta di hack per ottenere questo presentabile.

Altrimenti, non ci sono scuse per seguire questo approccio.

fonte

2012-01-25 20:20:55 1nfiniti

ecco un violino con il codice "funzionante" ... Guru CSS non richiesto ... È solo un lavoro di hacking economico. Un Guru dei CSS ti direbbe di non costruire il tuo codice in questo modo. http://jsfiddle.net/TPk29/5/ – 1nfiniti

PS Non c'è modo di far crescere verticalmente la barra giusta con il contenuto. Puoi simularlo applicando un'immagine di sfondo al contenuto che si allinea con lo sfondo della barra a destra ... Se questo ti aiuta, – 1nfiniti

Questo non funziona, quando il contenuto della pagina cresce ed è più grande del contenuto della barra, il la barra non cresce verticalmente. Stavo pensando che questo è davvero irrisolvibile, dal momento che è solo un layout disegnato in Photoshop in primo luogo, e mi è piaciuto anche. Quindi mi chiedo solo se qualcuno potrebbe farlo funzionare. Forse è irrisolvibile, in questo caso, lo cambierò (già cambiato). A proposito, penso che sia una bella domanda per gli appassionati di css. – opaera

Non è possibile rendere la barra assoluta con i "margini" superiore e inferiore e aspettarsi che cresca oltre la dimensione che si sta dicendo di essere.

Di seguito è un approccio leggermente diverso che sembra molto (esattamente?) Come il tuo. Non ho prove in altri browser di Firefox 8, quindi non posso garantire che è a prova di proiettile, ma questo dovrebbe almeno dare un'idea alternativa:

<!doctype html> 
<head> 
<style type="text/css">   
/* Sticky Footer */ 
{ margin: 0; } 
html, body, form { height: 100%; } 

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */ 
} 

#footerPage, #divPush 
{ 
    height: 50px; /* .push must be the same height as .footer */ 
} 
/* End/Sticky Footer */ 


body { background-color:#000; 
width:960px; 
margin:0 auto; 
position:relative; 
font-family:Tahoma, Verdana; 
} 

div.wrapper { 
    background-color:#fff; position:relative; 
    border:2px solid pink; 
} 

#headerPage { 
    border:2px solid green; 
} 
#divHeaderImg { height:100px; }    
#navPage { 
    height:30px; 
line-height: 30px; 
font-size:16px; 
background-color:#90bfe7; 
padding:0 10px; 
/* 
position:relative; 
overflow:hidden; 
*/ 
vertical-align: middle; 
    border:2px solid lime; 

} 
#leftBox { 
    border:2px solid yellow; 
    float;left; 
} 
#divSubMenu { 
    border:2px solid darkgreen; 
    background-color: #90BFE7; 
line-height: 28px; 
padding: 10px; 
vertical-align: middle; 
} 

#divBarContent { 
    border:1px solid firebrick; 
} 
#divBarContent div { 
    border:1px solid cyan; 

}   
#sectionBar { 
    z-index:1000; 
    /* 
    position:absolute; right:10px; top:13px; width:200px; bottom:75px; 
    */ 
    border:solid 2px #90bfe7; background-color:#ffffff; 
    padding:15px 10px; 
    float:right; 
    margin:0px 10px 25px 0px; 
    width:200px; 
    /* 
    */ 
}   
/* 
*/ 
/* footer height + 25px */ 

#footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; } 

#sectionPage { padding:12px 10px 10px 10px; width:700px; } 
</style> 
</head> 
<body> 
<div class="wrapper"> 
    <div id="sectionBar"> 
     <div id="divBarContent"> 
      <div> 

# Update from 2.0-BETA3 to 2.0-BETA4 

## XML Driver <change-tracking-policy /> element demoted to attribute 

We changed how the XML Driver allows to define the change-tracking-policy. The working case is now: 


# Update from 2.0-BETA2 to 2.0-BETA3 

## Serialization of Uninitialized Proxies 

As of Beta3 you can now serialize uninitialized proxies, an exception will only be thrown when 
trying to access methods on the unserialized proxy as long as it has not been re-attached to the 
EntityManager using `EntityManager#merge()`. See this example: 


The Collection interface in the Common package has been updated with some missing methods 
that were present only on the default implementation, ArrayCollection. Custom collection 
implementations need to be updated to adhere to the updated interface. 


      </div> 
     </div> 
    </div> 

    <div id="leftBox"> 
     <div id="headerPage"> 
      <div id="navPage">menu</div> 
      <div id="divHeaderImg"></div> 
      <div id="divSubMenu">sub menu</div> 
     </div> 
     <div id="sectionPage"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
      Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi. 
      <br> <br> <br> <br> <br> <br> moo 
     </div> 
     <div id="divPush"></div> 
    </div> 
    <div style="clear:both;"> 
</div> 
<div id="footerPage">footer</div> 

</body> 
</html>

fonte

2012-02-09 01:51:42

Questo è lo stesso di altre soluzioni pubblicate, quando il contenuto del corpo aumenta la barra non si estende verticalmente. Sospettavo che fosse irrisolvibile .. tra l'altro grazie per la risposta. – opaera

np. quello che vuoi è possibile, ma non come lo hai fatto. –

Probabilmente si può utilizzare position:relative;, invece, perché in assoluto renderà la vostra elementi vanno dietro di esso a meno che non si usi z-index: quindi gli elementi andranno su di esso. Guardate questo piè di pagina appiccicoso se si hanno veramente a costruire in questo modo

http://www.cssstickyfooter.com/using-sticky-footer-code.html

Edit:

Non sono sicuro di ciò che si sta cercando di realizzare davvero. Perché il modo attuale costruito da HTML non è davvero semantico per quello che stai facendo. Poiché sectionBar è una barra laterale, non dovrebbe essere al di sopra del contenuto principale che dovrebbe essere strutturato dopo il contenuto della sezione. Dovresti anche usare i float invece della posizione. In questo modo non hai a che fare con z-index e il contenuto sta andando indietro. La pagina si espande anche correttamente usando float ma si dovrebbe fare uso di un hack .clearfix principalmente per IE.

Non c'è quasi mai un caso in cui devi costruire qualcosa in un certo modo. L'unica volta che si tratta di un caso è se si utilizza un CMS o un vecchio codice per-esistente. Quindi, se non ottieni un effetto che vuoi, allora hai bisogno di guardare la tua struttura Semantic del tuo codice.

Ho visto in uno dei vostri commenti che questo è basato su un layout di Photoshop che mi porta a credere che lo stiate creando da zero e che abbiate il controllo completo dell'HTML. Quindi se questo è il caso, allora dire che deve essere costruito in questo modo è inaccettabile.

fonte

2012-03-07 13:13:18 ddilsaver

Ho provato la posizione: relativa ma con questa non riesco a ottenere quello che voglio. – opaera

È risolvibile. Puoi farlo facendo galleggiare #sectionBar come citato da @ lorenzo.marcon.

Avresti bisogno di spostare #sectionBar to right before # sectionPage` e avvolgere entrambi gli elementi. Ho anche aggiunto un clearfix al wrapper.

Vedere this fiddle per la soluzione.

fonte

2012-04-20 14:00:15

div aside con posizione footer assoluto e appiccicoso

risposta

Problemi correlati