CSS problèmes de trop-plein avec position fixe divs
Donc, ce problème a été résolu, probablement 1000 fois (Faire défiler une partie du contenu dans position fixe conteneur, enfant div hauteur de 100% à l'intérieur de la position: fixe div + overflow auto) mais je n'arrive pas à obtenir mon CSS à se comporter.
Je suis en train de créer un popup div qui a une mesure de défilement de l'intérieur. J'ai un gris foncé div qui devrait couvrir l'ensemble de la fenêtre et centré dans la fenêtre devrait être d'une couleur verdâtre div. L'intérieur de la div doit avoir une marge et être dimensionné pour s'adapter à son contenu, sauf si le contenu est trop grand et qu'il doit ensuite une barre de défilement.
Je ne peux pas obtenir le défilement de travail. J'ai essayé en précisant max largeur/hauteur, mais ceux qui semblent avoir ignoré.
HTML:
<div class='PopupPanelBG'>
<div class='PopupPanel'>
<div>
<div style='width: 1000px;'>some stuff that is really big</div>
</div>
</div>
</div
CSS:
.PopupPanelBG {
display: table;
background: rgba(0, 0, 0, 0.7);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
overflow: hidden;
}
.PopupPanel {
display: table-cell;
vertical-align: middle;
text-align: center;
position: relative;
overflow: hidden;
}
.PopupPanel>div {
display: inline-block;
vertical-align: middle;
text-align: center;
opacity: 0.9;
background-color: #e1efbb;
border: 1px solid gray;
padding: 8px;
margin: 30px;
overflow : auto;
}
Paramètre max largeur/hauteur fixe valeur de pixel semble fonctionner. Pourquoi ne puis-je le mettre à un %? I. E. faire l'intérieur de la div n'est pas plus grand que 95% de l'écran?
La valeur
%
est faire de la div aussi grand que 100% de lui-même, pas l'écran. L'écran est assez relative et le navigateur va faire un overflow-x barre, si il en a besoin. Faire de la div à 100% de lui-même va juste s'adapter à la div à l'intérieur du texte, et non l'inverse.comment est-ce? Vous aurez juste à jouer avec le haut et le bas des valeurs de
.PopupPanel
de le rendre à la taille que vous voulezqui ressemble à l'effet, je suis à la recherche d'. Merci.
OriginalL'auteur mjr | 2013-10-28
Vous devez vous connecter pour publier un commentaire.
Vous êtes tripoter trop avec la propriété display et vous n'avez pas défini un max-width. Quelque chose comme cela fonctionne:
Droit, ce n'était pas clair à partir de votre question. Vous avez besoin de ce surplus de div pour obtenir que le travail. Édité réponse, pas parfait, mais s'en approche.
La clé de votre réponse, c'est que le inline-block j'ai été en utilisant est ce qui était en train de tuer la vitesse de défilement. Merci de remarquer que la propriété d'affichage est ce qui a été à l'origine des problèmes.
OriginalL'auteur aross
Donc... Cela fonctionne (avec des%).
http://jsfiddle.net/Agony/QbmdK/34/
(Maintenant avec l'alignement vertical!)
La chose que vous voulez à noter est que l'emballage
div
a un ensemblemax-width:50%
tandis que leinnerdiv
a unmax-width:100%
. Qui sera vrai pour n'importe quelle quantité de données.Attendez... Pourquoi auriez-vous besoin verticale de centrage si le
overflow-x
etwhite-space:nowrap
est-il...?Je ne vois pas de nowrap dans la question?
Je n'ai pas non plus, mais je le vois dans la réponse. En tout cas, vous pouvez ajouter
vertical-align:middle;
à la#innerdiv
CSS pour aligner le contenu verticalement trop, mais cela ne change rien puisqu'il n'estnowrap
.Pas le contenu, mais la boîte de délimitation devait être centrée verticalement
OriginalL'auteur usernolongerregistered