div lado con posición absoluta y pie de página pegajoso

Tengo problemas con el siguiente diseño html.div lado con posición absoluta y pie de página pegajoso

Sé que hay otras preguntas sobre el posicionamiento absoluto y el pie de página adhesivo, probé muchas soluciones pero no lo hice funcionar, así que traté de publicar todo el código html de diseño para ver si alguien puede encontrar un solución.

He usado this solución StickyFooter.

El problema es la barra derecha.

Debería permanecer fijo a 25px del pie de página, pero, como puede ver, si el contenido de la barra aumenta, el contenido desciende sobre el pie de página y fuera del borde inferior de la barra.

Obviamente, me gustaría que el contenido permanezca dentro de la barra, haciendo que la barra crezca y empuje el pie de página hacia abajo.

<!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>

Fuente

2012-01-19 opaera

¿Quizás esto no tiene solución? – opaera

Aún pensando que esto no tiene solución. ¿Hay algún gurú de CSS que quiera probar? – opaera

Me quito position:absolute; y añadir un float:right; en #sectionBar definición. Luego agregue un <br clear="all" /> inmediatamente antes de cerrar el div con la clase "envoltorio".

Luego tendrá que reposicionar sus elementos. Trabaja en los márgenes y los almohadones para obtener el resultado deseado.

El problema que describes es causado por el comportamiento position:absolute. De hecho, con el posicionamiento absoluto, el elemento se elimina del flujo natural del html y, como su nombre lo sugiere, se posiciona completamente :) Por lo tanto, los otros elementos (por ejemplo, el pie de página) van "debajo" de él.

Fuente

2012-01-19 11:00:01

Lo siento pero esto no funciona. El contenido de la barra va por detrás del pie de página, y también, si el contenido de la barra es pequeño, la barra no permanece fija a 25px del pie de página, sino que se ajusta a su contenido. Reemplazar el posicionamiento absoluto con flotación correcta es una de las soluciones probadas, sin éxito. Gracias de todos modos por la respuesta. – opaera

he hecho algunos cambios en el código que envió, espero que ayuda `

<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>`

Fuente

2012-01-19 22:04:41 Mouna

Lo sentimos, pero es similar a la respuesta anterior, la ber no crece cuando el contenido de la página es más grande que el contenido de la barra. Gracias de cualquier manera. – opaera

que puedan inducir a confusión sobre lo que está buscando, pero por qué no añadir desbordamiento: auto bajo el id = sectionBar ? De esta forma, si el contenido es mayor que su cuadro, agregará una barra de desplazamiento y no fluirá sobre el pie de página. Nuevamente, quizás me esté perdiendo la pregunta o el resultado final que está buscando.

Fuente

2012-01-23 20:18:48

No especifiqué esto, pero no quiero barras de desplazamiento ... era obvio, creo. – opaera

Veo lo que estás diciendo ahora. –

@ lorenzo.macon es correcto - debe evitar el uso de position: absolute, y usar un flotador en su lugar.

Uno de sus problemas fue que su pie de página necesita tener la misma altura total como el margen negativo de la envoltura; parece que quizás no contabilizaste el relleno y/o los bordes en la ecuación.

El código suministrado incluye la barra lateral como segunda en el código, de modo que si no estuviera flotando (por ejemplo, para un diseño receptivo), vendría después. Pero en realidad puede tenerlo de cualquier manera, y debería funcionar.

<!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>

Fuente

2012-01-25 04:05:24

Sé que esta es una solución, pero no la necesito ya que es diferente de mi diseño. Lo que publique es lo que tengo que construir, este es un diseño diferente, y una cosa más sobre tu código, si el contenido de la página crece, la barra no crece ... debes usar la solución Css Holy Grail para hacer esto en tu código. – opaera

Deje su HTML tal y como está, cambie su CSS para esto:

/* 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. esta es una mala pregunta

Voy a darle el beneficio de la duda y le digo que está trabajando para un cliente poco razonable o con un margen HTML no editable y que necesita hacer algún tipo de truco para obtener este presentable.

De lo contrario, no hay excusa para seguir este enfoque.

Fuente

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

aquí hay un violín con el código de "trabajo" ... No se requiere CSS Guru ... Es solo un trabajo de hack barato. Un CSS Guru le diría que no construya su marcado de esta manera. http://jsfiddle.net/TPk29/5/ – 1nfiniti

PD No hay forma de que la barra derecha crezca verticalmente con el contenido. Sin embargo, puedes simular esto aplicando una imagen de fondo al contenido que se alinea con el fondo de la barra derecha ... Si eso te ayuda – 1nfiniti

Esto no está funcionando, cuando el contenido de la página crece y es más grande que el contenido de la barra, la barra no crece verticalmente Estaba pensando que esto es realmente insoluble, por cierto, es solo un diseño diseñado en Photoshop primero, y también me gustó. Entonces me pregunto si alguien podría hacer que funcione. Tal vez es insoluble, en este caso, lo cambiaré (ya ha cambiado). Por cierto, creo que es una buena pregunta para apasionados de CSS. – opaera

No puede hacer que la barra sea absoluta con los "márgenes" superiores e inferiores y espera que crezca más allá del tamaño que le dice que sea.

A continuación se muestra un enfoque ligeramente diferente que se parece mucho (¿exactamente?) Como el suyo. No he probado en otros navegadores que Firefox 8, por lo que no puedo garantizar que es a prueba de balas, pero esto debería por lo menos darle una 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>

Fuente

2012-02-09 01:51:42

Esto es lo mismo que otras soluciones publicadas, cuando el contenido del cuerpo crece, la barra no se extiende verticalmente. Sospeché que esto era irresoluble ... por cierto gracias por la respuesta. – opaera

np. lo que quieres es posible, pero no cómo lo hiciste. –

es probable que pueda utilizar en su lugar porque position:relative; absoluta hará que su los elementos van detrás a menos que uses z-index: y los elementos irán encima de él. Mira este pie de página pegajoso si realmente tiene que construir de esta manera

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

Editar:

No estoy seguro de lo que está tratando de lograr en realidad. Porque la forma actual en que se construyó el HTML no es realmente semántica para lo que estás haciendo. Como sectionBar es una barra lateral, no debe estar por encima de su contenido principal, sino que debe estructurarse después del contenido de su sección de página. También debería usar flotadores en lugar de posición. De esta forma, no tiene que lidiar con z-index y el contenido queda rezagado. La página también se expandiría correctamente usando float, pero tendría que hacer uso de .clearfix hack para IE principalmente.

También casi nunca hay un caso en el que tenga que construir algo de cierta manera. El único momento en que es un caso es si usa un CMS o un código antiguo existente. Entonces, si no obtiene el efecto que desea, entonces necesita ver su estructura Semantic de su código.

Vi en uno de sus comentarios que esto se basa en un diseño de photoshop que me lleva a creer que está construyendo esto desde cero y significa que tiene control total sobre el HTML. Entonces, si ese es el caso, decir que tiene que ser construido de esta manera es inaceptable.

Fuente

2012-03-07 13:13:18 ddilsaver

Probé la posición: relativa, pero con esto no puedo obtener lo que quiero. – opaera

Es solucionable. Puedes hacerlo flotando #sectionBar como se menciona en @ lorenzo.marcon.

Tendrá que mover #sectionBar to right before # sectionPage` y ajustar ambos elementos. También agregué un clearfix al wrapper.

Consulte this fiddle para la solución.

Fuente

2012-04-20 14:00:15

div lado con posición absoluta y pie de página pegajoso

Respuesta

Cuestiones relacionadas