web-dev-qa-db-ja.com

height：100％がdivを画面の高さに拡大するのにうかいでないのはなぜですか？

カルーセル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">
htmlcssheight
232
Earl Larson

高さに対してパーセント値が機能するためには、親の身長を決定する必要があります。唯一の例外は、ルート要素<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の例。

336
Madara Uchiha

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

現代のアプローチ：

html/body要素の両方の高さを100%に設定する代わりに、viewport-percentage lengthを使用することもできます。

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

ビューポートパーセンテージの長さは、最初の包含ブロックのサイズに比例します。最初の包含ブロックの高さまたは幅が変更されると、それに応じて拡大縮小されます。

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

body {
    height: 100vh;
}

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

body {
    min-height: 100vh;
}

これらのユニットは最近のほとんどのブラウザでサポートされています - サポートはこちら にあります。

121
Josh Crozier

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

html { height:100%; }
21
shanethehat

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

19
Steve Tauber

あなたは親要素を試すべきです。

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

それで十分です。

#s7 {
   height: 100%;
}
6
mrbengi

たとえば、左の列（高さ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>
4
YellowMart

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

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

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

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

高さの値をタグに入れると、cssファイルで定義された高さの代わりにこれを使用します。

0
Steven

要素をdivの内側に絶対配置する場合は、上下の余白を50％に設定できます。

だからこのようなもの：

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