很多人会使用boot的栅格化布局，但是高度却不知道怎么等比例控制，本文就详细介绍使用bootstrap框架构建前端页面时如何控制元素高度自适应布局。
项目空间文档集
记录散人IT技术管理经营学习使用研究,探索,总结,生活感悟
bootstrap栅格系统的div高度怎样定？
文章摘要: height:0px; padding-bottom:100% 自己刚好也碰到这个需求了，做响应式布局的时候，当图片完全加载之前想把高度给固定。百思不得其解，都打算让js出马了。 后来看了下手淘的布局 img外层的a标签的样式 padding: 50% 0; height: 0; 完美的撑起一个固定的高度
时间:2017-05-17 09:59来源:未知 作者:admin 点击: 次
文章TAG: bootstrap
height:0px;
padding-bottom:100%
自己刚好也碰到这个需求了，做响应式布局的时候，当图片完全加载之前想把高度给固定。百思不得其解，都打算让js出马了。
后来看了下手淘的布局
img外层的a标签的样式
padding: 50% 0;
height: 0;
完美的撑起一个固定的高度。
和楼上有人回答的padding-bottom:100%;原理一样;
后来看了下手淘的布局
img外层的a标签的样式
padding: 50% 0;
height: 0;
完美的撑起一个固定的高度。
和楼上有人回答的padding-bottom:100%;原理一样;
作者：谌辉庭
链接：https://www.zhihu.com/question/25745852/answer/111789606
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
===========================
bootstrap元素高度自适应解决方案
听语音
- |
- 浏览：637
- |
- 更新：
方法/步骤
-
首先我们在页面头部引用一段JS
js代码片段如下：
var iScale = 1;
iScale = iScale / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">')
var iWidth = document.documentElement.clientWidth;
document.getElementsByTagName('html')[0].style.fontSize = iWidth / 16 + 'px';
注意：要在文档加载前引入，否则不生效。
当引入成功后就可以看到文档html元素上会出现font-size属性。
-
其次就是css我们要用less撰写，主要是less有计算功能，关于less使用，请参考less官网。
less计算样式代码段：
@s:46.875rem;
@color:~"div[class^='col']";
@{color}{
background: #999;
height: 200/@s;
}
如上代码表示将.color类添加了100像素的高度，那么计算出来，当然200像素就直接200/@s; 就可以了。 变量的值不固定，是动态计算出来的字体大小，值的大小根据实际设计图的尺寸计算。
-
怎么样，是不是很简单的实现了你想要的效果呢？哈哈
|
|