15

レスポンシブデザインを学ぶつもりですが、今のところ理解できないことが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:ej@emmajulien.com">ej@emmajulien.com</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;
    }
4

3 に答える 3

39

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

caniuse.comから：

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

サポート：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>

于 2017-04-05T22:33:16.500 に答える
6

divの高さがレスポンシブであるためには、相対的な高さを導出するために、定義された高さを持つ親要素の内側にある必要があります。

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

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

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

于 2013-02-05T20:31:21.653 に答える
0

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

于 2013-02-05T22:15:18.853 に答える