Div幅100％-固定ピクセル数

テーブルやJavaScriptを使用せずに次の構造を実現するにはどうすればよいですか？白い境界線はdivの端を表しており、質問には関係ありません。

中央の領域のサイズは変化しますが、正確なピクセル値があり、構造全体がそれらの値に従ってスケーリングされます。単純化するために、「中央の100％-n px」の幅を上部中央と下部中央のdivに設定する方法が必要です。

クリーンなクロスブラウザソリューションに感謝しますが、それが不可能な場合は、CSSハックで対応できます。

ここにボーナスがあります。私が苦労して、テーブルまたはJavaScriptを使用してしまう別の構造。少し異なりますが、新しい問題が発生します。主にjQueryベースのウィンドウシステムで使用していますが、レイアウトをスクリプトに含めず、1つの要素（中央の要素）のサイズのみを制御したいと考えています。

ネストされた要素とパディングを使用して、ツールバーの左端と右端を取得できます。div要素のデフォルトの幅はですauto。つまり、使用可能な幅が使用されます。次に、要素にパディングを追加できますが、要素は利用可能な幅内に維持されます。

これは、画像を左右の丸い角として配置するために使用できる例と、それらの間で繰り返される中央の画像です。

HTML：

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

CSS：

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}

私が偶然見つけた新しい方法：csscalc()：

.calculated-width {
    width: -webkit-calc(100% - 100px);
    width:    -moz-calc(100% - 100px);
    width:         calc(100% - 100px);
}​

ソース：CSS幅100％-100px

Guffaの答えは多くの状況で機能しますが、場合によっては、左および/または右のパディングを中央のdivの親にしたくないことがあります。これらの場合、中央でブロック書式設定コンテキストを使用して、パディングdivを左右にフロートさせることができます。これがコードです

HTML：

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

CSS：

.container {
    width: 100px;
    height: 20px;
}

.left, .right {
    width: 20px;
    height: 100%;
    float: left;
    background: black;   
}

.right {
    float: right;
}

.center {
    overflow: auto;
    height: 100%;
    background: blue;
}

ネストされたネストされたdivと比較した場合、この要素の階層はより自然であり、ページの内容をよりよく表すと思います。このため、ボーダー、パディング、マージンは通常すべての要素に適用できます（つまり、この「自然さ」はスタイルを超えており、影響があります）。

これは、「デフォルトで幅の100％塗りつぶす」プロパティを共有するdivおよびその他の要素でのみ機能することに注意してください。入力、テーブル、およびその他の可能性のあるものは、コンテナーdivでそれらをラップし、この品質を復元するためにもう少しcssを追加する必要があります。そのような状況になるほど運が悪い場合は、私に連絡してください。CSSを詳しく調べます。

ここにjsfiddle：jsfiddle.net/RgdeQ

楽しい！

Flexboxレイアウトを利用できます。それぞれにflex: 1動的な幅または高さを必要とする要素を設定する必要がありflex-direction: row and columnます。

動的な幅：

HTML

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-width {
  width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
  flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}

出力：

.container {
  display: flex;
  width: 100%;
  color: #fff;
  font-family: Roboto;
}
.fixed-width {
  background: #9BCB3C;
  width: 200px; /* Fixed width */
  text-align: center;
}
.flexible-width {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
}

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>

</div>

動的な高さ：

HTML

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-height {
  height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
  flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}

出力：

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: #fff;
  font-family: Roboto;
}
.fixed-height {
  background: #9BCB3C;
  height: 50px; /* Fixed height or flex-basis: 100px */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flexible-height {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>

</div>

これを行う通常の方法は、Guffa、ネストされた要素で概説されているとおりです。これに必要なフックを取得するために追加のマークアップを追加する必要があるのは少し悲しいですが、実際には、ここにラッパーdivがあれば、だれにも害を及ぼすことはありません。

余分な要素なしで実行する必要がある場合（たとえば、ページマークアップを制御できない場合）は、かなり適切ですが完全または単純なブラウザーサポートではないbox-sizingを使用できます。ただし、スクリプトに依存する必要があるよりも楽しいかもしれません。

多分私は馬鹿げているかもしれませんが、ここでは明白な解決策を表にしていますか？

<div class="parent">
    <div class="fixed">
    <div class="stretchToFit">
</div>

.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}

私がクロームで理解したもう1つの方法はもっと簡単ですが、人間はそれがハックです！

.fixed{ 
   float: left
}
.stretchToFit{
   display: table-cell;
   width: 1%;
}

テーブルセルと同様に、これだけで残りの行を水平方向に埋めることができます。ただし、親の100％を超えると、奇妙な問題が発生します。幅をパーセント値に設定すると修正されます。

フレックスボックスを使用してこれを非常に簡単に実現できます。

Header、MiddleContainer、Footerのような3つの要素がある場合。そして、ヘッダーとフッターに一定の高さを与えたいと思います。次に、このように書くことができます：

React / RN（デフォルトはflexとしての「display」およびcolumnとしての「flexDirection」）の場合、Web CSSでは、これらを含むボディコンテナーまたはコンテナーをdisplay： 'flex'、flex-direction： 'column'として指定する必要があります。以下のように：

    container-containing-these-elements: {
     display: flex,
     flex-direction: column
    }
    header: {
     height: 40,
    },
    middle-container: {
     flex: 1, // this will take the rest of the space available.
    },
    footer: {
     height: 100,
    }

ラッピングdivが100％で、ピクセル量にパディングを使用した場合、パディング＃を動的にする必要がある場合、イベントが発生したときにjQueryを使用してパディング量を簡単に変更できます。

同様の問題があり、画面の上部に、左側に1つの画像があり、画面の端に向かって右側に画像が繰り返し表示されるバナーが必要でした。私はそれを次のように解決することになりました：

CSS：

.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}

.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}

キーは正しいタグでした。基本的に、左から131pxで右から0pxまで繰り返すように指定しています。

一部のコンテキストでは、マージン設定を利用して、「幅100％-Nピクセル」を効果的に指定できます。この質問に対する承認済みの回答を参照してください。