Mivel a szakaszon elemek blokkokban

Hogyan nyúlik az elemek megtalálhatók a blokkok, teljes szélességében a böngésző ablakot, a CSS? Ez a probléma gyakran előfordul a jelölésben CSS. Gyakran kell elemet túlmutattak a lapok a központi egység és a teljes szélessége a böngésző ablakot. A képen a bal oldalon látható a terjesztési weboldalt design.

Külső oldal elem középre útján, például a következő CSS kód:

Szóval hogyan lehet alkalmazni ismétlődő vízszintes mintázatú, amely kitölti a teljes böngészőablakot? Ez könnyen elvégezhető az elemek, amelyek a lap tetején, amennyit csak lehet beállítani a háttérképet a tag szervezet, például:

De ez a módszer nem alkalmas a lábléc blokk, mivel ez a cikk blokk, és a helyét mérete határozza meg annak tartalmát. A legkézenfekvőbb megoldás - használata további elemek, vagyis haladunk a lábléc a cikk egységblokkot és adjuk hozzá a beltéri egység: ..

Ezután meg kell adni a megfelelő stílust a CSS kód:

Ez a leggyakrabban használt megoldás, bár nem túl elegáns. Beltéri egység csak akkor kell megadni CSS stílusokat, hogy ne a szerkezetet.

Szerencsére van megoldás, ami működik az összes modern böngészőben és nem igényel további blokkokat. Szükség van hozzá egy padding tulajdonság egy nagy értékű, majd mozgassa az elem vissza a kiindulási helyzetből a negatív külső behúzás. Ezt a módszert gyakran létrehozásához használt oszlopok azonos magasságú, és ebben az esetben érvényes szélesség:

Amikor .extendleft osztályba sorolandók az elem, az elem ki van nyújtva a bal szélén a böngésző ablakot. Hasonlóképpen .extendright osztály bővíthető elemek a jobb szélén a böngésző ablakot, és .extendfull osztály szakaszok mindkét irányban. Ha nem jelenik meg a vízszintes görgetést, be kell állítani a tag test overflow-x ingatlan: rejtett, bujkál a tartalmát, amely kívül esik a böngésző ablakot.

Ez a megoldás az Internet Explorer böngészők 8-as verzió, Firefox, Chrome, Safari és az Opera. Ez nem teljesen helyettesíti a módszer további elemeket, de néhány esetben ez egy alternatív megoldás hasznos lehet. De ne felejtsük el, hogy ez a megoldás csökkenti a sebességet a helyszínen.

Translation - Dezhurko