Question

我需要元素 cnt-right 为其同胞的高度100％。

它没有父元素，只有兄弟姐妹。

是否可以使用CSS完成此操作？还是我必须使用JavaScript？

我有这个结构：jsFiddle

.column {
  display: block;
  min-height: 50px;
  background-color: #ccc;  
  text-align: center;
  float: left;
}

.decktop-12 {
  width: 100%;
}

.decktop-8 {
  width: 66%;
}

.decktop-4 {
  width: 33%;
}

.cnt {
  background-color: #995595;
}

.cnt-right {
  background-color: #559959;
}

<div class="mobile-12 decktop-12 cnt-top column">
  Content top
</div>
<div class="mobile-12 decktop-8 cnt column">
  Content - main
  <br /> <br />
  Content - main
  <br /> <br />
  Content - main
  <br /> <br />
  Content - main
  <br /> <br />
  Content - main
</div>
<div class="mobile-12 decktop-4 cnt-right column">
  Content - right
</div>
<div class="mobile-12 decktop-12 cnt-bottom column">
  Content bottom
</div>

Answer 1

您只能使用CSS创建网格布局，而无需使用javascript：https://css-tricks.com/snippets/css/complete-guide-grid/

这是您可以做什么的示例：

.grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: 
    "header header"
    "content right"
    "footer footer"
}

.header {
  grid-area: header;
  
}
.content {
  grid-area: content;
  background-color: #995595;
}
.right {
  grid-area: right;
  background-color: #559959;
}
.footer {
  grid-area: footer;
}

.header, .footer{
  min-height: 50px;
  background-color: #ccc; 
}

.grid > * {
  text-align: center;
}

<div class="grid">
	<div class="header">
	  Content top
	</div>
	<div class="content">
	  Content - main
	  <br /> <br />
	  Content - main
	  <br /> <br />
	  Content - main
	  <br /> <br />
	  Content - main
	  <br /> <br />
	  Content - main
	</div>
	<div class="right">
	  Content - right
	</div>
	<div class="footer">
	  Content bottom
	</div>
</div>

Answer 2

您可以使用CSS网格或Flex显示器。

我建议您看看：

以及Bootstrap 4如何使用flex实现其网格的方法： https://getbootstrap.com/docs/4.0/layout/grid/

与使用float相比，您将对网格的行为和可能性有更多的控制。

我为您提供了一个使用flex的示例。在此示例中，默认情况下，flex使列的高度均匀，并且看起来类似于用float编写的代码：

<div class="row">
    <div class="mobile-12 desktop-12 column c1">
        Content top
    </div>
    <div class="mobile-12 desktop-8 column c2">
        Content - main
        <br><br><br>
    </div>
    <div class="mobile-12 desktop-4 column c3">
        Content - right
    </div>
    <div class="mobile-12 desktop-12 column c1">
        Content bottom
    </div>
</div>

<style>
    .row {
        display: flex;
        flex-wrap: wrap; /* Allow multi-line */
    }
    .column {
        flex-grow: 0; /* Prevents column from auto growing */
        flex-shrink: 0; /* Prevents column from auto shrinking */
    }
    .mobile-12 {
        flex-basis: 100%;
    }
    .desktop-8 {
        flex-basis: 66.66666%;
    }
    .desktop-4 {
        flex-basis: 33.33333%;
    }
    .c1 { background-color: grey; }
    .c2 { background-color: purple; }
    .c3 { background-color: green; }
</style>

100％高度取决于兄弟元素的高度

2 个答案: