Html 我如何给 div 一个响应高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14714744/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how do I give a div a responsive height
提问by Eric Brockman
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/
这是一个工作示例：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.
我希望里面有文本的 div 元素 (contactBg) 下降到左侧图像的底部。显然，我可以通过以 px 为单位定义高度来做到这一点，但是当窗口的其余部分调整大小而不是流动时，该高度将保持不变。
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:[email protected]">[email protected]</a>
</div><!-- /contactBg -->
</div><!-- /span7 -->
</div><!-- /row-fluid -->
</div><!-- /container-fluid -->
</div><!-- /span10 offset1 -->
</div> <!-- /row-fluid -->
And here's the css:
这是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;
}
回答by naeluh
I know this is a little late to the party but you could use viewport units
我知道聚会有点晚了，但您可以使用视口单位
From caniuse.com:
来自 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).
视口单位：vw、vh、vmin、vmax - CR 长度单位表示视口宽度 (vw)、高度 (vh)、两者中较小者 (vmin) 或两者中较大者 (vmax) 的视口大小的 1% ）。
Support: http://caniuse.com/#feat=viewport-units
支持：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>回答by Lazaro Gamio
For the height of a div to be responsive, it must be inside a parent element with a defined height to derive it's relative height from.
要使 div 的高度具有响应性，它必须位于具有定义高度的父元素内，以从中导出它的相对高度。
If you set the height of the container holding the image and text box on the right, you can subsequently set the heights of its two children to be something like 75% and 25%.
如果您设置右侧包含图像和文本框的容器的高度，您随后可以将其两个子项的高度设置为 75% 和 25%。
However, this will get a bit tricky when the site layout gets narrower and things will get wonky. Try setting the padding on .contentBg to something like 5.5%.
但是，当站点布局变窄并且事情变得不稳定时，这会变得有点棘手。尝试将 .contentBg 上的内边距设置为 5.5%。
My suggestion is to use Media Queries to tweak the padding at different screen sizes, then bump everything into a single column when appropriate.
我的建议是使用媒体查询来调整不同屏幕尺寸的内边距，然后在适当的时候将所有内容合并到一个列中。
回答by Eric Brockman
I don't think this is the BEST solution, but it does appear to work. Instead of using the background color, I'm going to just embed an image of the background, position it relatively and then wrap the text in a child element and position it absolute - in the centre.
我不认为这是最好的解决方案，但它似乎确实有效。我将不使用背景颜色，而是仅嵌入背景图像，将其相对定位，然后将文本包裹在子元素中并将其绝对定位 - 居中。
