CSS+DIV で左右の高さ調整を実現_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS+DIV で左右の高さ調整を実現_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:33 PM

                  <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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

＆lt; Progress＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:34 PM

この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

＆lt; datalist＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:33 PM

この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

＆lt; meter＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:35 PM

この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

HTML5＆lt; time＆gt;を使用するにはどうすればよいですか日付と時刻を意味的に表す要素？Mar 12, 2025 pm 04:05 PM

この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

＆lt; iframe＆gt;の目的は何ですかタグ？使用する際のセキュリティ上の考慮事項は何ですか？Mar 20, 2025 pm 06:05 PM

この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

See all articles

ホットAIツール

ホットツール

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。