Question

我想创建一个这样的页面：

这是我的HTML：

<div class="container">
    <div class="article">
        <div class="main-content">
            Main content goes here...
        </div>
        <div class="content-meta">
            <div class="content-title">
                the title of content goes here...
            </div>
            <div class="content-info">
                some information about content....
            </div>
        </div>
    </div>
</div>

和CSS：

.container {
  overflow:hidden; 
  position:relative;
  width: 100%;
  height: 350px;
}
.container .article {
  width:100%;
  position:absolute;
  left:0;
  top:0;
  background-color: red;
}
.container .article .main-content {
  width:50%;
  float: right;
}
.container .article .content-meta {
  width:50%;
  float: right;
  position: relative;
  height: 350px;
}
.container .content-title , .container .content-info  {
  width: 100%;
  position: absolute;
  left: 0;
  height: 50%;
}
.container .content-title {
    background-color: green;
    top: 0;
}
.container .content-info {
    background-color: blue;
    top: 50%;
}

它正在工作但是当我使用％而不是px作为绿色和蓝色区域的高度时，它只是不起作用。为什么？我的意思是，我设置了绿色和蓝色区域高度：50％，但它没有工作。我怎么解决这个问题？

注意：我有6个div.article元素，我希望所有这些元素都叠在一起，这就是为什么我使用position属性。<\ n / p>

Answer 1

要使百分比高度起作用，您需要将父元素.container .article .content-meta和.container .article都设置为height:100%。

.container {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 350px;
}
.container .article {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: red;
  height: 100%;
}
.container .article .main-content {
  width: 50%;
  float: right;
}
.container .article .content-meta {
  width: 50%;
  float: right;
  position: relative;
  height: 100%;
}
.container .content-title,
.container .content-info {
  width: 100%;
  position: absolute;
  left: 0;
  height: 50%;
}
.container .content-title {
  background-color: green;
  top: 0;
}
.container .content-info {
  background-color: blue;
  top: 50%;
}

<div class="container">
  <div class="article">
    <div class="main-content">
      Main content goes here...
    </div>
    <div class="content-meta">
      <div class="content-title">
        the title of content goes here...
      </div>
      <div class="content-info">
        some information about content....
      </div>
    </div>
  </div>
</div>

事实上，当您使用absolute职位时，float将不再必要。

.article {
  position: relative;
  height: 350px;
}
.main-content {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  background: red;
}
.content-meta {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
}
.content-title,
.content-info {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
}
.content-title {
  background: green;
  top: 0;
}
.content-info {
  background: blue;
  top: 50%;
}

<div class="article">
  <div class="main-content">
    Main content goes here...
  </div>
  <div class="content-meta">
    <div class="content-title">
      the title of content goes here...
    </div>
    <div class="content-info">
      some information about content....
    </div>
  </div>
</div>

或者，只需使用float没有absolute位置。

.article {
  height: 350px;
}
.main-content {
  float: right;
  width: 50%;
  height: 100%;
  background: red;
}
.content-meta {
  float: left;
  width: 50%;
  height: 100%;
}
.content-title,
.content-info {
  float: left;
  width: 100%;
  height: 50%;
}
.content-title {
  background: green;
}
.content-info {
  background: blue;
}

<div class="article">
  <div class="main-content">
    Main content goes here...
  </div>
  <div class="content-meta">
    <div class="content-title">
      the title of content goes here...
    </div>
    <div class="content-info">
      some information about content....
    </div>
  </div>
</div>

或者，如果您不需要支持旧浏览器，则可以使用flexbox。

.article {
  height: 350px;
  display: flex;
  flex-direction: row-reverse;
}
.main-content {
  background: red;
  flex: 1;
}
.content-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.content-title,
.content-info {
  flex: 1;
}
.content-title {
  background: green;
}
.content-info {
  background: blue;
}

<div class="article">
  <div class="main-content">
    Main content goes here...
  </div>
  <div class="content-meta">
    <div class="content-title">
      the title of content goes here...
    </div>
    <div class="content-info">
      some information about content....
    </div>
  </div>
</div>

绝对定位和动态高度

1 个答案: