我怎样才能避免 JS 而只使用 CSS？答案

【问题标题】：How can I avoid JS and use only CSS?我怎样才能避免 JS 而只使用 CSS？
【发布时间】：2017-03-31 17:00:07
【问题描述】：

经过几次测试，我无法用纯 css 做我想做的事情。如何在不使用 javascript 的情况下获得与以下示例相同的结果。

用纯css可以做到吗？

谢谢。

var main = document.getElementsByClassName('container');
for(var i = 0; i < main.length; i++) {	
	var height = main[i].childNodes[3].offsetHeight;
	main[i].style.height = height+"px";
}

.container {
  width: 100%;
  background: yellow;
  position: relative;
  margin-bottom: 10px;
}
.left-child {
  width: 40%;
  height: 120px;
  background: red;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.right-child {
  width: 60%;
  height: 180px;
  background: blue;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 40%;
}

<div class="container">
  <div class="left-child">
  </div>  
  <div class="right-child">
  </div>
</div>

<div class="container">
  <div class="left-child">
  </div>
  <div class="right-child">
  </div>
</div>

【问题讨论】：

鉴于.right-child 元素的高度无论如何都在CSS 中被硬编码，那么在JS 中设置父元素的高度有什么意义呢？只需将height: 180px 设置为.container 即可
但我想让容器“auto”.container { height: auto;} 的高度值对于我想做的事情是必要的。
为什么对这个问题投了反对票？
@KingKing 有时候，一旦你看到问题已经有一些反对意见，就会很想给反对意见，你认为这是一种理解一些问题的建设性方式吗？一个拥有 40k 代表的人的非常奇怪的解释。
@ZombieChowder 你没有太多经验来感受这个真相。 我从来没有做过这样的事情。但我相信其他一些人已经这样做并将一直这样做。

标签： javascript jquery html css

【解决方案1】：

您可以使用flexbox 来做到这一点，只需将display: flex;align-items: center; 添加到.container

并删除 position: absolute 和 transform translate 的东西，你会得到一个干净的 CSS

.container {
  background: yellow;
  margin-bottom: 10px;
  display: flex;             /* added property */
  align-items: center;       /* added property */
}
.left-child {
  width: 40%;
  height: 120px;
  background: red;
}

.right-child {
  width: 60%;
  height: 180px;
  background: blue;
}

<div class="container">
  <div class="left-child">
  </div>  
  <div class="right-child">
  </div>
</div>

<div class="container">
  <div class="left-child">
  </div>
  <div class="right-child">
  </div>
</div>

【讨论】：

我已经测试过这个工作！非常感谢你们。

【解决方案2】：

另一种方式：

.container {
  width: 100%;
  background: yellow;
  overflow:hidden;
  margin-bottom: 10px;
}
.left-child {
  margin-top:30px;
  width: 40%;
  height: 120px;
  background: red;
  float:left;
}
.right-child {
  width: 60%;
  height: 180px;
  background: blue;
  float:right;
}

https://jsfiddle.net/ghdzy57w/14/

【讨论】：

【解决方案3】：

没有position : relative 或position : absolute 的解决方案

.container {
  width: 100%;
  background: yellow;
  margin-bottom: 10px;
  display: inline-block;
}
.left-child {
  width: 40%;
  height: 120px;
  background: red;
  margin-top: 30px;
  display:inline-block;
}

.right-child {
  width: 60%;
  height: 180px;
  background: blue;
  display:inline-block;
  float: right;
}

<div class="container">
  <div class="left-child">
  </div><!--  
  --><div class="right-child">
  </div>
</div>

<div class="container">
  <div class="left-child">
  </div><!--  
  --><div class="right-child">
  </div>
</div>

【讨论】：

【解决方案4】：

像这样？

我在.container 中添加了height，因为由于孩子是绝对定位的，所以他们不在文档流中，这意味着就像.container 根本没有孩子。

至于height:100% 的.right-child，那么它采用最近的相对定位元素的高度，即.container

.container {
  width: 100%;
  height: 200px;
  background: yellow;
  position: relative;
  margin-bottom: 10px;
}
.left-child {
  width: 40%;
  height: 120px;
  background: red;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.right-child {
  width: 60%;
  height: 100%;
  background: blue;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 40%;
}

<div class="container">
  <div class="left-child">
  </div>  
  <div class="right-child">
  </div>
</div>

<div class="container">
  <div class="left-child">
  </div>
  <div class="right-child">
  </div>
</div>

【讨论】：