css - web-app のディメンションのパーセンテージについて混乱しています

Question

ユーザーがウィンドウのサイズを変更すると、それに応じてフィールドが縮小および拡大する必要があります。最初は簡単だと思いましたよね？しかし今、私は実際に寸法について頭を悩ませています。余白が正しくないように思われるためです...すべての個々のフィールドの間に境界線のようなセパレーターが必要です...

私のコードはこれです：

<div style='background-color:#000000;width:100%;height:100%;'>

    <div style='width:100%;height:66%;margin-bottom:1%;'>

        <div style='float:left; width:19%;height:100%;margin-right:1%;' class='app_14_concept_block'>keypartners</div>
        <div style='float:left; width:19%;height:100%;margin-right:1%;'>

            <div style='height:49%;margin-bottom:6%' class='app_14_concept_block'>key activities</div>

            <div style='height:49%;' class='app_14_concept_block'>key resources</div>

        </div>
        <div style='float:left; width:19%; height:100%;margin-right:1%;' class='app_14_concept_block'>value propositions</div>
        <div style='float:left; width:19%; height:100%;margin-right:1%;'>

            <div style='height:49%;margin-bottom:6%'  class='app_14_concept_block'>customer relationship</div>

            <div style='height:49%;' class='app_14_concept_block'>channels</div>

        </div>
        <div style='float:left; width:19%; height:100%;padding-right:1%' class='app_14_concept_block'>customer segments</div>
    </div>
    <div style='width:100%;height:33%;'>
        <div style='float:left; width:49%; height:100%;margin-right:1%;' class='app_14_concept_block'>cost</div>
        <div style='float:left; width:50%; height:100%;' class='app_14_concept_block'>revenue</div>
    </div>

</div>

CSSはこれです：

.app_14_concept_block{
  background-color:#ffffff;
}
.app_14_concept_block:hover{
background-color:#eeeeee;
}

これが現時点での外観です（青いものは、コメントを開くアプリビューアレイアウトの一部です）-私の主な関心事は、右側の行の最後に追加された空の（黒い）スペースです：

jsfiddle はこちら: http://jsfiddle.net/gbMZy/51/

また、「顧客セグメント」の幅を 20% に設定しようとしましたが、残念ながら役に立ちませんでした:

スクリーンショット:

jsfiddle: http://jsfiddle.net/gbMZy/52/

Answer 1

たぶん、このソリューションFooter Items Expanding with Viewport Evenlyもあなたのケースでうまくいくかもしれません。

パーセンテージ幅は、ボーダーやマージンと一緒にうまく機能しません。考えられる回避策は、20% / 50% 幅のラッパー コンテナーを使用し、その中に境界線などを持つ要素を配置することです。これにより、ちらつきやランダムな間隔を避けることができます。

したがって、あなたの場合、これは次のようになります: http://jsfiddle.net/qC4JV/1/

HTML:

<div class="top">
    <div class="cell">
        <div class="border right"></div>
        <div class="border bottom"></div>
        <p>value</p> 
    </div>
    <div class="cell">
        <div class="border right"></div>
        <div class="border bottom"></div>
        <p>value</p>          
    </div>
    <div class="cell">
        <div class="border right"></div>
        <div class="border bottom"></div>
        <p>value</p>           
    </div>
    <div class="cell">
        <div class="border right"></div>
        <div class="border bottom"></div>
        <p>value</p>          
    </div>
    <div class="cell">
        <div class="border bottom"></div>
        <p>value</p>           
    </div>
</div>

<div class="bottom">
    <div class="cell">
        <div class="border right"></div>
        <p>value</p>          
    </div>
    <div class="cell">
        <p>value</p>         
    </div>
</div>​

CSS:

body, html{
    height: 100%;
    background: #000;
}

.top{
    height: 60%;
}

.bottom{
    height: 40%;
}

.cell{
    float: left;
    height: 100%;
    background: #fff;
    position: relative;
}

.cell .border.right{
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 100%;
  background: #000;
}

.cell .border.bottom{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  background: #000;
}

.top .cell{
  width: 20%;
}

.bottom .cell{
  width: 50%;
}

</p>

Answer 2

この方法でパーセンテージを使用する場合、ブラウザが値を丸めて個別のピクセル値を取得する方法では、多くの場合、余りが生じます。ビューポートの全幅の1％が正確なピクセル数でない場合、ブラウザは切り上げまたは切り下げを行い、数ピクセルが多すぎたり少なすぎたりするため、divが不安定になり、マージンが不均等になります。

非常によく開発されたシステムであるTwitterのBootstrapフレームワークでさえ、その流体グリッドシステムを使用するときに同じ問題に悩まされます。

言いたくないのですが、どうしてもこのようなレイアウトを作成する必要があり、信頼性の低い要素の寸法が受け入れられない場合は、テーブルを使用するのがよいでしょう。

一方、黒ではなく白の「境界線」を使用すると、マージンのジッター感が目立たなくなります。

Answer 3

あなたのHTMLは読むのが苦痛です。すべてをそのようにインラインで記述するのではなく、実際にスタイルをCSSに分離する必要があります。読み取り/デバッグが難しく、間違いを犯しやすくなります。

これが少し良い解決策です：http：//jsfiddle.net/gbMZy/51/

Answer 4

パーセンテージは常にブラウザー上で四捨五入された値で計算され、本体または親要素のラップ領域/幅の合計幅に従って正当化されます。これらの寸法は、サブ要素またはパディング スタイルに指定された内側と外側のピクセル幅、および指定されたピクセル サイズの要素に指定された境界線を計算した後に割り当てられます。

HTML:

<div class="top">
  <div class="cell">
    <div class="border right">
    </div>
    <div class="border bottom">
    </div>
    <p>
      Top Block-1
    </p>
  </div>
  <div class="cell">
    <div class="border right">
    </div>
    <div class="border bottom">
    </div>
    <p>
      Top Block-2
    </p>

  </div>
  <div class="cell">
    <div class="border right">
    </div>
    <div class="border bottom">
    </div>
    <p>
      Top Block-1
    </p>

  </div>
  <div class="cell">
    <div class="border right">
    </div>
    <div class="border bottom">
    </div>
    <p>
      Top Block-3
    </p>

  </div>
  <div class="cell">
    <div class="border bottom">
    </div>
    <p>
      Top Block-4
    </p>

  </div>
</div>

<div class="bottom">
  <div class="cell">
    <div class="border right">
    </div>
    <p>
      Bottom Block-1
    </p>

  </div>
  <div class="cell">
    <p>
      Bottom Block-2
    </p>

  </div>
</div>

CSS スタイル:

body, html{
  height: 100%;
  background: #3355A9;
}

.top{
  height: 60%;
}

.bottom{
  height: 40%;
}

.cell{
  float: left;
  height: 100%;
  background: #ffca77;
  position: relative;
  text-align:center;
  font-weight:bold;
}
.cell p{
  padding:10px;
}

.cell .border.right{
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 100%;
  background: #3355A9;
}

.cell .border.bottom{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  background: #3355A9;
}

.top .cell{
  width: 20%;
}

.bottom .cell{
  width: 50%;
}

コードビンでこのソリューションを試してください: http://codebins.com/codes/home/4ldqpbt

そのため、より優れたユーザー インターフェイスと、必要な正確な結果を表示するための明確なビジョンを備えているため、より優れたソリューションが見つかる可能性があります。

Answer 5

最初の div で font-size を明示的に設定してから、「em」を使用して行の余白を調整します。

しかし、スケーラビリティの問題があるかどうかはわかりません..