我如何给div一个响应高度

Question

我正在说要学习响应式设计，但到目前为止，有一件事我似乎无法弄清楚...

这是一个有效的例子：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;
    }

Answer 1

我知道派对有点晚了但你可以使用视口单元

来自caniuse.com：

视口单位：vw，vh，vmin，vmax - CR长度单位，表示视口宽度（vw），高度（vh）视口大小的1％，两者中较小者（vmin）或两者中较大者（vmax） ）。

支持：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>

Answer 2

要使div的高度响应，它必须位于具有已定义高度的父元素内，以从中获取它的相对高度。

如果您在右侧设置了包含图像和文本框的容器的高度，则可以随后将其两个子项的高度设置为75％和25％。

然而，当网站布局变得更窄并且事情变得不稳定时，这将变得有点棘手。尝试将.contentBg上的填充设置为5.5％。

我的建议是使用媒体查询来调整不同屏幕大小的填充，然后在适当的时候将所有内容都放到一个列中。

Answer 3

我不认为这是最好的解决方案，但它似乎确实有效。不是使用背景颜色，我只是嵌入背景图像，相对定位，然后将文本包装在子元素中并将其置于绝对位置 - 在中心。