Question

我正在尝试使用flexbox制作网格，但是高度不起作用，我想我错过了有关flex中百分比高度属性的内容。我想实现这个

但我得到了这个。

我正在尝试使用flexbox。

＆＃13;

body {
  margin: 0px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container {
  background: blue;
  display: flex;
  flex: 1 100%;
}

.navigation {
  display: flex;
  flex: 0 60px;
  background: green;
}

.chat-list {
  background: rgba(255, 50, 40, 0.5);
  width: 22%;
}

.chat-profile {
  background: rgba(55, 250, 40, 0.5);
  width: 18%;
}

.chats {
  width: 60%;
  background: orange;
}

＆＃13;

<body>
  <div class="wrapper">
    <div class="navigation">NAVIGATION</div>
    <div class="container">
      <div class="chat-list">CHAT LIST</div>
      <div class="chats">CHATS</div>
      <div class="chat-profile">CHAT_PROFILE</div>
    </div>
  </div>
</body>

＆＃13;

Answer 1

您需要将height:100vh设置为.wrapper以获取完整视口高度，并将flex-shrink:0设置为.navigation类，以便它可以占用所有{{1}高度。

60px

body {
  margin: 0px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.container {
  background: blue;
  display: flex;
  flex: 1 100%;
}

.navigation {
  display: flex;
  flex: 1 0 60px;
  background: green;
}

.chat-list {
  background: rgba(255, 50, 40, 0.5);
  width: 22%;
}

.chat-profile {
  background: rgba(55, 250, 40, 0.5);
  width: 18%;
}

.chats {
  width: 60%;
  background: orange;
}

Answer 2

添加到您的css：

html, body {
  height: 100%;
}
.wrapper{
  min-height: 100%;
}

Answer 3

你的代码实际上很好。只是它占据了body / html的100％高度，它会尝试动态扩展到您的内容。给你一个很薄的页面。只需将body和html的高度设置为100％即可为您解决此问题。

＆＃13;

body, html {
	margin: 0;
    height: 100%;
}

.wrapper{
	display: flex;
	flex-direction: column;
  height:100%;
}

.container{
	background:blue;
	display: flex;
	flex: 1 100%;
}
.navigation{
	display: flex;
	flex: 0 60px;
	background: green;
}
.chat-list{
	background: rgba(255,50,40,0.5);
	width:22%;

}
.chat-profile{
	background: rgba(55,250,40,0.5);
	width: 18%;
	
}
.chats{
	width: 60%;
	background: orange;
}

＆＃13;

<body>
	<div class="wrapper">
		<div class="navigation">NAVIGATION</div>	
		<div class="container">
			<div class="chat-list">CHAT LIST</div>
			<div class="chats">CHATS</div>
			<div class="chat-profile">CHAT_PROFILE</div>	
		</div>
	</div>
</body>

＆＃13;

Answer 4

您应该将height的{{1}}设置为html, body, .wrapper（为了继承全高）然后只需将100%大于1的值设置为.row3而不是其他值。

＆＃13;

flex

＆＃13;

.wrapper, html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
.navigation {
    background-color: red;
}
.container {
    flex:2;
    display: flex;
}
.chat-list {
    background-color: yellow;
    flex: 0 0 240px;
}
.chats {
    background-color: orange;
    flex: 1 1;
}
.chat-profile {
    background-color: purple;
    flex: 0 0 240px;
}

＆＃13;

如何使内部柔性高度获得所有空间

4 个答案: