在我的设计中,我需要在整个屏幕上有 3 个栏,如图所示。我通过这段代码管理了它
div {height:94%;}
#yellowDiv {height:100%;}
#lightGreenDiv {height:100%;}
#darkGreenDiv{height:100%;}
body, html { height:100% }
在我放置 bootstrap modal 之前,它一直很有效。由于 div 94%,它使 Bootstrap 对话框变形,如下图所示:
现在,当我删除 94% 的 div 长度时, Bootstrap 模式不会变形,元素不会超出边界,但我的主页设计已损坏。
删除 div 高度 94% 后模态窗体的外观
我的问题是如何将 div 高度设置为像第一张图片一样横跨整个页面,但又不影响 Bootstrap 对话框模式?
最佳答案
一些想法。
- 而不是将 94% 高度应用于
<div>
将其应用于.divHeight: 94%
之类的类然后只需添加class="divHeight"
到<div>
你想要受影响。现在你将 94% 应用到所有<div>
在您的网站上。 如果这些绿色条是您网站的背景,为什么不直接使用渐变呢?以下代码适用于说...您的
body
或html
元素将实现相同的效果,同时省略了对 3<div>
的需要。完全元素(当然要考虑浏览器兼容性):.gradient-bg { background: rgba(196, 224, 97, 1); background: -moz-linear-gradient(left, rgba(196, 224, 97, 1) 0%, rgba(196, 224, 97, 1) 33%, rgba(110, 178, 87, 1) 33%, rgba(110, 178, 87, 1) 66%, rgba(0, 155, 67, 1) 66%, rgba(0, 155, 67, 1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(196, 224, 97, 1)), color-stop(33%, rgba(196, 224, 97, 1)), color-stop(33%, rgba(110, 178, 87, 1)), color-stop(66%, rgba(110, 178, 87, 1)), color-stop(66%, rgba(0, 155, 67, 1)), color-stop(100%, rgba(0, 155, 67, 1))); background: -webkit-linear-gradient(left, rgba(196, 224, 97, 1) 0%, rgba(196, 224, 97, 1) 33%, rgba(110, 178, 87, 1) 33%, rgba(110, 178, 87, 1) 66%, rgba(0, 155, 67, 1) 66%, rgba(0, 155, 67, 1) 100%); background: -o-linear-gradient(left, rgba(196, 224, 97, 1) 0%, rgba(196, 224, 97, 1) 33%, rgba(110, 178, 87, 1) 33%, rgba(110, 178, 87, 1) 66%, rgba(0, 155, 67, 1) 66%, rgba(0, 155, 67, 1) 100%); background: -ms-linear-gradient(left, rgba(196, 224, 97, 1) 0%, rgba(196, 224, 97, 1) 33%, rgba(110, 178, 87, 1) 33%, rgba(110, 178, 87, 1) 66%, rgba(0, 155, 67, 1) 66%, rgba(0, 155, 67, 1) 100%); background: linear-gradient(to right, rgba(196, 224, 97, 1) 0%, rgba(196, 224, 97, 1) 33%, rgba(110, 178, 87, 1) 33%, rgba(110, 178, 87, 1) 66%, rgba(0, 155, 67, 1) 66%, rgba(0, 155, 67, 1) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#c4e061', endColorstr='#009b43', GradientType=1); }
关于html - Div 100% 长度变形 Bootstrap 模式对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38101163/