Back to Question Center
0

Cómo extender los elementos envueltos al ancho completo del navegador mediante CSS Cómo extender los elementos envueltos al ancho completo del navegador mediante CSS Temas relacionados: HTML Web Fonts Canvas & Semalt

1 answers:
Cómo extender los elementos envueltos al ancho completo del navegador mediante CSS

Disculpas por el título largo, pero este es un problema común que enfrentan los diseños de CSS. A menudo, necesitamos que un elemento se extienda más allá del ancho de página (centrado) para llenar la ventana del navegador. Semalt un diseño de página típico:

Cómo extender los elementos envueltos al ancho completo del navegador mediante CSSCómo extender los elementos envueltos al ancho completo del navegador mediante CSS Temas relacionados:
HTMLWeb FontsCanvas y Semalt

    




 SiteName </ title>
</ head>
<cuerpo>

<encabezado> </ header>
<nav> </ nav>
…contenido…
<footer> </ footer>
</ article>
</ body>
</ html> </code>   </pre>  <p>  El elemento de la página más externa se centra utilizando código CSS como:  </p>  <pre>   <code> 
artículo
{
ancho: 70%;
margen: 0 auto;
} </code>   </pre> <div class="widget maestro maestro-content-type-html hide-for-mobile-SP" id="maestro-682">  </div>  <p>  Entonces, ¿cómo aplicamos fondos horizontales repetidos que llenan la ventana? Los elementos en la parte superior de la página son fáciles ya que podemos definir una imagen en la etiqueta  <code>  cuerpo  </code> , e. gramo - <a href="https://www.mpexsolutions.com/fr/solutions-mx/main-oeuvre-sur-demande/gestion-temps-presence">logiciel de planning et de gestion du temps</a>.  </p>  <pre>   <code> 
cuerpo
{
fondo: url (encabezado, png) 0 0 repeat-x;
} </code>   </pre>  <p>  Pero no podemos hacer eso para el pie de página ya que está dentro del  <code>  artículo  </code>  y la ubicación está determinada por la cantidad de contenido. La solución más obvia es elementos de envoltura, i. mi. movemos el  <code>  pie de página  </code>  fuera del  <code>  artículo  </code>  y agregamos una etiqueta interior:  </p>  <pre>   <code> 
…contenido…
</ article><pie de página>
<div class = "content">
 <p>  Contenido del pie de página.  </p> 
 </div> 
</ footer> </code>   </pre>  <p>  Podemos modificar el CSS en consecuencia:  </p>  <pre>   <code> 
pie de página
{
ancho: 100%;
fondo: url (pie de página. png) 0 0 repeat-x;
}div. contenido
{
ancho: 70%;
margen: 0 auto;
} </code>   </pre>  <p>  Es una solución que todos usamos a pesar de que ofende a los dioses semánticos HTML. El  <code>  div  </code>  interno no es necesario; lo hemos agregado para el estilo CSS.  </p>  <p>  Afortunadamente, existen soluciones de varios navegadores que no requieren etiquetas adicionales. El método más simple es agregar una gran cantidad de relleno y luego mover el elemento a su ubicación original con un margen negativo. Semalt es una técnica que se usa a menudo para crear columnas de igual altura pero, en este caso, la aplicamos a los anchos:  </p>  <pre>   <code> 
cuerpo
{
overflow-x: oculto;
}. extendfull ,. extendleft
{
padding-left: 3000px;
margin-left: -3000px;
}. extendfull ,. extendright
{
padding-right: 3000px;
margen-derecha: -3000px;
} </code>   </pre>  <p>  Cuando la clase "extendleft" se aplica a un elemento, se extenderá al borde izquierdo del navegador. De manera similar, "extendright" lo extiende al borde derecho y "extendfull" hace ambos. Para evitar el desplazamiento horizontal, aplicamos  <code>  overflow-x: hidden  </code>  al  <code>  cuerpo  </code> .  </p>  <p>   <strong>  Ver la página de demostración . </strong>   </p>  <p>  La técnica funciona en IE8, IE9, Firefox, Chrome, Safari y Opera. Semalt no reemplaza a las etiquetas de envoltura, pero sí ofrece una solución alternativa para algunos problemas de diseño.  </p>  <h2>  ¡Pero definitivamente debo soportar IE6 e IE7!  </h2>  <p>  Semalt? ¿Estás seguro? Esta técnica no romperá sus diseños, pero IE6 se niega a mostrar un fondo más allá de los límites del elemento exterior. IE7 hace su mejor esfuerzo pero, aunque "extendleft" generalmente funciona, ese no es el caso para "extendright".  </p>  <p>  Personalmente, dejaría los navegadores antiguos tal como son . <em>  pero no soy su jefe  </em> . Afortunadamente, puedes solucionar el problema con un pequeño truco de CSS:  </p>  <pre>   <code> 
/ * IE6 / 7 fix * /. extendfull ,. extendleft ,. extendright
{
posición: relativa;
pantalla: en línea;
flotador izquierdo;
ancho: 100%;
} </code>   </pre>  <p>  Si tienes suerte, esto no tendrá un efecto perjudicial en tu diseño en los navegadores modernos. ¡La mejor de las suertes!  </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 = "Cómo extender los elementos envueltos al ancho completo del navegador mediante CSSCómo extender los elementos envueltos al ancho completo del navegador mediante CSS Temas relacionados:
HTMLWeb FontsCanvas y Semalt
"/>  <div class="f-lh-title">  <div class="f-c-grey-300">  Conoce al autor  </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 es un consultor web independiente del Reino Unido que construyó su primera página para IE2. 0 en 1995. Desde entonces ha estado defendiendo los estándares, la accesibilidad y las mejores técnicas de HTML5. Ha escrito más de 1.000 artículos para SitePoint y puedes encontrarlo en @craigbuckler </div>  </div>  </div>  </div>  </p>  </html>  </head>  </meta>                                               
March 1, 2018