html - divを残りの水平スペースに埋めるにはどうすればよいですか？

Question

2つのdivがあります。1つはページの左側に、もう1つはページの右側にあります。左側は幅が固定されており、右側は残りのスペースを埋めてほしいです。

#search {
  width: 160px;
  height: 25px;
  float: left;
  background-color: #ffffff;
}

#navigation {
  width: 780px;
  float: left;
  background-color: #A53030;
}

<div id="search">Text</div>
<div id="navigation">Navigation</div>

score 284 · Accepted Answer

Boushley の答えで私が見つけた問題は、右の列が左の列よりも長い場合、左の列を包み込み、スペース全体を埋め始めることです。これは私が探していた動作ではありません。多くの「解決策」を検索した後、3 列のページの作成に関するチュートリアル (現在はリンクが無効になっています) を見つけました。

著者は 3 つの異なる方法を提供しています。1 つは固定幅、1 つは 3 つの可変列、もう 1 つは固定された外側の列と可変幅の中央です。私が見つけた他の例よりもはるかにエレガントで効果的です。CSS レイアウトの理解が大幅に向上しました。

基本的に、上記の単純なケースでは、最初の列を左にフロートさせ、固定幅にします。次に、右側の列に、最初の列よりも少し広い左余白を与えます。それでおしまい。終わり。Ala Boushley のコード:

Stack Snippets & jsFiddleのデモはこちら

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}

<div id="left">  left  </div>
<div id="right"> right </div>

Boushley の例では、左の列が右の列を保持しています。左の列が終了するとすぐに、右の列が再びスペース全体を埋め始めます。ここでは、右の列がページのさらに奥に配置され、左の列がその大きな余白を占めています。フローの相互作用は必要ありません。

score 206 · Accepted Answer

最近では、このflexboxメソッドを使用する必要があります (ブラウザプレフィックスを持つすべてのブラウザに適用される可能性があります)。

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

詳細: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

score 134 · Accepted Answer

解決策は、displayプロパティから得られます。

基本的に、2つのdivをテーブルセルのように機能させる必要があります。したがって、を使用する代わりに、両方のdivでfloat:left使用display:table-cellする必要があり、動的幅divについてwidth:auto;も設定する必要があります。両方のdivは、プロパティとともに100％幅のコンテナに配置する必要がありdisplay:tableます。

これがcssです：

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

そしてHTML：

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

重要：Internet Explorerの場合、動的幅divでfloatプロパティを指定する必要があります。指定しないと、スペースが埋められません。

これで問題が解決することを願っています。必要に応じて、私がブログでこれについて書いた記事全体を読むことができます。

score 112 · Accepted Answer

これはよくある質問なので、BFC を使用した優れた解決策を共有したいと思います。
以下のCodepenサンプルはこちら。

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

この場合、overflow: autoコンテキストの動作をトリガーし、右の要素を利用可能な残りの幅にのみ.left拡張し、消えると自然に全幅に拡張します。多くの UI レイアウトにとって非常に便利でクリーンなトリックですが、最初は「なぜそれが機能するのか」を理解するのが難しいかもしれません。

score 78 · Accepted Answer

これはあなたがしようとしていることを達成するようです。

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}

<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>

score 24 · Accepted Answer

~~特定のブラウザーの古いバージョン (IE 10~~ 8 以下など) との互換性が必要ない場合は、 calc()CSS 関数を使用できます。

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}

score 16 · Accepted Answer

@Boushley の回答が最も近いものでしたが、指摘されていない問題が 1 つあります。右側のdiv はブラウザの幅全体を占めます。コンテンツは予想される幅を取ります。この問題をよりよく理解するには:

<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>

http://jsfiddle.net/79hpS/

コンテンツは (Firefox で) 正しい場所にありますが、幅が正しくありません。子要素が幅の継承を開始すると (たとえば、のテーブルwidth: 100%)、ブラウザーの幅と同じ幅が与えられ、ページの右側からはみ出して (Firefox の場合) 水平スクロールバーが作成されるか、フロートせずに押し下げられます (クロムで）。

これは、右側の列に追加することで簡単に修正できます。overflow: hiddenこれにより、コンテンツと div の両方に正しい幅が得られます。さらに、テーブルは正しい幅を受け取り、使用可能な残りの幅を埋めます。

上記の他の解決策をいくつか試しましたが、特定のエッジケースでは完全には機能せず、複雑すぎて修正することができませんでした. これは機能し、簡単です。

何か問題や懸念がある場合は、遠慮なく提起してください。

score 3 · Accepted Answer

Boushley の答えは、フロートを使用してこれを配置するための最良の方法のようです。ただし、問題がないわけではありません。展開された要素内にネストされたフローティングは使用できません。ページが壊れます。

示されているメソッドは、拡張要素に関しては基本的に「偽装」しています。実際にはフローティングではなく、マージンを使用して固定幅のフローティング要素と一緒に遊んでいるだけです。

問題はまさにそれです。展開要素がフローティングされていません。展開要素内にネストされたフローティングを試してみると、それらの「ネストされた」フローティングアイテムは実際にはネストされていません。「ネストされた」フロートアイテムの下にa を貼り付けようとするとclear: both;、トップレベルのフロートもクリアされてしまいます。

次に、Boushley のソリューションを使用するには、次のような div を配置する必要があることを追加したいと思います。幅: 100%; フロート: 左; これを展開された div 内に直接配置します。展開されたすべての div のコンテンツは、この fakeFloat 要素内に配置する必要があります。

このため、この特定のケースではテーブルを使用することをお勧めします。浮動要素は実際には、必要な拡張を行うようには設計されていませんが、テーブルを使用したソリューションは簡単です。テーブルではなく、レイアウトにはフローティングの方が適切であるという議論が一般的に行われています..しかし、とにかくここではフローティングを使用していません。あなたはそれを偽造しています.私のささやかな意見。

score 3 · Accepted Answer

液体の左と固定の右に対して上記の解決策を試しましたが、どれも機能しませんでした（質問が逆であることは承知していますが、これは関連していると思います）。うまくいったのは次のとおりです。

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>

score 1 · Accepted Answer

誰も使っposition: absoluteていないのだろうかposition: relative

したがって、別の解決策は次のとおりです。

HTML

<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>

CSS

header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}

Jsfiddle の例

score 0 · Accepted Answer

.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}

<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

これを試して。それは私のために働いた。

score 0 · Accepted Answer

最も簡単な解決策は、マージンを使用することです。こちらもレスポンシブ！

<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>

score 0 · Accepted Answer

/* * css */

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/* * html */

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>

score -2 · Accepted Answer

いくつかのjqueryUIコントロールをレイアウトしようとして、この同じ問題に遭遇しました。現在の一般的な哲学は「」DIVの代わりに使用することですTABLEが、私の場合、 TABLE を使用するとはるかにうまく機能することがわかりました。特に、2 つの要素内で簡単に配置する必要がある場合 (たとえば、垂直方向の中央揃え、水平方向の中央揃えなど)、TABLE で使用できるオプションを使用すると、これを簡単かつ直感的に制御できます。

これが私の解決策です：

<html>
<head>
  <title>Sample solution for fixed left, variable right layout</title>
  <style type="text/css">
    #controls {
      width: 100%;
    }
    #RightSide {
      background-color:green;
    }
  </style>
</head>

<body>
<div id="controls">
  <table border="0" cellspacing="2" cellpadding="0">
    <TR>
      <TD>
        <button>
FixedWidth
        </button>
      </TD>
      <TD width="99%" ALIGN="CENTER">
        <div id="RightSide">Right</div>
      </TD>
    </TR>
  </table>
</div>
</body>
</html>

html - divを残りの水平スペースに埋めるにはどうすればよいですか？

26 に答える 26

Related

Reference