自适应CSS，列设置为100％高度
杰弗里
设置垂直列页面布局，并在html / css中想知道您对最佳方法的想法是什么。以下是一些html和css入门代码，但是我正在寻找有关使列以100％高度并排排列的帮助吗？这也是全屏（宽度）响应式流体布局，左侧导航列上的宽度固定。
概括地说......我编码这与左柱脱落越小浏览器窗口获取。
全萤幕检视
纵向视图
手机视图
的HTML
<body>
<nav role="navigation">
nav
</nav>
<main role="site">
<article role="nav">
list
</article>
<article role="main">
content
</article>
</main>
</body>
的CSS
nav[role=navigation]{
background-color: #aaa;
height: 100%;
width: 18em;
}
main{
width: 100%;
}
article[role=nav]{
background-color: #ddd;
height: 100%;
}
article[role=main]{
background-color: #efefef;
height: 100%;
}
杰弗里
我能够使它正常工作，以便每个垂直列都可以拥有自己的垂直溢出滚动条，并且这些列都可以浮动（以便可以使用html轻松地添加它们）。响应部分不在演示中。
谢谢大家的意见/建议/想法！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
自适应将宽度和高度设置为80％
- 2
CSS：自适应背景图像的高度
- 3
如何使用CSS将列设置为100％在体内的高度
- 4
容器应仅针对自适应设计CSS自动调整为背景图像的高度
- 5
高度自适应容器
- 6
设置Adsense自适应广告单元的最大高度
- 7
自适应iframe上的Div高度为0px
- 8
CSS 100vh未将div设置为100％高度
- 9
自适应数字标牌（高度）
- 10
自适应网页-设计高度
- 11
自适应/等于div高度
- 12
自适应iframe高度不足
- 13
如何使用BEM方法为自适应网页构造CSS？
- 14
带有标题，100％宽度和自定义高度的自适应图像滑块
- 15
自适应Google Maps v3-无法获得100％的高度
- 16
CSS帮助-屏幕变小，自适应2列变为单列
- 17
CSS自适应文本内容
- 18
自适应旋转词CSS
- 19
如何将这个自适应html5视频标头重写为较小的高度？
- 20
修复自适应网页中的DIV高度
- 21
高度不同的自适应图像库-如何使用CSS（或jquery）实现此功能
- 22
将div高度设置为窗口高度（对于CSS不是100％）
- 23
在实际设置高度之前，相对div的高度为100％：100％
- 24
将弹性项目设置为100％高度
- 25
将内容高度设置为身高的100％
- 26
如何设置自适应多行UILabel文本？
- 27
从图像设置自适应平铺背景
- 28
如何在纯css中将大列的高度设置为等于小列的高度？
- 29
设置高度100％，但CSS div不会扩展
我来说两句