Question

我有以下HTML

<div class="fluid-wrapper">
    <browser>
        <div class="navigation-bar">Navigation bar</div>
        <iframe class="browser-frame"></iframe>
    </browser>   
</div>

和Css

.fluid-wrapper {
    width:300px;
    height:400px;
}

browser {
    display: block;
    width: 100%;
    height: 100%;
    background-color: hotpink;
}

.navigation-bar {
    width:100%;
    height:30px;
    background-color:green;
}

.browser-frame {
    border:0px;
    width:100%;
    background-color:blue;
}

挑战在于我希望iframe适合browser - 类，同时为navigation-bar - 类留出空间。我尝试过使用calc()但无法使用它。正如CSS所述，fluid-wrapper是流动的。因此我不能使用固定值。

小提琴：https://jsfiddle.net/asq24zbz/3/

Answer 1

您是否尝试过使用CSS定位？

将导航设置为对absolute的容器具有relative位置。然后iFrame relative到容器，顶部偏移量为30px。

看起来像这样：

.fluid-wrapper {
  width: 300px;
  height: 400px;
}
browser {
  display: block;
  width: 100%;
  height: 100%;
  background-color: hotpink;
  position: relative;
  overflow: auto;
}
.navigation-bar {
  width: 100%;
  height: 30px;
  background-color: green;
  position: absolute;
  top: 0;
}
.browser-frame {
  width: 100%;
  height: 100%;
  position: relative;
  top: 30px;
  border: 1;
  box-sizing: border-box;
}

<div class="fluid-wrapper">
  <browser>
    <div class="navigation-bar">Navigation bar</div>
    <iframe class="browser-frame" src="http://www.wikipedia.com"></iframe>
  </browser>
</div>

如您所见，导航栏固定在包含div的顶部。

在垂直布局中组合固定和流体

1 个答案: