代码之家 › 专栏 › 技术社区 › deathangel908

css:div采用最小宽度,最大高度=页面高度

flexbox css html

deathangel908 · 技术社区 · 7 年前

我有一个没有卷轴(也没有垂直或水平)的页面。身体是蓝色的。这个机构有两个孩子:

黄色,有100%的身高和8个孩子(红色的),宽度尽可能小,这取决于孩子的数量。红色的采用固定的已知高度;宽度
白色,宽度为100%(占据页面的其余部分,位于页面右侧)

看看下面的片段。 我希望黄色div有100%的高度 宽度最小,仅取决于孩子的数量。

body  {
  background-color: blue;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  margin: 0;
}

html {
   height: 100%;
} 
.yellow  {
  background-color: yellow;
  height: 100%;
}
.white  {
  background-color: white;
  border: 4px solid green;
  width: 100%;
}
.red  {
  display: inline-block;
  height: 20px;
  margin: 5px;
  width: 35px;
  background-color: red;
}

<body>
<div class="yellow">
<i class="red"></i>
<i class="red"></i>
<i class="red"></i>
<i class="red"></i>
<i class="red"></i>
<i class="red"></i>
<i class="red"></i>
<i class="red"></i>
</div>
<div class="white">

</div>
</body>

例如,以下6种情况,每种情况的最小宽度和高度均为页面高度的100%。

e、 g.当页面高度=~5个红色div时 e、 g.当页面高度=~3个红色div时

我想要纯css解决方案(无js)。Flex box还可以。

1 回复 | 直到 7 年前

Temani Afif 7 年前

这里有一个使用flexbox的非完美解决方案。视觉上你会得到所需的结果,但没有什么问题:白色溢出,我不得不把它放在红色元素的容器中。

html {
  height: 100%;
  /*simulate height change*/
  animation: change 3s infinite linear alternate;
}

@keyframes change {
  to {
    height: 20%
  }
}

body {
  background-color: blue;
  width: 100%;
  height: 100%;
  margin: 0;
}

.yellow {
  background-color: yellow;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  flex-wrap: wrap;
  overflow: hidden;
  border-right: 4px solid green;
}

.white {
  background-color: white;
  border: 4px solid green;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.red {
  height: 20px;
  margin: 5px;
  width: 35px;
  background-color: red;
}

<div class="yellow">
  <i class="red"></i>
  <i class="red"></i>
  <i class="red"></i>
  <i class="red"></i>
  <i class="red"></i>
  <i class="red"></i>
  <i class="red"></i>
  <i class="red"></i>

  <div class="white">
  </div>
</div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前