1

私は、サイドバーとメインセクションで構成される、シンプルで流動的で応答性の高い2列のレイアウト（CSSを学習するためだけに）を作成しようとしています。

高さ100％のサイドバーを作成し、メインコンテンツを横に配置することができましたが、メインセクション内にH1を入れると...多田！そのマージンは、サイドバーにもマージンを作成しました。

問題を提示する最小限のコードは次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,body {
        margin:0;
        padding:0;
        width:100%;
        height:100%;
      }

      #sidebar {
        display:block;
        position:absolute;
        width:25%;
        min-height:100%;
        border-right:1px solid #222;
        background-color: #E0E0E0;
      }

      #main {
        margin-left:25%;
        display:block;
      }

      h1 {
        padding:2%;
        /* margin:0; */
        /* defining the margin as zero aligns 
         * everything at the top */
      }
    </style>
  </head>

  <body>
    <header id="sidebar">
      Let's reach for the stars!
    </header>

    <section id="main">
      <h1>Nope!</h1>
    </section>

  </body>
</html>

ChromeとFirefoxでテストしましたが、両方で発生しました。

私はこのJSFiddleを作成しましたが、cimmanonからのコメントのおかげで、動作は同じです。

まあ、私は迷子になっています。私は本当に単純なものが欠けていますか？

このアプローチは、2列のレイアウトを作成するための良い方法ですか？私はSvbtleブログからCSSを読んで自分自身にインスピレーションを与えました。

そうでない場合は、正しい方法で教えてください。私は良いCSSの教化を必要としています:)

ありがとう！

4

2 に答える 2

1

h1に追加display: inline-blockすると、サイドバーに影響を与えません。次に、任意のマージンを設定できます。

JSFiddleで問題がないように見えた理由は、おそらくそれらのスタイルから適用されたスタイルです（h1を調べると、それが含まれていることがわかりますmargin:0）。

于 2012-12-25T14:16:27.840 に答える
1

一般的に、ドキュメントのフローから要素を本当に削除したい場合を除いて、絶対的な配置は避ける必要があります。#mainコンテンツがより短いページが#sidebarあり、ユーザーのディスプレイの高さがすべて#sidebarのコンテンツを表示するのに十分でない場合は、コンテンツが切り取られます。

同じ高さの列を実現するための私のお気に入りの方法は、display: tableCSSプロパティを使用することです。

http://jsfiddle.net/PmkCQ/3/

html,body {
        margin:0;
        padding:0;
        width:100%;
        height:100%;
      }

body { display: table }

      #sidebar {
        width:25%;
        border-right:1px solid #222;
        background-color: #E0E0E0;
      }

      #sidebar, #main {
        display:table-cell;
        vertical-align: top; /* optional */
      }

      h1 {
        padding:2%;
        margin-top: 0;
        /* margin:0; */
        /* defining the margin as zero aligns 
         * everything at the top */
      }

もちろん、他の方法もありますが、これはフロートや絶対測位よりも壊れにくいです。唯一の欠点は、IE7がこれらのプロパティをサポートしていないため、要素の以前に定義された（またはデフォルトの）表示設定を引き続き使用することです（のdiv場合はblock）。

于 2012-12-25T14:28:37.527 に答える