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

419

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>
スニペットを展開

html  css  width  responsive 
— Alexchenco
ソース
11
#navigationの幅とフロートプロパティを削除すると、機能します。
— Johan Leino、
— エイドリアンはして
1
@alexchenco：選択した回答をハンクから提供された回答に更新することをお勧めします
— Adrien Be
@AdrienBe mystrdatの答えを見ると、実際にはもっと良いと思います。それは私のために働いたCSSの1行だけであり、それは私のために働いた唯一のものです（私はfloat：leftで3列を作成しています;最初の2列は固定幅で、overflow：autoは最後のものでそれは素晴らしい働きをします）
— edwardtyl
@edwardtyl十分に公正です。実際、それは私がstackoverflow.com/questions/4873832/
— Adrien Be

回答:

71

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

#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>
スニペットを展開

— ブーシュリー
ソース
8
幅を削除する必要があります。それを機能させるには、右側のdivで100％にします。
— ヨハンレイノ
250
このソリューションには実際に問題があります。LEFT要素から色を削除してみてください。RIGHT要素の色が実際にその下に隠れていることがわかります。コンテンツは適切な場所に移動するようですが、RIGHT div自体は移動しません。
— Vyrotek 2011
5
+1私の問題も解決しました。私が学んだことは、fill divから「float：left」を削除する必要があるということでした。私はそれがページを内破させると思った
— キーヤー
12
おそらく、Vyroteksの発言は真実であることに気付くのは良いことですが、右側の列のoverflow：hiddenで解決できます。デンゼルはこれについて言及していますが、彼は受け入れられた答えではないので、あなたはそれを見逃すかもしれません...
— Ruudt
45
これは明らかに間違っています。右の要素はフルサイズで、その内容は左の要素の周りにフロートされます。これは解決策ではなく、単なる混乱です。
— mystrdat
268

Boushleyの答えで私が見つけた問題は、右側の列が左側よりも長い場合、左側を折り返してスペース全体を埋めることになるということです。これは私が探していた行動ではありません。多くの「ソリューション」を検索した後、3つの列のページを作成するためのチュートリアル（現在はリンクが停止しています）を見つけました。

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

基本的に、上記の単純なケースでは、最初の列を左にフロートし、固定幅を与えます。次に、右側の列に、最初の列よりも少し広い左マージンを設定します。それでおしまい。できました。Ala Boushleyのコード：

これがスタックスニペットと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の例では、左側の列が右側のもう一方の列を保持しています。左の列が終了するとすぐに、右の列が再びスペース全体を埋め始めます。ここで、右の列は単にページにさらに位置合わせされ、左の列は大きな太いマージンを占めています。流れの相互作用は必要ありません。

— ハンク
ソース
divタグを閉じると、そのdivの後のコンテンツは新しい行に表示されるはずですが、そうではありません。理由を教えてください。
— 11
マージンマージン：190px; あなたが忘れてしまった ';'。また、margin-leftは180pxにする必要があります。
— fuddin '10
4
注：固定幅の要素を右側に配置する場合は、必ずコードの最初に配置してください。そうしないと、とにかく次の行にプッシュされます。
— Trevor
2
@RoniTovi、フローティング要素は、html内の非フローティング要素の前に来る必要があります。jsfiddle.net/CSbbM/127
— Hank
6
では、固定幅を避けたい場合はどうすればよいでしょうか？つまり、左側の列を必要なだけ幅を広くし、右側の列を残りの列を占めるようにしますか？
— Patrick Szalapski、2016
126

解決策は、displayプロパティにあります。

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

ここに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プロパティを指定する必要があります。そうしないと、スペースが埋められません。

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

— ミハイフレンティウ
ソース
3
width：autoのdiv内のコンテンツが、ビューポートで利用可能な残りのスペースより大きい場合は機能しません。
— Nathan Loyer
4
@einord、このソリューションではテーブルを使用せず、テーブルは表形式のデータにのみ使用する必要があることを認識しています。だから、ここでは文脈外です。実際のテーブルとdisplay：table（+ other変動）プロパティは完全に異なります。
— Mihai Frentiu 2013年
1
@Mihai Frentiu、display：tableは実際のテーブル要素とどのように異なりますか？全く違うものがあれば是非学びたいです、ありがとうございます。=）
— einord 2013年
2
@ einord、HTMLテーブルの使用は、HTMLコードでのテーブル構造全体の定義を意味します。CSSテーブルモデルを使用すると、テーブルツリー全体を定義せずに、ほとんどすべての要素をテーブル要素のように動作させることができます。
— Mihai Frentiu 2013年
1
@Mihai Frentiu、答えてくれてありがとう。しかし、テーブル要素の動作は、テーブルをデザイン要素として使用する場合の問題の半分ではありませんか？
— einord 2013年
123

最近では、このflexboxメソッドを使用する必要があります（ブラウザーの接頭辞が付いたすべてのブラウザーに適応できる場合があります）。

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

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

— ヨルダン
ソース
CSS属性の詳細な説明については、www.w3schools.com / cssref / css3_pr_flex-grow.aspを参照してください。シンプルでモダンなソリューションですが、古いブラウザでは機能しない場合があります。
— エドワード
4
Flexbox FTW ...このスレッドで他のすべてのソリューションを試してみましたが、何も機能しません。このFlexboxソリューションを試してみます。すぐに機能します...クラシックCSS（つまり、フレックスボックスとCSSグリッドの登場前）は、レイアウトを完全に吸い込みます...フレックスとグリッドのルール:-)
— レオ
これは、現時点で選択されたソリューションとして受け入れられるはずです。また、これは唯一の「ハッキングではない」ソリューションです。
— グレッグ、
これは魅力のように機能し、私の日を節約します！
— lisnb '11 / 11/19
tsbaa（これが受け入れられた答えになるはずです）
— Ryo
104

これはかなり人気のある質問なので、BFCを使用した優れたソリューションを共有する傾向があります。
以下のCodepenサンプルはこちら。

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

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

— mystrdat
ソース
1
オーバーフローに対するブラウザーのサポート。IE4 !!! w3schools.com/cssref/pr_pos_overflow.asp
— Yevgeniy Afanasyev
1
.right要素に役に立たない水平スクロールバーが表示されることがあります。そこの問題は何ですか？
— Patrick Szalapski、2016
1
@PatrickSzalapskiケースのコーデックペンなどを作成できますか？auto内容によってはオーバーフローが発生する場合があります。他のオーバーフロー値を使用して同じ効果を得ることもできhiddenます。
— mystrdat 2016
1
BFCとは何の略ですか。WebでBFCを説明する優れた一般的なチュートリアルはありますか。
— lulalala 16
1
@lulalalaそれはブロックフォーマットコンテキストを表します。これはより完全な説明です
— bobo
23

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

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

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}
— マルコスB.
ソース
1
IE 9以降はcalc属性をサポートしています。このソリューションの唯一の問題は、おそらく左の列の幅がわからない、または変化することです。
— Arashsoft 2015年
まあ、このソリューションは、おそらく柔軟なケースに向けられており、親コンテナの幅がわからない、または気にしないと想定しています。質問では@alexchencoは、ノートのおかげで、彼は「残りのスペース」そう...私は有効だと思う:)を埋めたかったとはい、IE 9もサポートされていることを言った;）
— マルコスB.
15

@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の両方の正しい幅が得られます。さらに、テーブルは正しい幅を受け取り、使用可能な残りの幅を埋めます。

上記の他のソリューションのいくつかを試しましたが、特定のエッジケースでは完全に機能せず、複雑すぎて修正を保証できませんでした。これは機能し、簡単です。

問題や懸念がある場合は、遠慮なくあげてください。

— デンゼル
ソース
1
overflow: hidden確かにこれを修正します、ありがとう。（マークされた答えは間違っていますBTWはright実際には親で利用可能なすべてのスペースをとるため、要素を検査するときにすべてのブラウザーでこれを見ることができます）
— huysentruitw
1
これが正確に機能する理由を誰かが説明できますか？ここで良い説明を見たことがありますが、それを見つけることができません。
— tomswift
2
@tomswift設定overflow: hiddenは、適切な列を独自のブロック形式のコンテキストに配置します。ブロック要素は、それらが利用できるすべての水平スペースを占めます。参照：developer.mozilla.org/en-US/docs/Web/Guide/CSS/...
— ジョンKurlak
overflow:xxx属性がキーです。あなたが言うように、それは#right下に拡大するのをやめます#left。それは私がサイズ変更可能なjQuery UIを使用していた問題を非常にきれいに解決します- #rightオーバーフロー属性を#left設定し、サイズ変更可能として設定すると、単純な可動境界があります。jsfiddle.net/kmbro/khr77h0tを参照してください。
— kbro
13

ここでは、受け入れられたソリューションの小さな修正を示します。これにより、右の列が左の列の下に配置されなくなります。交換しwidth: 100%;てoverflow: hidden;、誰かがそれを知らなかった場合には、トリッキーなソリューション。

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

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


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[編集] 3列のレイアウトの例も確認してください：http : //jsfiddle.net/MHeqG/3148/

— ダリウス・シコルスキ
ソース
1
固定ロゴ付きの柔軟なナビゲーションバーに最適なソリューション。
— トランク
5

フレックスボックスの2つのアイテム間の残りのスペースを埋める場合は、次のクラスを、分離する2つのアイテム間の空のdivに追加します。

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}
— ヘルツゲート
ソース
4

使用する display:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>
— イルダル・ザリポフ
ソース
1
この答えは、2014年からヨルダンの答えを複製
— TylerH
3

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

示されている方法は、エキスパンド要素に関しては基本的に「偽物」です。実際にはフローティングではなく、マージンを使用して固定幅のフローティング要素と一緒に再生するだけです。

その場合の問題は、正確には次のとおりです。エキスパンド要素がフローティングされません。展開要素内にネストされたフローティングが存在する場合、それらの「ネストされた」フローティングアイテムは実際にはまったくネストされていません。clear: both;「ネストされた」フロートアイテムの下にを貼り付けようとすると、最上位のフロートもクリアされます。

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

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

— チンチ11a
ソース
レイアウトにテーブルを使用しないでください。高さは設定できません。彼らはコンテンツを保持するために拡張し、オーバーフローを尊重しません。
— kbro
@kbro：コンテンツと表示を分離しておく必要があるため、レイアウトにテーブルを使用しないでください。ただし、コンテンツがテーブルとして構造化されている場合は、確実にでクリッピングできoverflow: hiddenます。 jsfiddle.net/dave2/a5jbpc85
— Dave
3

私は上記の解決策を左の液体と右の固定に試してみましたが、どれもうまくいきませんでした（質問は逆のことですが、これは妥当だと思います）。これがうまくいったことです：

.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>
— ドミニク
ソース
3

私は同様の問題があり、私はここで解決策を見つけました：https : //stackoverflow.com/a/16909141/3934886

解決策は、固定された中央のdivと液体のサイドカラム用です。

.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

左の列を固定したい場合は、それに応じて式を変更します。

— alex351
ソース
IE8のような部分的にしかIE9（上の一部の古いブラウザでは使用できませんcaniuse.com/#feat=calc）
— ランディ
2

グリッドCSSプロパティを使用できます。これは、ボックスを構成する最も明確でクリーンで直感的な方法です。 

#container{
    display: grid;
    grid-template-columns: 100px auto;
    color:white;
}
#fixed{
  background: red;
  grid-column: 1;
}
#remaining{
  background: green;
  grid-column: 2;
}
<div id="container">
  <div id="fixed">Fixed</div>
  <div id="remaining">Remaining</div>
</div>
スニペットを展開

— コルシ
ソース
1

私は誰も使用しないことを不思議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の例

— ブクシー
ソース
0

/ * * 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>
— user1700099
ソース
0

これには非常に簡単な解決策があります！// HTML

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

// CSS

#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}

リンク：http : //jsfiddle.net/MHeqG/

— iamatsundere181
ソース
0

私は同様の問題があり、うまくいった次のことを思いつきました

CSS：

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML：

<div class=top>top </div>
<div>
    <div class="left">left </div>
    <div class="right">
        <div class="content">right </div>
    </div>
</div>

このメソッドは、ウィンドウが縮小されても折り返されませんが、「コンテンツ」領域を自動的に拡張します。サイトメニューの静的な幅を維持します（左）。

また、自動エキスパンドコンテンツボックスと左側の垂直ボックス（サイトメニュー）のデモ：

https://jsfiddle.net/tidan/332a6qte/

— タイダン
ソース
0

右側の位置relative、削除width、floatプロパティを追加してleftから、rightプロパティと0値を追加してみてください。

また、margin left左側の要素の幅に基づいた値（+間にスペースが必要な場合はいくつかのピクセル）でルールを追加できます。その位置を維持するために。

この例は私のために働いています：

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

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }
— アリ
ソース
0 

.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
スニペットを展開

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

— スポルティ
ソース
0

私はこの問題に2日間取り組んできましたが、レスポンシブな固定幅を左にして、左側を折り返さずに右側を画面の残りの部分に埋め込もうとするあなたと他の人のために機能する解決策があります。私が想定しているのは、ブラウザだけでなくモバイルデバイスでもページを応答可能にすることです。

ここにコードがあります

// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps.  Without this delay the right div may go off screen when browser is refreshed 
setTimeout(function(){
    fixRightSideWidth();
    $('.right_content_container').show(600);
}, 50);

// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
    fixRightSideWidth();
});

function fixRightSideWidth(){
    $blockWrap = 300; // Point at which you allow the right div to drop below the top div
    $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
    if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
        $('.right_content_container').width( $normalRightResize );
        $('.right_content_container').css("padding-left","0px");
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    
    }
    else{
        if( $('.right_content_container').width() > 300 ){
            $('.right_content_container').width(300);
        }
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    }
    if( $thePageRefreshed == true ){
        $thePageRefreshed = false;
    }
}
/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
    min-width: 310px;
    background: #333;
    min-height:100vh;
}

body{
	background: #333;
	background-color: #333;
	color: white;
    min-height:100vh;
}

.top_title{
  background-color: blue;
  text-align: center;
}

.bottom_content{
	border: 0px;
	height: 100%;
}

.left_right_container * {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #333 !important;
    background-color: #333 !important;
    display:inline-block;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    border-radius: 0;
    box-sizing: content-box;
    transition: none;
}

.left_navigator_item{
	display:inline-block;
	margin-right: 5px;
	margin-bottom: 0px !important;
	width: 100%;
	min-height: 20px !important;
	text-align:center !important;
	margin: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	vertical-align: top;
}

.left_navigator_items {
    float: left;
    width: 150px;
}

.right_content_container{
    float: right;
    overflow: visible!important;
    width:95%; /* width don't matter jqoery overwrites on refresh */
    display:none;
    right:0px;
}

.span_text{
	background: #eee !important;
	background-color: #eee !important;
	color: black !important;
	padding: 5px;
	margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
    <div class="left_right_container">
        <div class="left_navigator_items">
            <div class="left_navigator_item">Dashboard</div>
            <div class="left_navigator_item">Calendar</div>
            <div class="left_navigator_item">Calendar Validator</div>
            <div class="left_navigator_item">Bulletin Board Slide Editor</div>
            <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
            <div class="left_navigator_item">TV Guide</div>
        </div>
        <div class="right_content_container">
            <div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.

Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.

Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.

Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.

In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
        </div>
    </div>
</div>
スニペットを展開

これは、私と同じようにあなたのために働くかもしれない私のフィドルです。 https://jsfiddle.net/Larry_Robertson/62LLjapm/

— ラリー・ロバートソン
ソース
0

アイテムとコンテナのルール。

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

空白を使用：nowrap; 非破壊のための最後の項目のテキスト。

アイテムX％| アイテムY％| アイテムZ％

全長=常に100％！

もし

Item X=50%
Item Y=10%
Item z=20%

その後

アイテムX = 70％

アイテムXが支配的（テーブルCSSレイアウトでは最初のアイテムが支配的）！

max-contentを試してください。コンテナー内のdivを展開するための内部のdivのプロパティ：

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}

— ドミトロ・ユルチェンコ
ソース
0

最も簡単な解決策は、マージンを使用することです。これも応答します！

<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>
— ホビー823
ソース
0

最も簡単な解決策は、左側のdivの幅を100％にすることです。つまり、右側のdivの幅にマージンを加えます。 

<div class="cont">
  <div class="search">
    Big Logo Text
  </div>
  <nav>
    <ul class="navbar">
      <li><a href="#1">NavLink1</a></li>
      <li><a href="#2">NavLink2</a></li>
      <li><a href="#3">NavLink3</a></li>
      <li><a href="#4">NavLink4</a></li>
      <li><a href="#5">NavLink5</a></li>
    </ul>
  </nav>
</div>

.cont{
  display: inline-grid;
  grid-template-columns: 160px 10px calc(100% - 170px);
  grid-template-rows: auto;
  grid-template-areas: "search .  navigation";
  width: 100%;
  height: auto;
  text-align: center;
}

.search {
  grid-area: search;
  height: 90px;
  background-color: #00FF00;
  line-height: 80px;
  font-size: 1.4rem;
  font-weight: 600;
}
nav {
  grid-area: navigation;
  height: 90px;
  background-color: #A53030;
}

.navbar{
  display: flex;
  height: 30px;
  width: 100%;
  padding: 0%;
  list-style-type: none;
  flex-flow: row wrap;
  flex: 0 1 auto;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
}

.navbar a{
    outline: 0;
    text-decoration: none;
}

https://codepen.io/tamjk/pen/dybqKBN

— トランク
ソース
-2

私はいくつかの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>
— J.ピーターソン
ソース
9
表形式のデータ以外のフォーマットにテーブルを使用することは決してありません。これまで。
— mmmeff 2013年
1
テーブルの問題は、表示しようとしているものが表形式のデータではない場合、マークアップが誤解を招く可能性があることです。あなたが意味を持ったマークアップの原則を無視することを選択した場合、あなたにもバックに得ることができる<font>、<b>などのHTMLは、プレゼンテーションにはあまり焦点を当て、過去に進化。
— Vilinkameni 2014年
4
誰もがなぜテーブルを狂わせるのかわからない。時々それらは有用です。
— Jandieg 2015
テーブルの高さは固定できません。コンテンツが大きくなると、テーブルも大きくなります。そして、それは名誉ではありませんoverflow。
— kbro
@Jandieg：説明については、Mihai Frentiuの回答を参照してください。CSSの主な目的は、コンテンツを外観から分離することです。display:table非表形式データの望ましい外観を実現するようなプロパティを使用することはクリーンです。ページ列やフォームコントロールなどの非表形式のデータをHTMLテーブルに強制的に配置してレイアウトを制御するのは不正確です。
— Dave
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.