web-dev-qa-db-ja.com

divに反応する高さを与えるにはどうすればよいですか

レスポンシブデザインを学びたいと思っていますが、今のところわからないことが1つあります。

これが実際の例です： http://ericbrockmanwebsites.com/dev1/

内部にテキストを含むdiv要素（contactBg）が、画像の左下に来るようにします。明らかに、pxで高さを定義することでそれを行うことができますが、その後、ウィンドウの残りの部分のサイズが流動的ではなくサイズ変更されたときに、その高さが維持されます。

そこに良い記事があれば、これを行う方法を説明していることを知っているかもしれませんが、それは非常に役立ちます、ありがとう！

マークアップは次のとおりです。

<div class="row-fluid">
        <div class="span10 offset1">
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="span5">
                        <img src="images/logo.jpg" alt="logo" />
                        <img src="images/store.jpg" alt="store" />
                    </div><!-- /span5 -->
                    <div class="span7">
                        <img src="images/portal.jpg" alt="portal">
                        <div class="contactBg">
                            Administration: Emma Jane Julien<br />
                            <a href="mailto:[email protected]">[email protected]</a>
                        </div><!-- /contactBg -->
                    </div><!-- /span7 -->
                </div><!-- /row-fluid -->
            </div><!-- /container-fluid -->
        </div><!-- /span10 offset1 -->
    </div> <!-- /row-fluid -->

そして、これがCSSです：

   body {
        background: url(../images/3D2A1698A177AF9B71_218.png) repeat;
    }

    img {
        max-width:100%;
        padding-bottom:1%;
    }

     .container-fluid {
        background:#fff;
        padding: 1%;
    }

      .row-fluid {
        width: 100%;
        *zoom: 1;
 }
      .row-fluid [class*="span"] {
        display: block;
        float: left;
        width: 100%;
        min-height: 30px;
        margin-left: 1%;
        *margin-left: 2.709239449864817%;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
}

      .row-fluid .span10 {
        width: 82.87292817679558%;
        *width: 82.81973668743387%;
      }

      .row-fluid .span7 {
        width: 58.06353591160195%;
        *width: 57.12912895262725%;
      }

      .row-fluid .span5 {
        width: 40.93646408839753%;
        *width: 40.00205712942283%;
      }
      .row-fluid .span4 {
        width: 31.491712707182323%;
        *width: 31.43852121782062%;
      }

    .contactBg {
        background: #282624;
        padding: 3%;
        max-width:100%;
        height:auto;
    }
htmlcssresponsive-design
10
Eric Brockman

私はこれがパーティーに少し遅れていることを知っていますが、ビューポートユニットを使用することができます

Caniuse.comから：

ビューポート単位：vw、vh、vmin、vmax-ビューポートの幅（vw）、高さ（vh）、2つの小さい方（vmin）、または2つの大きい方（vmax）のビューポートサイズの1％を表すCR長さの単位）。

サポート： http://caniuse.com/#feat=viewport-units

div {
/* 25% of viewport */
  height: 25vh;
  width: 15rem;
  background-color: #222;
  color: #eee;
  font-family: monospace;
  padding: 2rem;
}
<div>responsive height</div>
18
naeluh

Divの高さをレスポンシブにするには、その高さの派生元となる定義済みの高さを持つ親要素内になければなりません。

右側の画像とテキストボックスを保持するコンテナの高さを設定すると、その2つの子の高さを75％と25％のように設定できます。

ただし、サイトのレイアウトが狭くなり、物事が不安定になると、これには少し注意が必要になります。 .contentBgのパディングを5.5％などに設定してみてください。

私の提案は、メディアクエリを使用してさまざまな画面サイズでパディングを調整し、必要に応じてすべてを1つの列にバンプすることです。

6
Lazaro Gamio

Vwが最適なオプションだと思います。画面の解像度に応じて高さを自動的に調整します。例：-height：10vw;すべての画面で高さが反応するようになります。

0
JAGJIT DHALIWAL

これは最善の解決策ではないと思いますが、うまくいくようです。背景色を使用する代わりに、背景の画像を埋め込んで相対的に配置し、テキストを子要素にラップして、絶対位置に配置します-中央に配置します。

0
Eric Brockman