Ajuster le wrapper css pour suivre le design responsive

J'ai commencé mon projet web en essayant de suivre les règles de design responsive. Pour ce faire, j'ai exprimé toutes les dimensions en pourcentages. Remplir ma page de démarrage avec divs et images était bien. Mes fichiers css commence commeAjuster le wrapper css pour suivre le design responsive

body, html { 
height:100%; 
width:100%; 
} 
#wrapper{ 
    position:relative; 
    width:100%; 
    height:100%; 
}

Mais quand ma page a atteint une hauteur légèrement supérieure à fenêtre, il cesse de l'expansion plus et mes nouveaux ajouts ne se présente pas. J'ai lu que le pourcentage de hauteur fait référence à la hauteur du conteneur et que vous devez définir la taille du premier parent en pixels afin que les enfants puissent obtenir leur hauteur. Je cherche depuis quelques jours, en lisant des suggestions sur "overflow: hidden", "height: auto" qui d'ailleurs ne fonctionne pas dans mon cas, en utilisant bootstrap et ainsi de suite mais la question principale reste: quelles modifications à la précédente css fournit-il un wrapper qui peut être automatiquement agrandi en hauteur lors de l'ajout de nouveaux éléments de façon à suivre un design responsive? Merci à l'avance

Source

2017-10-18 Johnk Overlord

Avez-vous essayé min-height au lieu de la hauteur? Il devrait vous permettre de définir une hauteur d'au moins 100%, mais cela augmentera avec votre contenu si votre contenu est plus grand que la fenêtre d'affichage. – delinear

Ne fonctionne pas. Il a diminué mon en-tête –

Il pourrait être utile d'ajouter ce que vous travaillez sur https://jsfiddle.net/ afin que nous puissions voir plus clairement quel est le problème et offrir de l'aide. – delinear

Deux options:

Retirez la hauteur de 100%. Vous n'en avez pas vraiment besoin.
Ajouter overflow: scroll;:

wrapper { position: relative; débordement: défilement; largeur: 100%; hauteur: 100%; }

Modifier pour ajouter:

hauteur du changement de min-height comme suggéré dans les commentaires à l'OP.

Ce qui se passe dans votre code, c'est que vous dites à la div #wrapper d'être aussi grand que l'écran, et pas plus grand. Si c'est aussi grand que l'écran, il n'y a rien à faire défiler vers le bas; vous voyez le tout. Techniquement, le contenu continue (débordant) sous le div lui-même, mais il est hors écran. En définissant un débordement pour défiler, cela indique au navigateur de ne PAS le laisser déborder, mais de le faire défiler à la place. Voir ici: https://www.w3schools.com/cssref/pr_pos_overflow.asp

En fin de compte, cependant, je laisserais probablement la hauteur complètement sauf si j'avais une raison spécifique de l'inclure.

body, html { 
    width: 100%; 
    height:100%; 
} 
#wrapper{ 
    color: black; 
    background-color: yellow; 
    position:relative; 
    width:100%; 
}

Edit pour ajouter: Je pense que vous allez devoir nous donner quelques exemples de code, parce que l'information que vous nous donnez est évidemment pas tout ce qu'il faut. Quel navigateur utilisez-vous?

Cela fonctionne très bien:

body, html { 
 
    width: 100%; 
 
    height:100%; 
 
} 
 
#wrapper{ 
 
    color: black; 
 
    background-color: yellow; 
 
    position:relative; 
 
    width:100%; 
 
}

<html> 
 
<body> 
 
    <div id="wrapper"> 
 
    <h1>Hello There</h1> 
 
    <p>Lorem ipsum something sumthing fnord. Adipiscing at invidunt et eos ut te exerci possim eirmod vel ipsum lorem kasd. Veniam labore labore vero sit nulla lorem et rebum et voluptua duis clita sit. Tempor enim lorem placerat erat feugiat et ut tempor. Sit delenit gubergren qui vero eirmod tempor facilisis. Sadipscing imperdiet aliquam dolor vero. Nulla aliquyam et dolore sit aliquam vel stet. Amet rebum lobortis amet. Lorem diam eirmod ipsum. Augue dolores sadipscing rebum eos dolor praesent. Takimata justo labore. Voluptua dolore sit luptatum invidunt justo justo diam clita lobortis dolor labore. Te soluta eos dolor sit lorem nostrud accusam luptatum euismod dolore sit. Ipsum veniam imperdiet dolor laoreet consetetur voluptua diam iusto elitr consetetur duo. Est justo elitr facilisis gubergren dolore tincidunt stet dolore et clita tempor sanctus ea. Dolores eum dolore clita erat accusam et eos clita at. Sea sea esse tempor ullamcorper lorem. Sit dolore dolor erat tempor qui elitr gubergren dolor sit. Sea soluta illum sed ipsum zzril erat gubergren.</p> 
 
    <p>Et molestie quis aliquyam sanctus magna takimata lorem et consetetur sadipscing et. Gubergren et dolor tempor ullamcorper eos accusam et justo. Tincidunt dolor velit amet aliquyam sanctus takimata sea duis accusam sed ea et diam et option aliquyam et magna.</p> 
 
    <p>Accusam consetetur sed suscipit amet sit vero in duis clita amet. Et invidunt erat enim invidunt erat lorem duo ut euismod clita. Facilisis illum ut velit sanctus sadipscing diam dolore sadipscing veniam accusam. Kasd lorem sit esse. Invidunt dolor elitr duis ipsum sit sed ipsum dolore justo. No diam sed tincidunt dolore ex aliquyam. Sadipscing lorem adipiscing qui quod dolor lorem lorem veniam accusam et et. Te et amet in. Et vero illum dolores lorem at vero option takimata. Accusam eum eros nonumy at lorem iriure feugait dolor labore duis amet ipsum. Kasd consectetuer kasd diam gubergren autem takimata diam sit dolore praesent et consetetur id erat tation consetetur sadipscing.</p> 
 
    </div> 
 
</body> 
 
</html>

Source

2017-10-18 14:51:08

Non.J'ai ajouté une nouvelle div avec la hauteur: 50% et la couleur de fond noire, donc je peux vérifier la hauteur, mais elle ne s'affiche pas du tout –

Voir ci-dessus. Ajout d'un exemple de code. Je pense que vous allez devoir nous donner un exemple de code, parce que l'information que vous nous donnez clairement n'est pas tout ce dont nous avons besoin pour résoudre le problème. –

Ohhhh..mon dieu ... problème était une barre oblique manquante dans la fermeture div tag. Mes excuses et merci pour vos efforts –

Ajuster le wrapper css pour suivre le design responsive

Répondre

Questions connexes