使用CSS使彼此相邻的div占用所有垂直空间
光学流
我正在尝试创建一个右手菜单，该菜单的像素宽度始终相同，并且屏幕底部也过长。在它的左侧，我想要一个div来填充其余的空间。我所拥有的图片如下所示：
我正在尝试的HTML和CSS如下所示：
<div class=App>
<div class=Content>
More Test
</div>
<div class=Menu>
Just Test Text
</div>
</div>
.App {
text-align: center;
display: flex;
width: 100%;
height: 100%;
}
.Menu {
background-color: #080;
flex: 0 0 200px;
}
.Content {
background-color: #f00;
flex: auto;
}
这是简单页面的工作版本链接：
约翰尼斯
您height: 100%需要一个参考高度-父元素，html并且body自身不会有任何高度。因此，添加以下规则：
html, body {
margin: 0;
height: 100%;
}
这是您相应修改的小提琴：https : //jsfiddle.net/3ck7dypo/
这是此代码段中的相同代码：
html,
body {
margin: 0;
height: 100%;
}
.App {
text-align: center;
display: flex;
width: 100%;
height: 100%;
}
.Menu {
background-color: #080;
flex: 0 0 200px;
}
.Content {
background-color: #f00;
flex: auto;
}<div class=App>
<div class=Content>
More Test
</div>
<div class=Menu>
Just Test Text
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
CSS：div height占用父级的所有可用空间
- 2
将flex列与div一起使用时会占用所有剩余空间
- 3
如何将所有段落从垂直重新排列为水平（彼此相邻）
- 4
如何使绝对定位的div占用所有可用的宽度空间？
- 5
如何自动占用CSS网格中的所有可用空间
- 6
如何自动占用CSS网格中的所有可用空间
- 7
CSS float div从左到右彼此相邻
- 8
如何在CSS中使div彼此相邻
- 9
css使div在栏中彼此相邻显示
- 10
Flexbox div不占用整个垂直空间
- 11
如何使用 css 将 div 的所有子项垂直居中？
- 12
我需要在表单中彼此相邻的两个<select>项目，以使用Bootstrap占用其父DIV的100％
- 13
如何在div中彼此相邻显示JavaScript列表中的所有项目？
- 14
在布局中将div彼此相邻放置以填充可用空间
- 15
使用CSS将样式按钮彼此相邻
- 16
使ImageView占用所有可用的垂直空间并增加宽度以在RelativeLayout中按比例放大/缩小
- 17
使ImageView占用所有可用的垂直空间并增加宽度以在RelativeLayout中按比例放大/缩小
- 18
将项目彼此相邻，没有任何空间
- 19
2 div彼此相邻
- 20
多个DIV彼此相邻
- 21
胶水div彼此相邻
- 22
ListView占用了所有屏幕空间
- 23
mergeChangesFromContextDidSaveNotification占用所有空间
- 24
使输入占用所有剩余空间
- 25
ListView占用了所有屏幕空间
- 26
我试图使用带有按钮的figcaption将图像放置在彼此相邻的HTML和CSS旁边
- 27
CSS：为什么这个标签会占用所有可用空间
- 28
CSS：使列表中的所有<li>宽度相同，并占用100％的可用空间
- 29
CSS：使列表中的所有<li>宽度相同，并占用100％的可用空间
我来说两句