Cara Memperluaskan Elemen Bungkus ke Lebar Pelayar Penuh Menggunakan CSS

Artikel ini membincangkan memanjangkan unsur -unsur CSS di luar halaman berpusat untuk mengisi tetingkap penyemak imbas, cabaran susun atur yang sama. Masalahnya timbul apabila elemen berpusat (mis., article dengan width: 70%; margin: 0 auto;) perlu mempunyai header atau footer lebar lebar.

Semasa menggunakan latar belakang

untuk tajuk adalah mudah, footers menimbulkan masalah kerana kedudukan yang bergantung kepada kandungannya dalam berpusat body. Biasa, walaupun secara semantik dipersoalkan, penyelesaian menggunakan pembungkus divs: article

<article>
    …content…
    <div class="content">
        <p>Footer content.</p>
    </div>
</article>

dengan CSS:

footer {
    width: 100%;
    background: url(footer.png) 0 0 repeat-x;
}

.content {
    width: 70%;
    margin: 0 auto;
}

Ini menambah div yang tidak perlu. Penyelesaian penyemak imbas yang bersih menggunakan padding dan margin negatif:

body {
    overflow-x: hidden;
}

.extendfull, .extendleft {
    padding-left: 3000px;
    margin-left: -3000px;
}

.extendfull, .extendright {
    padding-right: 3000px;
    margin-right: -3000px;
}

Kelas

, extendleft, dan extendright mengawal pelanjutan. extendfull menghalang menatal mendatar. Ini berfungsi merentasi pelayar utama, tetapi IE6 dan IE7 memerlukan pembetulan: overflow-x: hidden

/* IE6/7 fix */
.extendfull, .extendleft, .extendright {
    position: relative;
    display: inline;
    float: left;
    width: 100%;
}

Ini mungkin menjejaskan susun atur penyemak imbas moden; Pelarasan mungkin diperlukan.

Soalan Lazim (Soalan Lazim):

Artikel kemudian menyediakan seksyen FAQ yang menangani soalan-soalan umum tentang mewujudkan bar lebar yang responsif, berpusat, dan bergaya menggunakan CSS, termasuk:

• respons: Menggunakan unit untuk lebar berasaskan viewport. vw
• Isu Lebar Penuh: Menangani konflik padding/margin pada atau body. html
• Kandungan berpusat: menggunakan CSS Flexbox untuk penjajaran kandungan.
• Latar Belakang & Borders: Menambah warna latar, sempadan, kecerunan, bayang -bayang, dan padding.
• bar melekit: menggunakan untuk kedudukan tetap pada tatal. position: sticky;
• peralihan: Menggunakan kesan peralihan untuk animasi lancar.

Artikel ini menyimpulkan dengan mengulangi penyelesaian yang disediakan dan menonjolkan kelebihan dan kelemahan potensi mereka.

Atas ialah kandungan terperinci Cara Memperluaskan Elemen Bungkus ke Lebar Pelayar Penuh Menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!