等しい高さを実装するための 3 つの純粋な CSS メソッド columns_html/css_WEB-ITnose

この記事では、純粋な CSS を使用して同じ高さの列を実装する 3 つの方法を紹介します。 Web レイアウトで列の高さを設定することは比較的一般的であるため、この記事ではいくつかのエレガントな純粋な CSS ソリューションを要約します。

イラストは自分で描きました、気に入らなかったら文句言わないでください（笑）。 。

以下に紹介する 3 つの方法は CSS のみを使用し、jQuery や JavaScript の計算および実装方法を含まないため、この記事のタイトルを「等しい高さの列を実現する 3 つの純粋な CSS メソッド」としました。

方法 1: マージン、パディング、オーバーフローを使用して を実現します

最初の方法では、マージン、パディング、オーバーフローを使用して列の高さを強制的に等しくします。この方法では、浮動要素ごとに十分な大きさの下部パディングを設定する必要があります。重要なのは、親コンテナーで overflow: hidden を設定して、余分な部分を非表示にすることです。

「Method-1」の例の HTML タグは次のとおりです:

<div class="main">            <div class="container clearfix">                <div class="content">                    <section>                        <h1>纯CSS实现等高列(1): 使用Margins, Paddings和 Overflow来实现</h1>                        <hr>                        <p>第一种方法使用margins, paddings和overflow来迫使列的高度相等。这个方法需要为每个浮动元素设置一个足够大的底部填充。关键是设置在父容器overflow: hidden把多余的部分给它隐藏起来。下面是这种实现的CSS规则:</p>                        <p>这个方法很简单! 它可以扩展到更多的行和列的布局中，或者说是所有类型的网格布局。</p>                        <p>最后, 再在CSS规则中添加媒介查询，OK, 下面是最后的效果截图。</p>                    </section>                </div>                <div class="sidebar">                    <aside>                        <h2>This is a sidebar</h2>                    </aside>                </div>            </div><!-- /.containter -->        </div><!-- /.main -->

この実装の CSS ルールは次のとおりです:

    <style> html, body { font-family: Microsoft JhengHei, SimHei; background-color: #29384D; font-size: 10px; width: 100%; height: 100%; position: relative; } .main .container { width: 80%; margin: 3em auto; overflow: hidden; } .content { width: 80%; float: left; margin-left: 2px; color: #464444; background-color: #FFFFFF; box-shadow: 2px 2px 3px #1f1d1d, -1px -1px 3px #1f1d1d; } .content h1 { font-size: 28px; color: #FF4A59; } .content p { font-size: 18px; font-family: SimHei; color: #29384D; } .sidebar { width: 18%; float: right; margin-right: 3px; color: #FFFFFF; background-color: #FF4A59; box-shadow: 2px 2px 3px #151414, -1px -1px 3px #100f0f; } .content, .sidebar { padding-bottom: 99999px; margin-bottom: -99999px; } section, aside { padding: 3em; } // 添加媒介查询 @media all and (max-width: 840px) { .main .container { padding: 0 3em; overflow: visible; } .content { float: none; width: 100%; } .sidebar { float: none; margin-right: 0; width: 100%; } .content, .sidebar { padding-bottom: 0; margin-bottom: 0; } .content { margin-bottom: 30px } } </style>

最後に、CSS ルールにメディア クエリも追加しました。

この方法は非常に簡単です!さらに多くの行と列のレイアウト、またはあらゆるタイプのグリッド レイアウトに拡張できます。

OK、これが最終的な効果のスクリーンショットです。

方法-2: CSS 疑似クラスと位置決めを通じて等しい高さの列を実装する

この方法では、疑似クラス: after を使用します。親コンテナを相対配置(position:relative)に設定し、コンテナの擬似要素を絶対配置(position:absolute)、高さを100%(height:100%)に設定します。次に、コンテナ疑似要素に必要な左右の幅を調整する必要があります。注: このメソッドでは、オーバーフローを非表示にするためにコンテナに overflow: hidden を設定する必要もあります。

HTML タグ (method-1 と同じ HTML 構造):

<div class="main">            <div class="container clearfix">                <div class="content">                    <section>                        <h1>纯CSS实现等高列(2): 通过CSS伪类和定位实现等高列</h1>                        <hr>                        <p>这个方法就是使用伪类:after。将父容器设置为相对定位（position: relative），再把容器的伪元素设置为绝对定位(position: absolute)和高度为100%(height: 100%)。然后还需要我们去调整容器伪元素所需的width、left和right。注意：这种方法也要给容器设置overflow: hidden来隐藏溢出。</p>                        <p>内容和侧边栏的左和右定位30 px是为了弥补父容器的填充。同样，最后给它添加媒介查询, 让它变成响应:</p>                    </section>                </div>                <div class="sidebar">                    <aside>                        <h2>This is a sidebar</h2>                    </aside>                </div>            </div><!-- /.containter -->        </div><!-- /.main -->

それでは、CSS ルールを見てみましょう:

    <style> html, body { font-family: Microsoft JhengHei, SimHei; background-color: #FFFFFF; font-size: 10px; height: 100%; width: 100%; } .main .container { width: 80%; margin: 3em auto; position: relative; overflow: hidden; } .content { float: left; margin: 3px; width: 800px; color: #FFFFFF; background-color: #29384D; box-shadow: 2px 2px 4px #846363, 0px 0px 2px #8E7171; } .content h1 { font-size: 28px; } .content p { font-size: 18px; font-family: SimHei; color: #bea9a9; } .sidebar { float: right; margin: 3px; width: 230px; color: #FFFFFF; background-color: #FF4A59; box-shadow: 2px 3px 4px #846363; } .content:after, .sidebar:after { display: block; position: absolute; height: 100%; content: ""; background-color: #FF4A59; box-shadow: 2px 2px 4px #846363; } .content:after { } .sidebar:after { width: 230px; } section, aside { padding: 30px } @media all and (max-width: 840px) { .main .container { padding: 0 30px; overflow: visible; } .content { float: none; margin-bottom: 30px; } .sidebar { float: none; margin-right: 0; width: 100%; } .content:after, .sidebar:after { display: none } } </style>

コンテンツとサイドバーの左右の位置 30 ピクセルは、親の塗りつぶしを補正するためのものですコンテナの。

同様に、最終的にメディア クエリを追加して応答性を高めました。これは「方法 2」の例のスクリーンショットです。列の高さを同じにするためのテーブルは、実際にはテーブルを使用せず (テーブル要素は HTML では使用されません)、表示するテーブル要素の属性に CSS プロパティを設定するだけです。この方法はおそらく最も簡単な解決策です。ただし、「テーブル」が使用されるため、ブラウザの互換性の問題に特別な注意を払う必要があります。それにもかかわらず、

方法 3

は依然としてエレガントでシンプルかつ効果的なソリューションです。

メソッド 3 の HTML は次のとおりです:

    <div class="main">        <div class="container">            <div class="table">                <div class="row">                    <div class="col content">                        <h1> 纯CSS实现等高列(3): 使用表格实现等高列</h1>                        <hr>                        <p>方法3使用表格来实现列的等高并不会真正使用表格(在HTML里没有用到表格元素), 而只是是把CSS属性设置为表格元素的属性来显示。这个方法可能是最简单的解决方案。不过因为是用到了"表格"所有需要特别小心浏览器兼容性问题。尽管如此, 它仍然是一个优雅、简单、有效的解决方案, 下面是方法-3的HTML:</p>                        <p>我们将设置父元素设置为display: table。我重置容器padding: 0,  以弥补在table的border-spacing属性。这是我们的CSS:</p>                        <p>最后是添加媒体查询，让它变成响应式的。</p>                    </div>                    <div class="col sidebar">                        <h2>This is a Sidebar.</h2>                    </div>                </div>            </div>        </div>    </div><!-- #main -->

CSS 部分:

    <style> html, body { font-family: Microsoft JhengHei, SimHei; background-color: #FF4A59; font-size: 10px; width: 100%; height: 100%; position: relative; } .main .container { padding: 0 0; } .table { width: 80%; margin: 2em auto; display: table; border-collapse: separate; border-spacing: 30px 0; } .row { display: table-row; } .col { display: table-cell; background-color: #fff; padding: 30px; } .col.content { width: 70%; background-color: #FFFFFF; box-shadow: 4px 4px 8px #443333; } .col.content h1 { font-size: 28px; color: #FF4A59; } .col.content p { font-size: 18px; font-family: SimHei; color: #29384D; } .col.sidebar { width: 25%; color: #FFFFFF; background-color: #29384D; box-shadow: 4px 4px 8px #443333; } @media all and (max-width: 840px) { /* demo 3 */ .main .container { padding: 0 30px; } .table { display: block; } .row { display: block; } .col { display: block; } .col.content { margin-bottom: 30px; width: 100%; } .col.sidebar { width: 100%; } } </style>

表示するように親要素を設定します: table。コンテナーのパディング: 0 をリセットして、テーブルのボーダー間隔プロパティを補正します。

方法-3 サンプル効果のスクリーンショット:

OK、上記は、純粋な CSS を使用した同じ高さの列の問題に対する 3 つの解決策をまとめたものです。