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，应该是轻量级的，因为你多次使用同一个图像，浏览器应该真的为它做一个请求（我想？）。

Quirk 关于这种方法是网格扩展的程度取决于图像端口中图像的纵横比。您需要进行一些实验并尝试优化各种参数以获得令人满意的布局。

100％高度div。父图像高度由图像确定

1 个答案:

如何运作