100% 高度父级高度由具有 % 宽度的图像确定

Question

我有一个包装 div，其中包含一个右浮动 100% 高度的 div 和一个图像。

图像的宽度设置为 %。当您调整浏览器窗口的大小时，图像高度会随着包装 div 的高度而增加和减少。

当我在包装器 div 上设置固定高度时，右侧浮动 100% 高度 div 的高度会根据我的需要增加。但是，包装器 div 具有动态高度，由图像的当前高度和 100% 高度 div 设置，在这种情况下不会像您期望的那样垂直调整大小。

我想要做的事情可以实现吗？

这是一支笔：http://codepen.io/fraserhart/pen/qiFmb

<div class="wrapper">
  <img src="http://i.imgur.com/7v619Ip.jpg" />
  <div class="grid">
    <section class="row">
      <p>Home</p>   
    </section>

    <section class="row">
      <p>Looking For Care</p>   
    </section>

    <section class="row">
      <p>Working For Us</p> 
    </section>

    <section class="row">
      <p>Professionals</p>  
    </section>

    <section class="row">
      <p>Who We Are</p> 
    </section>

    <section class="row">
      <p>Find a Branch</p>  
    </section>
  </div>
  <div class="clear-fix"></div>
</div>

.wrapper{
  background:blue;
  height:auto;
}
img{
  width:60%;
}
.clear-fix{
  clear:both;
}
.grid {
  display: box;
  width:400px;
  height:100%;
  box-orient: vertical;
  background:#ff0000;
  float:right;
}
.row {
  padding: 20px;
  box-flex:1;
  background: #ccc;
  padding:0px 5px;
  border:1px solid #ff0000;
  text-align:center;
}

Answer 1

嗯，这是一种实现方式，有点奇怪，可能不推荐，但它是一种概念证明，一种奇怪的 CSS 好奇心。

这里是小提琴：http://jsfiddle.net/audetwebdesign/3tUfC/

这是 HTML：

<div class="wrapper">
    <div class="image-port">
        <img src="http://placekitten.com/800/800">
    </div>
    <div class="content-port">
        <div class="grid">
            <div class="row">
                <img src="http://placekitten.com/100/25">
                <p>First...</p>
            </div>
            <div class="row">
                <img src="http://placekitten.com/100/25">
                <p>Second...</p>
            </div>
            <div class="row">
                <img src="http://placekitten.com/100/25">
                <p>Third...</p>
            </div>
            <div class="row">
                <img src="http://placekitten.com/100/25">
                <p>Fourth...</p>
            </div>
        </div>
    </div>
</div>

这里是 CSS：

.wrapper {
    outline: 2px dotted blue;
}

.image-port {
    outline: 1px dotted blue;
    display: table-cell;
    width: 60%;
}
.image-port img {
    width: 100%;
    vertical-align: bottom;
}

.content-port {
    display: table-cell;
    vertical-align: top;
    background-color: wheat;
    height: 100%;
    width: 40%;
}

.content-port .grid {
}

.content-port .row {
    border-top: 2px solid blue;
    position: relative;
    background-color: rgba(255,255,255,0.5);
    overflow: auto;
}
.content-port .row:first-child {
    border-top: none;
}

.content-port .row img {
    width: 100%;
    display: block;
    visibility: hidden;
}
.content-port .row p {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 0 0 0;
    padding: 10px;
}

工作原理

.wrapper 块包含两个 table-cell 元素：.image-port 和 .content-port， 相对宽度分别为 60% 和 40%。这避免了小窗口尺寸时网格在图像下方跳转的问题。

在.image-port 中，让img 缩放到 100% 的宽度以获得良好的图像视图。

在.content-port 块元素中，设置position: relative，以及可选的overflow 和其他一些视觉设计属性。

诀窍是：在每个.row 中，放置一个具有特定纵横比的图像。我创建了四行，所以我的图像是 4:1 的纵横比。将.row img的宽度设置为100%，并设置visibility: hidden，这样图片就可以占据灵活的空间但又不碍事。这将允许每行在您重新调整窗口大小时改变大小。

接下来，将您的内容放入.row，例如p。 content 元素是position: absolute，这样它就占据了.row 父元素的整个宽度和高度（将偏移属性设置为零）。

现在，行的高度随窗口宽度缩放。这种方法具有一定的灵活性，虽然并不完美，但可能很有用。

请注意，如果您将窗口拉伸得足够宽，则 100x25 图像将是它们的全宽，.grid 将从包装器的右边缘移开。您可以通过使用更大的占位符图片（例如 1000x250）来实现这一点。

如果您将占位符图像设置为透明 gif 或 png，那么它应该是轻量级的，并且由于您多次使用同一个图像，浏览器确实应该发出一个请求（我认为？）。

这种方法的怪癖在于，网格的扩展程度在一定程度上取决于图像端口中图像的纵横比。您需要进行一些试验并尝试优化各种参数以获得令人愉悦的布局。