html - Div 100% 长度变形 Bootstrap 模式对话框

Question

在我的设计中，我需要在整个屏幕上有 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 94% 高度后主页的样子

我的问题是如何将 div 高度设置为像第一张图片一样横跨整个页面，但又不影响 Bootstrap 对话框模式？

Answer 1

一些想法。

1. 而不是将 94% 高度应用于 <div>将其应用于 .divHeight: 94% 之类的类然后只需添加 class="divHeight"到 <div>你想要受影响。现在你将 94% 应用到所有 <div>在您的网站上。

2. 如果这些绿色条是您网站的背景，为什么不直接使用渐变呢？以下代码适用于说...您的 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);
   }
   

Example