我如何给 div 一个响应高度 [英] how do I give a div a responsive height

问题描述

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

这是一个工作示例:http://ericbrockmanwebsites.com/dev1/

我希望其中包含文本的 div 元素 (contactBg) 位于图像左侧的底部.显然，我可以通过以 px 为单位定义高度来实现这一点，但是当窗口的其余部分调整大小而不是流动时，该高度将保持不变.

如果有任何你可能知道的好文章解释了如何做到这一点，那将非常有帮助，谢谢！

标记如下:

<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">管理:Emma Jane Julien<br/><a href="mailto:[e-mail]">[e-mail]</a></div><!--/contactBg --></div><!--/span7 --></div><!--/row-fluid --></div><!--/container-fluid --></div><!--/span10 offset1 -->
<!--/row-fluid -->

这是CSS:

 body {背景:url(../images/3D2A1698A177AF9B71_218.png) 重复；}图片{最大宽度:100%；填充底部:1%；}.container-fluid {背景:#fff;填充:1%；}.row-fluid {宽度:100%；*缩放:1；}.row-fluid [class*="span"] {显示:块；向左飘浮;宽度:100%；最小高度:30px；左边距:1%；*边距:2.709239449864817%；-webkit-box-sizing: 边框框；-moz-box-sizing: 边框框；box-sizing: 边框框；}.row-fluid .span10 {宽度:82.87292817679558%；*宽度:82.81973668743387%；}.row-fluid .span7 {宽度:58.06353591160195%；*宽度:57.12912895262725%；}.row-fluid .span5 {宽度:40.93646408839753%；*宽度:40.00205712942283%；}.row-fluid .span4 {宽度:31.491712707182323%；*宽度:31.43852121782062%；}.contactBg {背景:#282624；填充:3%；最大宽度:100%；高度:自动；}

解决方案

我知道聚会有点晚了，但你可以使用视口单位

来自 caniuse.com:

视口单位:vw、vh、vmin、vmax - CR长度单位表示视口宽度 (vw)、高度 (vh)、两者中的较小者 (vmin) 或两者中的较大者 (vmax) 的 1%.

支持:http://caniuse.com/#feat=viewport-units

div {/* 25% 的视口 */高度:25vh；宽度:15rem；背景色:#222；颜色:#eee;字体系列:等宽；填充:2rem；}

响应高度

I'm stating to learn responsive design, but there's one thing I can't seem to figure out, so far...

Here's a working example: http://ericbrockmanwebsites.com/dev1/

I'd like the div element (contactBg) with text inside of it to come down to the bottom of the image to the left. Obviously I can do that by defining the height in px, but then that height is maintained when the rest of the window resizes instead of being fluid.

If there are any good articles out there you may know of that explains how to do this, that would be very helpful, thanks!

Here's the mark up:

<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:[e-mail]">[e-mail]</a>
                        </div><!-- /contactBg -->
                    </div><!-- /span7 -->
                </div><!-- /row-fluid -->
            </div><!-- /container-fluid -->
        </div><!-- /span10 offset1 -->
    </div> <!-- /row-fluid -->

And here's the 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;
    }

解决方案

I know this is a little late to the party but you could use viewport units

From caniuse.com:

Viewport units: vw, vh, vmin, vmax - CR Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

Support: 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>

这篇关于我如何给 div 一个响应高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！