Bagaimana untuk Mencapai Jarak Responsif antara Pengepala, Kandungan dan Div Pengaki menggunakan Flexbox?-tutorial css-php.cn

Bagaimana untuk Mencapai Jarak Responsif antara Pengepala, Kandungan dan Div Pengaki menggunakan Flexbox?

Patricia Arquette

Lepaskan： 2024-11-15 13:14:02

asal

751 orang telah melayarinya

How to Achieve Responsive Spacing between Header, Content, and Footer Divs using Flexbox?

Menyelesaikan Peletakan Div Pengisian Ruang antara Pengepala dan Pengaki

Dalam peralihan daripada susun atur berasaskan jadual kepada div, halangan biasa timbul: memastikan jarak yang padu dan responsif antara pengepala, kandungan dan div pengaki. Berikut ialah pendekatan yang boleh dipercayai menggunakan Flexbox:

Penyelesaian Flexbox

Reka letak Flex memperkasakan anda untuk mengagihkan ruang secara dinamik, membolehkan ketinggian pengepala dan pengaki semula jadi sementara kandungan memenuhi kawasan yang tinggal dengan lancar. Ini meniru gelagat intuitif apl mudah alih asli, di mana pengepala dan pengaki melekat pada tepi atas dan bawah port pandangan, menjadikan kandungan boleh ditatal dalam bahagian utama.

Pelaksanaan HTML dan CSS

Kod berikut menunjukkan penyelesaian:

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

Salin selepas log masuk

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

Salin selepas log masuk

Dengan memanfaatkan fleksibiliti Flexbox, anda boleh memperuntukkan ruang secara elegan dan responsif dalam halaman web anda, memastikan pengalaman pengguna yang optimum tanpa mengira peleraian skrin.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Jarak Responsif antara Pengepala, Kandungan dan Div Pengaki menggunakan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!