position:fixe le contenu de disparaître sur le Zoom

est allé dans le tutoriel http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/ et tenta même de faire un fixe en haut de la barre (tout comme Facebook,twitter,techCrunch et tous les autres sites populaires là-bas),mais échoue sur la barre de ZOOM.

Voici un exemple de ce que je veux dire -- http://rtabl.es/designingforstartups -- si vous effectuez un zoom avant dans ce lien,vous pouvez voir que le contenu sur le droit disparaît de l'écran . Même chose qui se passe avec moi,et je ne veux pas le contenu de disparaître sur le zoom..

Voici le code de test,suivi le tuto et a donné le conteneur d'un position:fixed et le contenu ont position:relative avec un float:left -- vous vous demandez où je vais mal.

Code --

        <html>
    <style type="text/css">
    #Contianer{
    position: fixed;
    height: 35px;
    width: 100%;
    z-index: 9999;
    color: white;   
    background-color: #474747;
    }
    .x{
    float: left;
    text-align: center; 
    position: relative;
    line-height: 35px;
    border:1px solid white;
    }
    #a{
    width:20%;
    text-align: left;
    min-width: 100px;
    }
    #b{
    width:20%;
    min-width: 100px;
    text-align: left;
    height: 35px;
    display: table-cell;
    } 
    #c{
    min-width: 200px;
    width:40%;
    }
    #d,#e{
    min-width: 50px;
    width:10%;
        }
    body{
    border:0;
    margin: 0;
    }

    </style>
    <body>
    <div class="Contianer" id="Contianer">
    <div id="a"  class="x">
        foo
    </div>
    <div id="b" class="x">
        bar
    </div>
    <div id="c" class="x">
        tom 
    </div>
    <div id="d" class="x">
        jerry
    </div>          
    <div id="e" class="x">          
        Out
    </div>
    </div>

    </body>
essayé de remplacer des div à l'ul(pour le conteneur) et li pour le contenu,force l'air de fonctionner. La barre du bas dans les Tutoriels reste très bien, même après zoom..
Non seulement le zoom, mais le redimensionnement de la fenêtre du navigateur petites aussi les cache.
Oui, c'est fait,en espérant trouver un travail autour de ou pour savoir où je vais mal..

OriginalL'auteur Vivek Chandra | 2011-11-05

  1. 1

    Après habitation avec cette question,a finalement trouvé une solution: grâce à stackoverflow communauté!.. voici le lien(a posté une autre question que cette ques force de gain de sortie)

    incapable d'obtenir le défilement lorsque la position:fixe -- éléments disparaît forme de l'écran

    OriginalL'auteur Vivek Chandra

  2. 1

    Vous pouvez utiliser Javascript pour la fixer, et pour les meilleures pratiques que vous pouvez utiliser un div pour envelopper le récipient avec une position absolue et une div à l'intérieur du récipient pour mettre du contenu.

    Le Javascript

    $(windows).resize(function(){
        if ($(window).width() < $('.content').width()){
            $('.container').css('position', 'static');
        }
        else{
            $('.container').css('position', 'fixed');
        }
    });

    OriginalL'auteur Zac

  3. 0

    Le problème est tout des largeurs fixes (même min-widths). Tout doit être dans un pourcentage (flexible) ou au moins tenir compte de certains mineurs des largeurs fixes. Donc dans votre exemple, si je baisse la taille de l'pourcentages de certains éléments afin de permettre la 1px frontières, et j'élimine le min-width, je n'ai pas le problème (d'ailleurs, sur le petit écran qu'elle se cogne la flotte bas). Voici ton code modifié:

    #Contianer{
position: fixed;
min-height: 35px;
width: 100%;
z-index: 9999;
color: white;   
background-color: #474747;
}
.x{
float: left;
text-align: center; 
position: relative;
line-height: 35px;
border:1px solid white;
}
#a{
width:19%; /*downsized to give room for fixed width borders*/
text-align: left;

}
#b{
width:19%; /*downsized to give room for fixed width borders*/

text-align: left;
height: 35px;
display: table-cell;
} 
#c{

width:40%;
}
#d,#e{
min-width: 50px;
width:10%;
    }
body{
border:0;
margin: 0;
}
    Le problème, je vais avoir, c'est pas le côté le contenu à l'écran, Ceci est juste un petit code que j'ai écrit comme un résumé pour expliquer le problème, je le entaire bloc dans le conteneur pour rester sur l'écran de zoom -- comme on le voit dans le 1er tutoriel(zoom avant et essayer de voir ce que je veux dire)..
    Exactement. Si vous regardez le pied de page, l'ensemble du conteneur est défini par des pourcentages, et si vous réduisez la fenêtre et de zoom, il bosses sur le côté droit aussi, et si vous avez assez étroit, je peux le faire pour aller hors de l'écran aussi. Fixe la largeur des éléments à un certain point de provoquer le contenu d'aller hors de l'écran, car le zoom est l'augmentation de la largeur fixe par certains facteur de zoom.
    seul le panneau de pied est donné à 94% de la largeur et le reste des ancres(dans le footpanel) sont donnés un 16px -- largeur(maison 50px et chat 126px).Je suis d'accord sur certains point fixe va aller hors de l'écran, mais le tutoriel contenu reste -- je veux dire par là -- u obtenir un parchemin,mais dans mon code le rouleau lui-même n'est pas prédéfini,même si c'est l'habitude de se présenter le contenu de la barre du haut..!!..
    Correct. Tout fixed élément, une fois qu'il sort de l'écran, n'est pas accessible via un parchemin (même le tutoriel). Ils ont étroite de boutons que vous avez à aller extrêmement étroit pour qu'il soit un problème. Dans votre cas, vous avez des éléments de prise de coeur 100%, de sorte que anon12356163 a commenté, dans sa réponse, si vous n'avez pas de place pour "développer" sur zoom pour toute largeur fixe d'éléments dans votre fixed conteneur positionné. Si votre objectif est de toujours garder à l'écran, vous devez utiliser uniquement les pourcentages pour toutes les largeurs d'éléments de "l'intérieur" de votre barre. Cependant...
    ...si votre but est de conserver les éléments accessibles à l'affichage (peut-être en faites défiler vers la gauche) mais elles ont fixé à la partie supérieure de l'écran, alors vous pourriez trouver une réponse précédente de la mine utile à stackoverflow.com/questions/3303173/....

    OriginalL'auteur ScottS

  4. 0

    Votre conteneur est de 100% de la largeur et de votre élément de conteneurs prendre 20+20+40+10+10=100% aussi.
    Maintenant, si vous effectuez un zoom avant, il n'y aura pas d'espace libre pour s'étendre dans d', si vous avez besoin de spécifier la largeur de ces éléments.

    EDIT: "mais le tutoriel contenu reste" c'est une image d'arrière-plan sur l'élément de corps.

    Il a essayé avec largeur spécifique aussi,force semble pour obtenir le contenu sur l'écran

    OriginalL'auteur anon12356163