web-dev-qa-db-ja.com

CSS：パーセンテージからピクセルを引いた幅/高さの設定

私は自分のサイトでより一貫性を保ち、乱雑さを少なくするために、再利用可能なCSSクラスをいくつか作成しようとしています。そして、頻繁に使用するものを標準化しようとしています。

高さを設定したくないコンテナ<div>があります（それはサイトのどこにあるかによって変わるので）、そしてその中にはヘッダ<div>、そして 順不同のリスト 、それらすべてにCSSが適用されています。

これはとてもよく似ています。

Widget

私は 順不同リスト がコンテナ<div>の残りのスペースを占めて欲しいのですが、ヘッダ<div>の高さは18pxです。リストの高さを「100%から18pxを引いた結果」と指定する方法がわかりません。

私はこの質問がSOに関する他のいくつかの文脈で尋ねられるのを見ました、しかし、私はそれが私の特定の事件についてもう一度尋ねる価値があると思いました。この状況で何かアドバイスはありますか？

cssheightpixel
429
MegaMatt

私はこれが古い投稿であることを認識していますが、CSS3準拠のブラウザ用に書いているなら、calcを使うことができることを言及する価値があることを示唆していません。

height: calc(100% - 18px);

すべてのブラウザが現在標準のCSS3 calc（）関数をサポートしているわけではないので、次のようにブラウザ固有のバージョンの関数を実装する必要があるかもしれません。

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);
805
Levi Botelho

ちょっと違うアプローチのために、あなたはリストの上でこのような何かを使うことができます：

position: absolute;
top: 18px;
bottom: 0px;
width: 100%;

これは親コンテナがposition: relative;を持っている限り有効です。

68
Nicolas Galler

これにはJqueryを使用します

function setSizes() {
   var containerHeight = $("#listContainer").height();
   $("#myList").height(containerHeight - 18);
}

それから私はブラウザのウィンドウがリサイズされるときはいつでもそれを再計算するためにウィンドウのリサイズをバインドします（コンテナのサイズがウィンドウのリサイズで変わった場合）

$(window).resize(function() { setSizes(); });
24
puffpio

高さをパーセントで定義するのではなく、次のようにtop=0とbottom=0を設定するだけです。

#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}
15
kaleazy

17pxヘッダの高さを推定

リストcss：

height: 100%;
padding-top: 17px;

ヘッダーCSS：

height: 17px;
float: left;
width: 100%;
8
ghoppe
  1. マイナスピクセルを差し引く要素に負の余白を使用します。 （希望の要素）
  2. 包含エレメントにoverflow:hidden;を作成する
  3. 目的の要素でoverflow:auto;に切り替えます。

それは私のために働いた！

7
desbest

ボックスサイズを試してください。リストの場合：

height: 100%;
/* Presuming 10px header height */
padding-top: 10px;
/* Firefox */
-moz-box-sizing: border-box;
/* WebKit */
-webkit-box-sizing: border-box;
/* Standard */
box-sizing: border-box;

ヘッダの場合：

position: absolute;
left: 0;
top: 0;
height: 10px;

もちろん、親コンテナは次のようになります。

position: relative;
5
Light

私は他の答えのいくつかを試してみました、そして、それらのどれも私が彼らに望んだようには全くうまくいきませんでした。ウィンドウヘッダーがあり、ウィンドウ本体内の画像でウィンドウのサイズを変更できる場合も、状況はよく似ていました。固定サイズのヘッダーを考慮して計算を追加しなくても、サイズ変更の縦横比を固定し、それでも画像がウィンドウ本体を埋めるようにしたいと思いました。

以下に、私たちの状況ではうまくいくようで、ほとんどのブラウザで互換性があるように見えるようになったことを示す非常に単純なスニペットを作成しました。

Window要素には、画面上の他の要素との相対位置には寄与しますが、ウィンドウの「サイズ」には寄与しない20pxのマージンを追加しました。次に、ウィンドウヘッダーは絶対に配置され（他の要素のフローから削除されるので、順序なしリストのような他の要素は移動されません）、その上部はヘッダーをマージンの内側に配置する-20pxになりますウィンドウの最後に、ul要素がウィンドウに追加され、高さを100％に設定できます。これにより、ウィンドウの本体が埋められます（マージンを除く）。

*,*:before,*:after
{
  box-sizing: border-box;
}

.window
{
  position: relative;
  top: 20px;
  left: 50px;
  margin-top: 20px;
  width: 150px;
  height: 150px;
}

.window-header
{
  position: absolute;
  top: -20px;
  height: 20px;
  border: 2px solid black;
  width: 100%;
}

ul
{
  border: 5px dashed gray;
  height: 100%;
}
<div class="window">
  <div class="window-header">Hey this is a header</div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>
2
TJ Rockefeller

おかげで、私はあなたの助けを借りて私は私が解決した、私はそれを少し微調整し、div 100％width 100％heigth（一番下のバーの高さを減らし）そして（スクロールバーを隠したり隠したりせずに）身体にスクロールしたくないので。

CSSの場合：

 html{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 body{
  position:relative;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 div.adjusted{
  position:absolute;width:auto;height:auto;left:0px;right:0px;top:0px;bottom:36px;margin:0px;border:0px;padding:0px;
 }
 div.the_bottom_bar{
  width:100%;height:31px;margin:0px;border:0px;padding:0px;
}

HTMLの場合：

<body>
<div class="adjusted">
 // My elements that go on dynamic size area
 <div class="the_bottom_bar">
  // My elements that goes on bottom bar (fixed heigh of 31 pixels)
 </div>  
</div>

それはトリックをした、ああそう私は一番下のバーの高さよりも一番下のためにdiv.adjustedに少し大きい値を置く、そうでなければ垂直スクロールバーが表示され、私は最も近い値になるように調整。

その違いは、動的領域の要素の1つに、削除する方法がわからない余分なボトムホールが追加されているためです。これはビデオタグ（HTML5）です。それでそれが底の穴をあける理由がありません、しかしそれはします）：

 video{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

目的：ブラウザのサイズを変更してもアスペクト比は変更されずに100％の明るさの動画を取得し、テキストやボタンなどを含むdivに使用するボトムスペース（およびバリデータ）を減らすもちろんW3C＆CSS。

編集：私は理由を見つけた、ビデオタグはテキストではなく、ブロック要素であるので、私はこのCSSでそれを修正しました：

 video{
  display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

Videoタグのdisplay:block;に注目してください。

1
Claudio

同じ目標を達成する別の方法： フレックスボックス 。コンテナをコラムフレックスボックスにすれば、いくつかの要素を固定サイズ（デフォルトの振る舞い）にしたり、コンテナスペースに合わせて拡大/縮小することができるようになります（flex-grow：1とflex-で）。縮小：1）。

#wrap {        
  display:flex;
  flex-direction:column;
}
.extendOrShrink {
  flex-shrink:1;
  flex-grow:1;
  overflow:auto;
}

https://jsfiddle.net/2Lmodwxk/ を参照してください（効果を確認するためにウィンドウを拡大または縮小してみてください）。

注：速記プロパティを使用することもできます。

   flex:1 1 auto;
1
tarulen

これがあなたの特定の状況でうまくいくかどうかはわかりませんが、divを含むサイズが固定サイズの場合、divの内側のパディングがdivの内側にコンテンツをプッシュすることがわかりました。あなたはあなたのヘッダー要素をフロートさせるか絶対位置に配置しなければならないでしょうが、そうでなければ、可変サイズのdivに対してこれを試していません。

0
dclowd9901