我如何给div一个响应高度
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我如何给div一个响应高度相关的知识，希望对你有一定的参考价值。
我正在说要学习响应式设计，但到目前为止，有一件事我似乎无法弄清楚...
这是一个有效的例子：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;
}
我知道派对有点晚了但你可以使用视口单元
来自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>要使div的高度响应，它必须位于具有已定义高度的父元素内，以从中获取它的相对高度。
如果您在右侧设置了包含图像和文本框的容器的高度，则可以随后将其两个子项的高度设置为75％和25％。
然而，当网站布局变得更窄并且事情变得不稳定时，这将变得有点棘手。尝试将.contentBg上的填充设置为5.5％。
我的建议是使用媒体查询来调整不同屏幕大小的填充，然后在适当的时候将所有内容都放到一个列中。
我不认为这是最好的解决方案，但它似乎确实有效。不是使用背景颜色，我只是嵌入背景图像，相对定位，然后将文本包装在子元素中并将其置于绝对位置 - 在中心。
以上是关于我如何给div一个响应高度的主要内容，如果未能解决你的问题，请参考以下文章
如何设置包装 div 的高度以防止响应式滑块/自动收录器后内容跳转？