高度等于动态宽度(CSS流体布局)+展开以包含溢出
问题描述:
嗨 - 是否有可能有一个高度等于流体宽度的div展开以在窄视口内包含其内容?高度等于动态宽度(CSS流体布局)+展开以包含溢出
我想出了一个变通用纯色的div:http://jsfiddle.net/2nprw0xq/
但不能与边框:http://jsfiddle.net/534k9e2n/
下面是我使用的代码。谢谢,B。
<div class="holder">
<div class="shape"></div>
<div class="shape_outer">
<div class="shape_inner"> Text... </div>
</div>
</div>
。
.holder {
display: inline-block;
position: relative;
width: 50%;
}
.shape {
margin-top: 100%;
}
.shape_outer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px solid #111;
}
.shape_inner {
padding: 20px;
}
答
移动边框的内部元件,然后添加宽度为100%和100%的最小高度,这样的:
.shape_inner {
border: 1px solid #111;
padding: 20px;
min-height: 100%;
width: 100%;
}
真棒。谢谢@caeth。 – boyce 2014-09-26 21:29:12
@boyce接受吗? :) – 2014-09-26 21:33:23
Soz :) ......... – boyce 2014-09-26 21:53:25