高さがない：divを画面の高さに拡張するために100％は機能しますか

295

カルーセルDIV（s7）を画面全体の高さに拡大します。なぜ成功しないのか、私にはわかりません。ページを表示するには、ここにアクセスできます。

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.holder {
  height: 100%;
  margin: auto;
}
#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}
#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}

<div class="nav">
  <a class="prev2" id="prev2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
  </a>
  <a class="next2" id="next2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
  </a>
</div>

<div class="holder">
  <tr>
    <td>
      <div id="s7">
        {block:Posts}
        <div id="posts">

スニペットを展開

html css height

— アールラーソン
ソース

2

シンプルで明確な説明は次のとおりです。stackoverflow.com

— Michael Benjamin

ウィンドウ全体の高さに伸ばすべきではありませんネストされた要素のために、おそらく最良の解決策 stackoverflow.com/questions/7049875/height-100-not-working/...

— B-ギャング

409

パーセンテージ値が高さで機能するためには、親の高さを決定する必要があります。唯一の例外はルート要素で<html>、高さのパーセンテージにすることができます。。

したがって、を除くすべての要素の高さを指定した<html>ので、次のように追加する必要があります。

html {
    height: 100%;
}

そして、あなたのコードはうまく動くはずです。

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}

<div id=fullheight>
  Lorem Ipsum        
</div>

スニペットを展開

JsFiddleの例。

— マダラの幽霊
ソース

23

[OK]を、このように、私は信じられないほど愚かに見えるようかもしれませんが、何でも：あなたはそれを言うことを意味しています<html>です、実際の要素-同じように<p>か<img />？<html>HTMLドキュメントの最初と最後を定義することだけが目的だと思いました。つまり、レイアウト用ではなく、そこにあると思ったのですが、ブラウザが参照しているドキュメントのタイプをブラウザが知っているだけですか？私は完全に心が吹いています。

— jay_t55 2013年

29

@Joey：HTML は実際の要素です。CSSでスタイルを設定したり、JavaScriptでイベントをフックしたり、クラスとIDを追加したり、DOMに表示したりできます。ブラウザは、<html>タグがなくても、<head>または<body>要素がなくても、HTMLドキュメントを想定します。ただし、HTML仕様では、<html>タグは必須と見なされます。つまり、他のすべてのHTML要素と同様に、本格的な要素です。

— マダラのゴースト

1

@SecondRikudo：いいえ、<html>仕様に従ってタグはオプションです（例：HTML4およびHTML5）。そしてはい、とにかく要素が作成されます。

— Robert Siemer 14

2

うーん...私にとって、これは働いていた唯一の方法は、両方のセットにしたhtmlとbodyなどheight: 100%（特定だけでなく、もちろんdiv、私は100％の高さを継承したい）

— ジェームズ

1

@jamesはい、すべての親は既知の身長を持っている必要があります。

— マダラのゴースト

147

_{誰もこれについて言及していないので。}

現代的なアプローチ：

html/ body要素の両方の高さをに設定する代わりに100%、ビューポートのパーセンテージの長さを使用することもできます。

5.1.2。ビューポートのパーセンテージの長さ：「vw」、「vh」、「vmin」、「vmax」の単位

ビューポートのパーセンテージの長さは、最初の包含ブロックのサイズを基準にしています。最初の包含ブロックの高さまたは幅が変更されると、それに応じてスケーリングされます。

この場合、値100vh（ビューポートの高さ）を使用できます- （例）

body {
    height: 100vh;
}

設定min-heightも機能します。（例）

body {
    min-height: 100vh;
}

これらのユニットは、最新のブラウザのほとんどでサポートされています。サポートはこちらで確認できます。

— ジョシュ・クロジエ
ソース

1

これによるメリットはまったくありません。ブラウザーのビューポートに関連するすべてを計算する必要があるブラウザーに余分な作業を作成しませんか？ビューポートのサイズ変更は、ブラウザの高さに関連するものを実際にサイズ変更したい場合にのみ効果があるようです。

— Robert Went

12

@RobertWent利点があります。たとえばheight: 100%、親要素に高さが定義されている場合にのみ機能します。要素の親に定義された高さがなく、ビューポートのパーセンテージ単位がそれを解決するいくつかのケースが確かにあります。つまり、深くネストされた要素がある場合は、を設定するだけで、ブラウザの100vh高さ100%になります。あなたは何の利益も見ないかもしれませんが、私はそれらが唯一の解決策である多くの場合に遭遇しました。これらの単位はhtml/ などのルート要素にはそれほど有益ではないかもしれませんがbody、それでも代替手段です

— Josh Crozier

2

ただし、ここではbody要素について説明し、深くネストされた要素については説明しません。可能な親はhtml要素だけです。これが、メリットがないと述べた理由であり、100％に設定するよりも悪い可能性があります。あなたのコメントは、それ以外の点で私を薄くすることは何も言っていません。何かが新しいからといってそれが良くなるわけではありません。ただし、これは代替手段です。

— Robert Went 2016年

4

このアプローチの問題は、iPhoneがアドレスバーと下部ナビゲーションをビューの高さから除外することです。つまりbody { height: 100vh }、最初のページの読み込み時にスクロールバーが表示されます。

— BHOLT 2018

2

いいね。他のアプローチを試しましたが、height: 100% !important" to each parent til html` を入れましたが成功し100%ませんでした。実際にツリーのすべてのノードが実際にあることを確認できましたが、目的の要素に100％を設定することができませんでしたが、ビューポートのスタイルは簡単でした

— pmiranda

25

また、html要素の高さを100％に設定する必要があります。

html { height:100%; }

— Shanethehat
ソース

20

または、使用するposition: absolute場合height: 100%は問題なく動作します。

— スティーブ・タウバー
ソース

4

レイアウトを作成するためにフレックスボックスを使用していなかった場合、素晴らしい修正になるでしょう。：/

— Landon Call

2

width:100%;と親を設定することを忘れないでくださいposition:relative;。

— カイノアック2018年

8

親要素を試す必要があります。

html, body, form, main {
    height: 100%;
}

その後、これで十分です：

#s7 {
   height: 100%;
}

— ムルベンギ
ソース

5

たとえば、左の列（高さ100％）とコンテンツ（高さauto）が必要な場合は、absoluteを使用できます。

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

HTMLで：

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>

— イエローマート
ソース

2

これは理想的ではないかもしれませんが、いつでもJavaScriptで実行できます。または私の場合jQuery

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>

— oBo
ソース

5

CSSだけで十分な場合は、JavaScriptを使用するのは決して良い考えではありません。

— Bosworth99 2014

1

なぜこのようなことをして、本来あるべき以上に複雑にするのでしょうか？私はいくつかの答えを理解できませんlol ...

— CapturedTree

1

ページソースに次のように表示されます。

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

タグに高さの値を指定すると、CSSファイルで定義されている高さの代わりにこれが使用されます。

— スティーブン
ソース

これはページのソースに表示されるものなので、奇妙です。<div class = "holder"> <tr> <td> <div id = "s7"> <div id = "posts">

— Earl Larson '13

さて、上記のコードをどのように取得したかはわかりませんが、<div id = "s7">を<div id = "s7" style = "height：100％;">に変更して、うまくいきました。多分それは私から何かを隠しているのですか？いずれにせよありがとう:)

— アールラーソン

1

要素をdiv内に完全に配置する場合は、パディングの上下を50％に設定できます。

だからこのようなもの：

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}

— キース・ブラウン
ソース

1

50％は要素を含む要素の高さではなく幅を基準にしているため、これがどのように機能するかわかりません。または、ここで何か不足していますか？

— DrLightman 2017年

0

使用したくない人のための別の解決策は次のとおりですhtml, body, .blah { height: 100% }。

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.full-height {
  height: 100%;
}

.test {
  width: 10px;
  background: red;
}

<div class="app">
  <div class="full-height test">
  </div>
  Scroll works too
</div>

スニペットを展開

— TheMisir
ソース