web-dev-qa-db-ja.com

残りの幅を取るためにdivを広げる

2列のdivレイアウトが欲しいのですが、それぞれが可変の幅を持つことができます。

div {
    float: left;
}
.second {
    background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>

'tree' divが必要なスペースをいっぱいにした後、 'view' divを使用可能な全幅まで拡張する必要があります。現在私の 'view' divはそれが含んでいるコンテンツにリサイズされます

免責事項は重複していません：

float：leftが設定されている場合、divを最大幅に拡張します。 左側の固定幅が固定されているためです。

divの助けを借りる - divを残りの幅に合わせる 両方の列を左寄せにする必要があるため

htmlcsscss3multiple-columns
496
Anurag Uniyal

これに対する解決策は実際には非常に簡単ですが、all明白ではありません。特定の方法でフロートとやり取りする「ブロックフォーマットコンテキスト」（BFC）と呼ばれるものをトリガーする必要があります。

その2番目のdivを取り、floatを取り除き、代わりにoverflow:hiddenを渡します。 visible以外のオーバーフロー値は、それが設定されているブロックをBFCにします。 BFCは子孫フロートがそれらを逃げることを許しませんし、兄弟や先祖フロートがそれらに侵入することも許しません。ここでの最終的な効果は、浮動型divがその動作をし、次に2番目のdivが通常のブロックになり、利用可能なすべての幅floatで占められているものを除くを占有することです。

IE 6と7ではhasLayoutをトリガーする必要があるかもしれませんが、これは現在のすべてのブラウザで動作するはずです。思い出せません。

デモ：

966
Xanthir

私はフレックスボックスの魔法を発見しました（display：flex）。これを試して：

<style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

フレックスボックスは私がcssに15年間持っていたかったコントロールを私に与えます。それがついに登場！詳細情報： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ /

78
B T

これは、テーブルを扱うのが簡単で、CSSを扱うのが難しい（少なくとも不可能ではないにしても）難しい例の良い例です。

両方の列が固定幅であれば、これは簡単でしょう。

列の1つが固定幅の場合、これは少し難しくなりますが、完全に実行可能になります。

両方の列が可変幅の場合、私見では2列のテーブルを使用する必要があります。

26
cletus

この解決策をチェックしてください

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}
<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>
21
angel.dimitrov

ここで、これは役立つかもしれません...

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="clear" />
  </div>
</body>

</html>
15
a6hi5h3k

calcを使う：

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}
<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

これに関する問題は、値として（pxとemは問題なく）、または明示的に定義されたもののパーセントとして、すべての幅を明示的に定義しなければならないことです。

12
joel Moses

Flexboxソリューション

html, body {
  height: 100%;
}
.wrapper {
  display: flex;
  height: 100%;
}
.second {
  flex-grow: 1;
}
<div class="wrapper">
  <div style="background: #fc9;">Tree</div>
  <div class="second" style="background: #ccc;">View</div>
</div>

注： サポートされているブラウザ で必要な場合は、フレックスベンダープレフィックスを追加します。

11
Reggie Pinkham

私はなぜ古い[TABLE]タグを使用してSO EASYである単純な柱状レイアウトのための純粋なCSSソリューションを見つけるために人々がそんなに懸命に努力しても構わないと思っています。

すべてのブラウザにはまだテーブルレイアウトロジックがあります。恐らく恐竜と呼んでください。

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>

ブラウザ間の互換性に関しても、それほど危険ではありません。

5
PatM
<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="right">View</div>
    <div style="width: <=100% getTreeWidth()100 %>">Tree</div>
    <div class="clear" />
  </div>
  <div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
  </div>

</body>

</html>
3
A.Pramod Kumar

CSS Grid Layout を試すことができます。

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}
<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>
3
canon

少し異なる実装

2つのdivパネル（コンテンツ+追加）、並べて、content panelが存在しない場合はextra panelが展開されます。

jsfiddle： http://jsfiddle.net/qLTMf/1722/

1
Rao

Pat - あなたは正しいです。だからこそ、このソリューションが「恐竜」と同時代の人々の両方を満足させるのです。 :)

.btnCont {
  display: table-layout;
  width: 500px;
}

.txtCont {
  display: table-cell;
  width: 70%;
  max-width: 80%;
  min-width: 20%;
}

.subCont {
  display: table-cell;
  width: 30%;
  max-width: 80%;
  min-width: 20%;
}
<div class="btnCont">
  <div class="txtCont">
    Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
  </div>
  <div class="subCont">
    This column as well as the entire container works like a table. Isn't Amazing!!!
  </div>
</div>
1
johnmanoahs

Simpl.cssのプラグをありがとう！

すべての列をColumnWrapperで囲むことを忘れないでください。

<div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
</div>

私はSimpl.cssのバージョン1.0をリリースしようとしているので、Wordを広めるのを手伝ってください！

1
Shaggy

flex-grow - これは必要に応じてフレックスアイテムが成長する能力を定義します。それは割合として役立つ単位のない値を受け入れます。それは、アイテムが使用する必要があるフレックスコンテナ内の使用可能なスペースの量を決定します。

すべてのアイテムのflex-growが1に設定されている場合、コンテナ内の残りのスペースはすべての子に均等に分配されます。子供の1人が2の値を持つ場合、残りのスペースは他のスペースの2倍のスペースを占有します（または、少なくともそれを試みます）。もっと見る ここ

.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}
<div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>
1
Stanislav Ostapenko

他の列の幅が固定されている場合、 calc CSS関数を使用してみてください - すべての一般的なブラウザで動作します ：

width: calc(100% - 20px) /* 20px being the first column's width */

このようにして、第２行の幅が計算され（すなわち残りの幅）そしてそれに応じて適用される。

1
anit

あなたはrestと呼ばれるクラスを含むW3のCSSライブラリを使うことができます。

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-row">
  <div class="w3-col " style="width:150px">
    <p>150px</p>
  </div>
  <div class="w3-rest w3-green">
    <p>w3-rest</p>
  </div>
</div>

ページのheaderでCSSライブラリをリンクすることを忘れないでください：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

これが公式デモです： W3 School Tryit Editor

0
manar

これがあなたが期待している答えであるかどうかわからないが、なぜあなたはTreeの幅を 'auto'に、 'View'の幅を100％に設定しないのですか？

0
anonymous

JQuery $（document）.ready（）から呼び出すJavaScript関数を書きました。これは親divのすべての子をパースし、一番右の子だけを更新します。

html

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

ジャバスクリプト

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left")) 
                     + parseInt($(this).css("border-left-width")) 
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right")) 
                     + parseInt($(this).css("border-right-width")) 
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}
0
bcr666

利用可能なCSSレイアウトフレームワークを見てください。 Simpl または、もう少し複雑なBlueprintフレームワークをお勧めします。

Simplを使用している場合は（ simpl.css ファイルを1つだけインポートする必要がある）、これを実行できます。

<div class="Colum­nOne­Half">Tree</div>
<div class="Colum­nOne­Half">View</div>

50〜50のレイアウトの場合、または

<div class="Colum­nOne­Quarter">Tree</div>
<div class="Colum­nThreeQuarters">View</div>

、25から75まで。

それはとても簡単です。

0
vikas

これはflexboxを使うとかなり簡単です。下記のスニペットを参照してください。フローを制御し、グローバルな高さを設定するためにラッパーコンテナを追加しました。要素を識別するために罫線も追加されています。必要に応じて、divが最大の高さまで拡張されるようになりました。ベンダープレフィックスは、まだ完全にはサポートされていないため、実際のシナリオではflexboxに使用する必要があります。

私はflexboxを使ってレイアウトを理解しデザインするための無料ツールを開発しました。ここでそれをチェックしてください： http://algid.com/Flex-Designer

.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}
<div class="container">
    <div>Tree</div>
    <div class="second">View</div>
</div>
0
Mario Vázquez