15

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

这是一个工作示例：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)、两者中较小者 (vmin) 或两者中较大者 (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 的高度具有响应性，它必须位于具有定义高度的父元素内，才能从中得出它的相对高度。

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

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

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

于 2013-02-05T20:31:21.653 回答
0

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

于 2013-02-05T22:15:18.853 回答