Bulma div 尺寸继承了祖父母的

Question

我正在使用 bulma 作为 CSS 框架，我有如下内容：

<div class="columns is-gapless">

  <div class="column is-four-fifths carte" id="column1">

    <div class="viewer">
      ...
    </div>

  </div>

  <div class="column is-flex is-fullheight" id="column2">
    ...
  </div>

</div>

在我的 css 我有：

div.viewer{
   height: 100%;
   width: 100%;
}

我面临的问题是我的 class 查看器继承了列的高度，而不是他的 parent 'column1'。最后，我的 class 查看器与我的第二列 ('column2') 重叠，这不是预期的行为。我希望我的元素查看器留在 column1 div.

内

同样的问题，如果我想让我的观看者的位置比我的 #column1 的右边界大 20px，我做到了：

div.viewer{
    ...
    position: absolute;
    right: 20px;
}

但是查看器距离我的浏览器右边框 20 像素 window 而不是我的 #column1

Answer 1

不确定 Bulma，但即使使用准系统示例，查看器 class 也会留在 column1 中，无论它有多大。（我添加了 display: flex; 只是为了水平对齐列和一些边框以获得视觉效果）

.column-container {
  display: flex;
  padding: 5px;
  border: 2px solid black;
}

#column1 {
  border: 2px solid blue;
}

.viewer {
  width: 100px;
  height: 100px;
  background-color: gray;
  border: 2px solid red;
}

#column2 {
  border: 2px solid green;
}

<div class="column-container">

  <div id="column1">
    <p>col 1</p>
    <div class="viewer">
      <p>viewer</p>
    </div>
  </div>

  <div id="column2">
    <p>col 2</p>
  </div>

</div>

Answer 2

我终于通过设置 #column1 的位置解决了这个问题。我的解决方案是：

div#column1{
    position: relative;
}

Bulma div 尺寸继承了祖父母的

Bulma div dimensions inherit grandparent's

html

css

bulma