web-dev-qa-db-ja.com

分割幅100％ - 固定ピクセル数

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

Structure 1

中央の領域のサイズは変化しますが、正確なピクセル値があり、全体の構造はそれらの値に従って拡大縮小されます。それを簡単にするために、私は "100％ - n px"の幅を上下中央のdivに設定する方法が必要です。

私はきれいなクロスブラウザソリューションをいただければ幸いですが、それが不可能な場合はCSSハックで解決します。

これがおまけです。私が苦労していて、テーブルやJavaScriptを使用することになっているもう一つの構造。少し異なりますが、新しい問題が発生します。私は主にjQueryベースのウィンドウシステムでそれを使用してきましたが、私はレイアウトをスクリプトの外に保ち、1つの要素（中央のもの）のサイズだけを制御したいと思います。

Structure 2

htmlcssheightwidth
294
Removed_account

入れ子になった要素とパディングを使用して、ツールバーの左右のエッジを取得できます。 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;
}
74
Guffa

私が遭遇したばかりの新しい方法： css calc() ：

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

出典：CSS幅100％マイナス100px

704
rom_j

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

楽しい！

6
Unislash

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>
4
Manoj Kumar

たぶん、私は馬鹿げていますが、ここの表は明らかな解決策ではありませんか？

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

私がクロムで考え出したもう一つの方法はもっと簡単です、しかし、人はそれがハックです！

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

Table-cellsがそうであるように、これだけで行の残りを水平に塗りつぶすはずです。ただし、幅をパーセント値に設定しても修正されるため、親の100％を超えてしまうという奇妙な問題がいくつかあります。

3
Jack Franzen

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

余分な要素なしでそれをしなければならない場合（例えば、あなたがページマークアップの制御を持っていないとき）、あなたは box-sizing を使うことができます。スクリプトに頼るよりも、たぶんもっと楽しい。

3
bobince

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

1
dfasdljkhfaskldjhfasklhf

フレックスボックスを使って非常に簡単にこれを達成することができます。

Header、MiddleContainer、Footerのように3つの要素があるとします。そして、HeaderとFooterに一定の高さを与えたいと思います。それから我々はこのように書くことができます：

React/RN（デフォルトはflexとして 'display'、columnとして 'flexDirection'です）の場合、web cssでbodyコンテナまたはdisplayとしてこれらを含むコンテナを指定する必要があります。以下のように：

    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,
    }
1
jayiitb

私は私が私が私がスクリーンの端に左に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まで繰り返すように指定しています。

1
Mike Carey

状況によっては、余白設定を活用して「100％幅 - Nピクセル」を効果的に指定できます。 この質問 に対する一般的な回答をご覧ください。

0
chaos