html - 100% 高度不适用于两个 div 之一

Question

我有三个 div，一个主要，两个在其中。主 div 内部是导航栏和内容 div，其中包含带有文本区域的表单。文本区域只能垂直调整大小。内容和导航栏的最小高度:100%，主要的最小高度:1200px。主要和内容 div 的高度随文本区域大小而变化(这就是我想要的)，但导航栏仍然为 0px 并且“不可见”。

.navbar {
	width: 250px;
	min-height: 100%;
	position: relative;
	background-color: #121212;
	float: left;	
}
.main {
	margin: auto;
	min-width: 1200px;
	float: left;
}
.content {
	width: 950px;
	min-height: 100%;
	background-color: #1c1c1c;
	color: white;
	float: left;
}
form {
	width: 100%;
	height: 100%;
	float: left;
}
textarea {
	min-height: 297px;
	resize: vertical;
	width: 800px;
	height: 770px;
}

<div class="main">
   <div class="navbar">
      <!-- some links -->
   </div>
   <div class="content">
      <form>
         <textarea name="article">
         </textarea>
      </form>
   </div>
</div>

如何使导航栏与内容高度相同？

Answer 1

在可以更改父级高度的内容上使用 min-height: 100% (即，它在父级的流程中，而不是绝对定位)显然会带来它可能导致的问题高度无限增加。如果 min-height 为 100% 并且您也有 padding: 10px，那么子级的高度将会增加，从而增加父级的高度导致循环。

因此，添加 min-height: 100% 将不起作用。

最好使用flex来设置高度，这样你就可以display: flex; align-items: 在父级上拉伸(stretch)。 align-items:stretch 将导致该父元素的子元素“拉伸(stretch)”；达到相同的高度。

例如:

.main {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  ...
}

justify-content: space- Between 也可以更改以适应。

完整的 Flex 指南可以在 here 找到。