高さのパーセンテージ HTML 5/CSS

StackOverflow https://stackoverflow.com/questions/1622027

  •  06-07-2019
  •  | 
  •  

質問

を設定しようとしています <div> CSS で特定のパーセンテージの高さに調整されますが、その内部のコンテンツと同じサイズのままです。HTML5を削除すると <!DOCTYTPE html> ただし、それは機能します。 <div> 必要に応じてページ全体を占めます。ページを検証したいのですが、どうすればよいですか?

このCSSは <div>, 、ID は page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}
役に立ちましたか？

解決

CSSでdivを特定のパーセンテージの高さに設定しようとしています

何の割合ですか？

高さのパーセンテージを設定するには、その親要素 (*) に明示的な高さが必要です。高さを次のとおりにしておくと、これはかなり自明のことです。 auto, 、ブロックはそのコンテンツの高さを取得します...しかし、コンテンツ自体に親のパーセンテージで表された高さがある場合、あなたは自分自身を少しキャッチ 22 にしたことになります。ブラウザはあきらめて、コンテンツの高さをそのまま使用します。

したがって、div の親には明示的な height 財産。必要に応じてその高さをパーセンテージにすることもできますが、それは問題を次のレベルに上げるだけです。

div の高さをビューポートの高さのパーセンテージにしたい場合は、div のすべての祖先を含めます。 <html> そして <body>, 、 持たなければならない height: 100%, したがって、div までの明示的なパーセンテージの高さのチェーンが存在します。

(*:または、div が配置されている場合は、同様に配置される最も近い祖先である「包含ブロック」。)

あるいは、すべての最新のブラウザーと IE 9 以降では、ビューポートの高さを基準とした新しい CSS 単位がサポートされています (vh) とビューポートの幅 (vw):

div {
    height:100vh; 
}

ここを参照してください より詳しい情報.

他のヒント

<html>要素と<body>要素にも高さを設定する必要があります。それ以外の場合は、コンテンツに合わせて十分な大きさになります。 例：

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

bobinceの答えは、どの場合に<！> quot; height：XX％; <！> quot;動作する、または動作しない。

設定された比率（高さ：独自の幅の％）で要素を作成する場合、それを行う最良の方法は、padding-bottomを使用して効果的に高さを設定することです。正方形の例：

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

正方形のコンテナはパディングで作成され、コンテンツはコンテナ全体に拡大されます。このテーマに関する2009年の長い記事： http://alistapart.com/article/creating-intrinsic-ratios- for-video

100vw / 100vhを使用できます。 CSS3は、ビューポート相対ユニットを提供します。 100vwは、ビューポート幅の100％を意味します。 100vh;高さの100％。 

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>

コンテンツ全体が画面の高さよりも小さい場合など、divの高さを条件付きで設定したい場合があります。すべての親要素を100％に設定すると、コンテンツが画面サイズより長い場合にコンテンツが切り捨てられます。

したがって、これを回避する方法は、最小高さを設定することです：

親要素による高さの自動調整を続行します 次に、メインdivで、ヘッダーとフッターdivのピクセルサイズを100vh（ビューポート単位）から減算します。 cssでは、次のようなものです。

最小高さ：calc（100vh-246px）;

100vhは、画面の全長から周囲のdivを引いたものです。 高さではなくmin-heightを設定すると、画面よりも長いコンテンツが途切れずに流れ続けます。

  

こんにちは！   percentage（％）を使用するには、その親要素の％を定義する必要があります。 body {height：100％} を使用すると、親に高さの割合がないため機能しません。その場合、身長を機能させるには、これを html {height：100％}

に追加する必要があります

他の場合、定義可能な親の割合を取り除くために使用できます

body {height：100vh}

vh は、ビューポートの高さ

を表します

役立つと思います

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top