html - 100%高度依赖于兄弟元素的高度

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>