Back to Question Center
0

Comment étendre les éléments enveloppés à la largeur du navigateur complet à l'aide de CSS Comment étendre les éléments enveloppés à la largeur du navigateur complet à l'aide de CSS Rubriques connexes: HTML Web Fonts Canvas & Semalt

1 answers:
Comment étendre les éléments enveloppés à la largeur du navigateur complet à l'aide de CSS

Toutes mes excuses pour le long titre, mais c'est un problème commun dans les mises en page CSS. Souvent, nous avons besoin d'un élément pour s'étendre au-delà de la largeur de la page (centrée) pour remplir la fenêtre du navigateur. Semalt un design de page typique:

Comment étendre les éléments enveloppés à la largeur du navigateur complet à l'aide de CSSComment étendre les éléments enveloppés à la largeur du navigateur complet à l'aide de sujets CSSRelated:
HTMLWeb FontsCanvas et Semalt

    




 SiteName </ title>
</ head>
<body>

<header> </ header>
<nav> </ nav>
…contenu…
<footer> </ footer>
</ article>
</ body>
</ html> </code>   </pre>  <p>  L'élément de page le plus à l'extérieur est centré à l'aide d'un code CSS tel que:  </p>  <pre>   <code> 
article
{
largeur: 70%;
marge: 0 auto;
} </code>   </pre> <div class="widget maestro maestro-content-type-html hide-for-mobile-SP" id="maestro-682">  </div>  <p>  Alors, comment appliquons-nous des arrière-plans horizontaux répétitifs qui remplissent la fenêtre? Les éléments en haut de la page sont faciles car nous pouvons définir une image sur l'étiquette  <code>  du corps  </code> , e. g - <a href="https://www.computerexpertscorp.com/">expert in computer troubleshooting (desktop, laptop and peri</a>.  </p>  <pre>   <code> 
corps
{
background: url (en-tête .png) 0 0 repeat-x;
} </code>   </pre>  <p>  Mais nous ne pouvons pas faire cela pour le bas de page puisque c'est dans l'article  <code>   </code>  et l'emplacement est déterminé par la quantité de contenu. La solution la plus évidente est les éléments d'emballage, i. e. on déplace le  <code>  pied de page  </code>  à l'extérieur de l'article  <code>   </code>  et on ajoute une étiquette intérieure:  </p>  <pre>   <code> 
…contenu…
</ article><footer>
<div class = "content">
 <p>  Contenu du pied de page.  </p> 
 </div> 
</ footer> </code>   </pre>  <p>  Nous pouvons ensuite modifier le CSS en conséquence:  </p>  <pre>   <code> 
bas de page
{
largeur: 100%;
background: url (pied de page .png) 0 0 repeat-x;
}div. contenu
{
largeur: 70%;
marge: 0 auto;
} </code>   </pre>  <p>  C'est une solution que nous utilisons tous, même si elle offense les dieux HTML sémantiques. Le div  </code>  interne  <code>  n'est pas nécessaire - nous l'avons ajouté dans le but de style CSS.  </p>  <p>  Heureusement, il existe des solutions multi-navigateurs qui ne nécessitent pas de balises supplémentaires. La méthode la plus simple consiste à ajouter une grande quantité de remplissage, puis de ramener l'élément à son emplacement d'origine avec une marge négative. Semalt une technique qui est souvent utilisée pour créer des colonnes de hauteur égale mais, dans ce cas, nous l'appliquons aux largeurs:  </p>  <pre>   <code> 
corps
{
overflow-x: caché;
} extendfull ,. extendleft
{
rembourrage-gauche: 3000px;
marge gauche: -3000px;
} extendfull ,. extendright
{
rembourrage-droit: 3000px;
marge-droite: -3000px;
} </code>   </pre>  <p>  Lorsque la classe "extendleft" est appliquée à un élément, elle s'étend jusqu'au bord gauche du navigateur. De même, "extendright" l'étend au bord droit et "extendfull" fait les deux. Pour éviter le défilement horizontal, on applique  <code>  overflow-x: hidden  </code>  au corps  <code>   </code> .  </p>  <p>   <strong>  Voir la page de démonstration . </strong>   </p>  <p>  La technique fonctionne dans IE8, IE9, Firefox, Chrome, Safari et Opera. Semalt n'est pas un remplacement pour les étiquettes d'emballage, mais il offre une solution alternative pour certains problèmes de mise en page.  </p>  <h2>  Mais je dois absolument supporter IE6 et IE7!  </h2>  <p>  Semalt? Êtes-vous sûr? Cette technique ne va pas briser vos conceptions mais IE6 refuse de montrer un arrière-plan au-delà des limites de l'élément extérieur. IE7 fait de son mieux mais, bien que "extendleft" fonctionne habituellement, ce n'est pas le cas pour "extendright".  </p>  <p>  Personnellement, je laisserais les anciens navigateurs tels qu'ils sont . <em>  mais je ne suis pas votre patron  </em> . Heureusement, vous pouvez résoudre le problème avec une petite supercherie CSS:  </p>  <pre>   <code> 
/ * IE6 / 7 correctif * /. extendfull ,. extendleft ,. extendright
{
position: relative;
affichage: en ligne;
float: à gauche;
largeur: 100%;
} </code>   </pre>  <p>  Si vous avez de la chance, cela n'aura pas d'effet néfaste sur votre mise en page dans les navigateurs modernes. Bonne chance!  </p>  <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3">  <div class="l-d-f l-pt3">  <img src = "/ img / 56f7596ec1df2d8a94a8384d7b2925801. com / avatar / 439aeaff7de2bae365adc3eb4947b44d? s = 96 & d = mm & r = g" alt = "Comment étendre les éléments enveloppés à la largeur du navigateur complet à l'aide de CSSComment étendre les éléments enveloppés à la largeur du navigateur complet à l'aide de sujets CSSRelated:
HTMLWeb FontsCanvas et Semalt
"/>  <div class="f-lh-title">  <div class="f-c-grey-300">  Rencontrez l'auteur  </div>  <div class="f-large"> Craig Buckler <i class="fa fa-twitter">   </i>   <i class="fa fa-google-plus">   </i>   <i class="fa fa-facebook">   </i>   <i class="fa fa-linkedin">   </i>   <i class="fa fa-github">   </i>   </div>  </div>  </div>  <div class="f-light f-lh-copy l-mt3">  Craig est un consultant Web indépendant au Royaume-Uni qui a construit sa première page pour IE2. 0 en 1995. Depuis ce temps, il préconise les normes, l'accessibilité et les meilleures pratiques HTML5. Il a écrit plus de 1000 articles pour SitePoint et vous pouvez le trouver @craigbuckler </div>  </div>  </div>  </div>  </p>  </html>  </t>  </meta>                                               
March 1, 2018