cari
Rumahhujung hadapan webhtml tutorialCSS+DIV 实现左右高度自适应_html/css_WEB-ITnose

 

                  <p class="sycode">                       1            <!     DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"     >           2            <     html      xmlns     ="http://www.w3.org/1999/xhtml"           >           3            <     head     >           4            <     title     >     div + css左右高度自适应测试     </     title     >           5            </     head     >           6            <     body     >           7            <     div      class     ="MainCenterDiv"     >           8            <     style      type     ="text/css"     >           9            /*     左右高度自适应 Start     */           10       #Page      11            {           12       width     :      960px     ;           13       margin     :      0 auto     ;           14       overflow     :      hidden     ;           15            }           16       #header      17            {           18       background     :      #000     ;           19            }           20       #PageLeft      21            {           22       width     :      198px     ;           23       float     :      left     ;           24       text-align     :      left     ;           25       border     :     solid 1px #ccc     ;           26       background-color     :     #eee     ;           27            }           28       #PageRight      29            {           30       width     :      748px     ;           31       float     :      left     ;           32       text-align     :      left     ;           33       margin-left     :     10px     ;           34       border     :     solid 1px #ccc     ;           35            }           36            /*      easy clearing      */           37       #Page:after      38            {           39       content     :      '[DO NOT LEAVE IT IS NOT REAL]'     ;           40       display     :      block     ;           41       height     :      0     ;           42       clear     :      both     ;           43       visibility     :      hidden     ;           44            }           45       #Page      46            {           47       display     :      inline-block     ;           48            }           49            /*     \     */           50       #Page      51            {           52       display     :      block     ;           53            }           54            /*      end easy clearing      */           55            /*     \     */           56       #PageLeft, #PageRight      57            {           58       padding-bottom     :      32767px !important     ;           59       margin-bottom     :      -32767px !important     ;           60            }           61       @media all and (min-width: 0px)      62            {           63       #PageLeft, #PageRight      64       {      65       padding-bottom     :      0 !important     ;           66       margin-bottom     :      0 !important     ;           67            }           68       #PageLeft:before, #PageRight:before      69            {           70       content     :      '[DO NOT LEAVE IT IS NOT REAL]'     ;           71       display     :      block     ;           72       background     :      inherit     ;           73       padding-top     :      32767px !important     ;           74       margin-bottom     :      -32767px !important     ;           75       height     :      0     ;           76            }           77       }      78            /*     补充底部border     */           79       div.BottomBorder     {           80       width     :      960px     ;           81       margin     :      0 auto     ;           82       overflow     :      hidden     ;           83       height     :     1px     ;           84       clear     :     both     ;           85            }           86       div.BottomBorder .LeftBorder     {           87       width     :      200px     ;           88       float     :      left     ;            89       border-top     :     solid 1px #ccc     ;           90            }           91       div.BottomBorder .RightBorder     {           92       width     :      750px     ;           93       float     :      left     ;           94       margin-left     :     10px     ;           95       border-top     :     solid 1px #ccc     ;           96            }           97            /*     左右高度自适应 End     */           98             99           100            101            </     style     >          102            <     div      id     ="Page"     >          103            <     div      id     ="PageLeft"     >          104            105            <     p     >     test     </     p     >          106            <     p     >     test     </     p     >          107            </     div     >          108            <     div      id     ="PageRight"     >          109            <     p     >     test     </     p     >          110            <     p     >     test     </     p     >          111            <     p     >     test     </     p     >          112            <     p     >     test     </     p     >          113            <     p     >     test     </     p     >          114            <     p     >     hi.baidu.com/     </     p     >          115            <     p     >     test     </     p     >          116            <     p     >     test     </     p     >          117            <     p     >     test     </     p     >          118            <     p     >     test     </     p     >          119            <     p     >     test     </     p     >          120           121            </     div     >          122            <     div      class     ="BottomBorder"     >          123            <     div      class     ="LeftBorder"     ></     div     >          124            <     div      class     ="RightBorder"     ></     div     >          125            </     div     >          126            </     div     >          127            </     div     >          128            </     body     >          129            </     html     >                  </p>

 

 

 

css + div 实现左右div区域高度自动适应

引自:http://www.cnblogs.com/guolichun/archive/2008/04/25/1171179.html

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
HTML dan Kod: Melihat lebih dekat pada istilahHTML dan Kod: Melihat lebih dekat pada istilahApr 10, 2025 am 09:28 AM

Htmlisaspecifictypeofcodefocusedonstructuringwebcontent, manakala "kod" secara meluas ini

HTML, CSS, dan JavaScript: Alat penting untuk pemaju webHTML, CSS, dan JavaScript: Alat penting untuk pemaju webApr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab TerasPeranan HTML, CSS, dan JavaScript: Tanggungjawab TerasApr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Adakah HTML mudah belajar untuk pemula?Adakah HTML mudah belajar untuk pemula?Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Apakah contoh tag permulaan dalam html?Apakah contoh tag permulaan dalam html?Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

Bagaimana cara menggunakan susun atur flexbox CSS untuk mencapai penjajaran yang berpusat pada kesan segmentasi garis putus -putus dalam menu?Bagaimana cara menggunakan susun atur flexbox CSS untuk mencapai penjajaran yang berpusat pada kesan segmentasi garis putus -putus dalam menu?Apr 05, 2025 pm 01:24 PM

Bagaimana untuk merancang kesan segmentasi garis bertitik di menu? Semasa merancang menu, biasanya tidak sukar untuk menyelaraskan kiri dan kanan antara nama hidangan dan harga, tetapi bagaimana pula dengan garis bertitik atau titik di tengah ...

Apakah elemen HTML yang digunakan oleh editor kod dalam talian untuk melaksanakan input kod?Apakah elemen HTML yang digunakan oleh editor kod dalam talian untuk melaksanakan input kod?Apr 05, 2025 pm 01:21 PM

Analisis elemen HTML dalam editor kod web Banyak editor kod dalam talian membolehkan pengguna memasukkan kod HTML, CSS, dan JavaScript. Baru -baru ini, seseorang mencadangkan ...

React Static Page Construction: Bagaimana untuk mengelakkan mampatan kod dengan React-App-Rewired?React Static Page Construction: Bagaimana untuk mengelakkan mampatan kod dengan React-App-Rewired?Apr 05, 2025 pm 01:18 PM

Mengenai cara mengelakkan mampatan kod ketika membina halaman statik menggunakan banyak pemaju yang diberitahu react-app yang ingin disampaikan kepada ...

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

SublimeText3 versi Inggeris

SublimeText3 versi Inggeris

Disyorkan: Versi Win, menyokong gesaan kod!

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma