web-dev-qa-db-ja.com

HTML、ボディの高さ100％が機能しない

さて、私はCordovaおよびAngularJSのモバイルアプリケーションを持っています。スタイリングにはLessおよびBootstrapを使用します。

問題

モバイルアプリで、パーセンテージ（％）を使用してdivのサイズを変更しようとしました。しかし、これはうまくいかないようです。次の動作を変更できないようです：The divs are as big as the content inside of them。この問題は非常に簡単に聞こえますが、私はここ（stackoverflow）とWebで多くのオプションを試しました。それでも私はそれを修正する解決策を見つけていません、そしてそれは非常に迷惑になっています。

試してみました

html, body { height: 100% }、

html, body, #canvas { height: 100%}を追加しています

#canvas { min-height: 100% }を追加しています

html { height: 100% } body { min-height: 100% }を追加しています

そして、他の多くのバリエーション。 pxを使用しても機能しますが、モバイルデバイスのサイズがわからないので、それほど便利ではありません。（bootstrapといくつかのメディアクエリを使用してスタイルを設定します）。

例

Divに要素を追加すると、次の動作が発生します。

HTML

その空白の空白を削除したいのですが、％の代わりにpxを使用した場合にのみ達成できます。

少ない例：

html, body {
    background: transparent;
    height: 100%;
    margin: 0;
    padding: 0;    
}

#canvas {
    min-height: 100%;
}

body {
    -webkit-touch-callout: none;                 //prevent callout to copy image, etc when tap to hold 
    -webkit-text-size-adjust: none;              //prevent webkit from resizing text to fit 
    -webkit-user-select: node;                   //prevent copy paste, to allow, change 'none' to 'text'  
    min-height: 100%;
    margin: 0;
    padding: 0; 
    background-color: @cgiColor;  
}

.header {
    top: 0px;
    width: 100%;
    height: 5%;
    background: @companyColor;
    color: @textColor;
}

.incidentContainer {
    background: @appBodyColor;
    width: 100%;
    height: 70%;
}

.footer {
    position: absolute;
    color: @textColor;
    bottom: 0px;
    height: 15%;
    width: 100%;    
    background: @companyColor;
}

追加情報

私はAngularJSを使用しているので、私のアプリケーションは単一ページのアプリケーションです。私のindex.htmlは次のようになります。

<body oncontextmenu="return false" >  
   <div class="{{ pageClass}}"  ng-view ></div>        
   <script type="text/javascript" src="cordova.js"></script>
   <script data-main="main" src="lib/require.js"></script>
</body>

もちろん、CSSシートへの標準リンクなども含まれています。他のすべてのページは「ng-view」に含まれており、タグやタグはありません。これは含まれているためです。

ソリューション

解決策は、次のCSSルールを追加することでした。

div[ng-view]{
     height: 100%;
}

すべてのdiv（htmlとbodyを除く）がこのアイテムの子であるため、これは機能しました。 100％を追加すると、divスペースが画面の100％まで広がるため、パーセンテージが機能するためのスペースが提供されます。

クレジットはこの回答のためにジェイに行きます！

htmlcssangularjscordovatwitter-bootstrap-3
17
Mr.wiseguy

私には、ディレクティブng-viewはアプリケーションの親であり、header, content, footerはこのdivにロードされます。 header divが正しい場所にあるので、フッターも完全に配置されているため、正しく配置されます。

ただし、コンテンツ領域の場合は、ng-view div。

それを作ることをお勧めします100% 高さ。何かのようなもの：

div[ng-view]{
     height: 100%;
}
2
Jai

次のCSSを追加して重要な属性を設定しようとしましたか

html, body { height: 100% !important }
5
Salah Nour ElDin

これは、CSSでは100％が相対値であるためです。

幅の場合、デフォルトの100％は画面の幅、または見ているものです。

ただし、高さは画面の高さを100％とはしません。確かな価値が必要です。

変わったら

html, body {
    background: transparent;
    height: 100%;
    margin: 0;
    padding: 0;    
}

と

html, body {
    background: transparent;
    height: 100vh;
    margin: 0;
    padding: 0;    
}

うまくいくはずです。

100vhは、htmlの高さをビューポートの高さに設定する必要があります。

私はこの方法がうまくいくと思いますが、私自身は自分のページを画面の100％の高さにするために何かを使用したことはないと言います。

2
Jelmergu

レンダリングされたHTML！

class="incident"は必要なだけ拡大されます。あなたの修正は、that要素の高さを70％にすることであると考えています（ページ全体に対して相対的であるため）、その後、inidentContainerは高さは100％です。

高さのパーセンテージは、ルートではなく親要素を基準にしているため、フレームワークによってステルスに追加されたコンテナーであっても、コンテナーに十分注意する必要があります。

また、それが役立つ場合、Jelmerguはvhユニットタイプを提案しました。これはユースケースに適合します-1つの「ビューポートの高さ」は「ブラウザのコンテンツ領域の1％」に相当します。したがって、100vhは画面全体を占有します。これは深いレベルの子供たちにも当てはまります。

0
Katana314