8 Réponses :
Je supprimerais Ensuite, vous devrez repositionner vos éléments. Travailler sur les marges et les pavés pour obtenir le résultat souhaité.
Le problème que vous décrivez est causé par Position: absolu; et ajoutez un flottant: droite; dans #sectionbar définition.
Ajoutez ensuite un
immédiatement avant de fermer la DIV avec la classe "wrapper".
Position: absolu comportement. En fait, avec un positionnement absolu, l'élément est retiré du flux naturel du code HTML et le nom l'indique absolument positionné :) Ainsi, les autres éléments (par exemple le pied de page) vont "sous" IT.
Désolé mais cela ne fonctionne pas. Le contenu de la barre tombe derrière le pied de page, et aussi, si la teneur en barre est petite, la barre ne reste pas fixée à 25px du pied de page, mais il suffit d'adapter son contenu. Le remplacement du positionnement absolu avec une flottation correcte est l'une des solutions éprouvées, sans succès. Merci quand même pour la réponse.
J'ai apporté des changements sur le code que vous avez posté, j'espère que cela aide! `
<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>`
Désolé, mais cela ressemble à la réponse précédente, la barbe ne se développe pas lorsque le contenu de la page est plus grand que le contenu de la barre. Merci quand même.
Je pourrais être confondu sur ce que vous recherchez, mais pourquoi ne pas ajouter trop de débordement: Auto sous l'ID = Section de la barre de section? Ainsi, si le contenu est supérieur à votre boîte, il ajoutera une barre de défilement et ne pas couler sur le pied de page. Encore une fois, il me manque peut-être la question ou le résultat final que vous recherchez.
Je ne l'ai pas spécifié, mais je ne veux pas de barres de défilement ... c'était évident que je pense.
Je vois ce que tu dis maintenant.
@ lorenzo.macon a raison - vous devez éviter d'utiliser Un de vos problèmes était également que votre page de page a également besoin d'avoir le même hauteur totale forte> comme la marge négative de l'emballage; On dirait peut-être que vous n'ayez peut-être pas comptabiliser le rembourrage et / ou les frontières dans l'équation. p> Le code fourni inclut la barre latérale secondaire du code, de sorte que s'il n'était pas flotté (par exemple, pour un réactif mise en page), cela viendrait plus tard. Mais vous pouvez en réalité avoir de chaque sens, et cela devrait fonctionner. P> Position: absolu code> et utiliser un flotteur à la place. <!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>
Je sais que c'est une solution, mais je n'en ai pas besoin car c'est différent de ma mise en page. Ce que j'ai posté, c'est ce que je dois construire, c'est une mise en page différente, et une dernière chose à propos de votre code, si le contenu de la page grandit, le bar ne pousse pas .. Vous devez utiliser la solution Sainte Grail de CSS pour le faire dans votre code.
Laissez votre HTML As-IS, modifiez votre CSS en ceci:
/* 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; }
Voici un violon avec le code «Travaillant» ... CSS Guru n'est pas nécessaire ... c'est juste un emploi de piratage bon marché. Un gourou CSS vous dirait de ne pas construire votre balisage de cette façon. jsfiddle.net/tpk29/5
PS Il n'y a aucun moyen d'obtenir la bonne barre de croître verticalement avec le contenu. Vous pouvez simuler cela cependant en appliquant une image d'arrière-plan sur le contenu qui s'inscrit à l'arrière-plan de la barre droite ... Si cela vous aide
Cela ne fonctionne pas, lorsque le contenu de la page se développe et il est plus grand que le contenu de la barre, la barre ne se développe pas verticalement. Je pensais que cela est vraiment insoluble, à la manière dont il est juste une mise en page conçue dans Photoshop en premier, et j'ai aussi aimé cela. Donc, je me demande simplement si quelqu'un pouvait le faire fonctionner. C'est peut-être insoluble, dans ce cas, je vais le changer (déjà changé). En passant, je pense que c'est une bonne question pour CSS Passionnés.
Vous ne pouvez pas faire la barre absolue avec les "marges" supérieures et inférieures et qu'attendez-vous au-delà de la taille que vous le disiez.
ci-dessous est une approche légèrement différente qui ressemble beaucoup (exactement?) comme la vôtre. Je n'ai pas testé dans d'autres navigateurs que Firefox 8, je ne peux donc pas garantir que sa pare-balles, mais cela devrait au moins vous donner une autre idée: P>
<!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>
C'est la même chose d'autres solutions affichées lorsque la teneur corporelle pousse la barre ne s'étend pas verticalement. Je soupçonnais que c'était insoluble. En chemin, merci pour la réponse.
np. Ce que vous voulez est possible, mais pas comme ça que vous l'avez fait.
Vous pouvez probablement utiliser http://www.csssckyfooter.com/utilisateur-footer- code.html
Je ne suis pas sûr de ce que vous essayez d'accomplir vraiment. Parce que la manière actuelle, le HTML construit n'est pas vraiment sémantique pour ce que vous faites. Étant donné que la barre de section est une barre latérale, elle ne doit pas être au-dessus de votre contenu principal, il doit être structuré après la suite de votre contenu de la section Sectionpage. Vous devez également utiliser des flotteurs au lieu de position. De cette façon, vous n'avez pas à traiter avec Il n'y a pas non plus de cas où vous devez construire quelque chose d'une certaine manière. La seule fois où c'est un cas, c'est si vous utilisez un ancien code CMS ou par exemple. Donc, si vous ne recevez pas d'effet que vous souhaitez, vous devez examiner votre structure de votre code de votre code.
J'ai vu dans l'un de vos commentaires que cela est basé sur une disposition de Photoshop qui me conduit à croire que vous construisez cela à partir de zéro et signifie que vous avez un contrôle complet sur le HTML. Donc, si c'est le cas, alors cela dit que cela doit être construit de cette façon est inacceptable. position: relatif; plutôt parce que Absolute fera que vos éléments se situent derrière eux à moins que vous n'utilisez z-index: . Les éléments vont ensuite sur le dessus de ce. Regardez ce pied de page collant si vous devez vraiment le construire de cette façon
z-index et contenu en cours derrière. La page serait également élargi correctement en utilisant float mais vous devrez utiliser un piratage .Clearfix pour IE principalement.
J'ai essayé position: relatif mais avec cela, je ne peux pas obtenir ce que je veux.
Il est solvable. Vous pouvez le faire en flottant Vous auriez besoin de déplacer voir ce violon pour la solution. #sectionbar comme @ lorenzo.marcon mentionné.
#sectionbar à droite avant # Sectionpage` et enveloppez les deux éléments. J'ai aussi ajouté un Clearfix à l'emballage.
Toujours penser que cela est insoluble. Y a-t-il un gourou CSS qui veut essayer?