残りの水平スペースをdivで埋める方法は？

https://stackoverflow.com/questions/1032914

06-07-2019
|

質問

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>

解決

これは、目的を達成しているようです。

#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>

他のヒント

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

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

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

スタックスニペット＆amp;のデモ 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の例では、左の列は右の列を保持しています。左の列が終了するとすぐに、右が再びスペース全体を埋め始めます。ここでは、右側の列がページ内でさらに整列し、左側の列が大きな太いマージンを占めています。フローの相互作用は必要ありません。

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

基本的に、2つのdivを表のセルのように動作させる必要があります。したがって、 float：left を使用する代わりに、両方のdivで display：table-cell を使用する必要があり、動的幅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プロパティを指定する必要があります。そうしないと、スペースが埋められません。

これで問題が解決することを願っています。必要に応じて、私のブログ。

これはかなり一般的な質問なので、BFCを使用した素晴らしい解決策を共有したいと思います。
次のこちらのCodepenサンプル。

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

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

最近は、 flexbox メソッドを使用する必要があります（ブラウザのプレフィックスが付いているすべてのブラウザに適合させることができます）。

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

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

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

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

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

@Boushleyの答えは最も近いものでしたが、指摘されていない問題が1つあります。 right 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の両方に正しい幅が与えられます。さらに、テーブルは正しい幅を受け取り、利用可能な残りの幅を埋めます。

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

問題や懸念がある場合は、お気軽にご連絡ください。

ここでは、承認済みの解決策を少し修正して、右の列が左の列の下に落ちないようにします。 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/

[edit]また、3列レイアウトの例を確認します。 http://jsfiddle.net/MHeqG/3148/

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>

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

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

問題はまさにそれです：エキスパンド要素がフロートされていません。展開要素内にネストされたフローティングがある場合、それらは「ネスト」されています。浮動アイテムは実際にはまったくネストされていません。 clear：both; を「入れ子」にした場合;アイテムをフロートすると、最上位のフロートもクリアされます。

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

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

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

.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>

同様の問題があり、ここで解決策を見つけました： 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;
}

固定の左列が必要な場合は、それに応じて式を変更します。

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

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}

グリッド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>

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の例

/ * * 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>

これには非常に簡単な解決策があります！ // 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/

同様の問題があり、次のようにうまくいきました

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/

位置 relative を追加して、右側の width および float プロパティを削除してから、 left を追加し、 0 値を持つ right プロパティ。

また、位置を維持するために、左要素の幅に基づいた値を持つ 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;
    }

.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

これを試してください。うまくいきました。

私はこの問題に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/

html table要素はデフォルトでこれを作成します...テーブル幅を定義すると、列は常にテーブル幅全体に広がります。残りは想像力についてです

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

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

white-space：nowrap; を使用して、非破壊のための最後のアイテムのテキストに使用します。

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

常に全長= 100％！

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

then

アイテムX = 70％

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

max-content; コンテナ内のdivを広げるために内部のdivのプロパティを試してください：

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

}

jqueryUI コントロールをレイアウトしようとして、この同じ問題に遭遇しました。現在、一般的な哲学は「 TABLE 」の代わりに「 DIV を使用する」ことですが、私の場合は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>

cssの新機能。しかし、インラインブロックを使用してこの問題を解決しました。これを確認してください： http://learnlayout.com/inline-block.html

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow