Question

尝试关注Treehouse，但添加了一些我自己的更改/尝试新事物。

.rectangle {
  height: 100%;
  width: 100%;
  background-color: #f02441;
}

    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a>
              <div class="rectangle"></div>
              <p>Lorem ipsum dolor sit amet</p>
            </a>
          </li>

如果我将矩形的高度设为px中的任何值，则会出现矩形。如果我尝试100％或者任何事情，它就会消失。

这是整件事。 http://codepen.io/defy/pen/QwypNZ

Answer 1

当您使用百分比高度时未设置高度（在CodePen演示中）的原因是因为其父（a元素）当前没有设置高度。如果您通过为其设置display:block;和工作height值来设置高度，那么它将起作用。

＆＃13;

/* You should use a more specific selector, maybe a class. This is only for example */
a { 
    display:block; /* Necessary so that the height can be set */
    height:100px;  /* Set the height of the parent anchor */
}

.rectangle {
  height: 100%;
  width: 100%;
  background-color: #f02441;
}

＆＃13;

<div id="wrapper">
    <section>
        <ul id="gallery">
          <li>
            <a>
              <div class="rectangle"></div>
              <p>Lorem ipsum dolor sit amet</p>
            </a>
          </li>

＆＃13;

如果您想要将矩形的高度设置为基于视口的高度（就像宽度一样），您必须使用vh（视口高度） - Demo

OR

使父级的高度基于视口高度。如果您未使用vh，则表示您拥有html, body { height:100%; }并在body之后但在元素本身之前具有相对高度的所有其他父母的大小 - Demo

有人可以帮助我让我的矩形响应吗？

1 个答案: