gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 05:37:39 24 4
gpt4 key购买 nike

在我的设计中,我需要在整个屏幕上有 3 个栏,如图所示。我通过这段代码管理了它 Img with 100% div height

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% 高度后主页的样子 Main page broken

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

最佳答案

一些想法。

  1. 而不是将 94% 高度应用于 <div>将其应用于 .divHeight: 94% 之类的类然后只需添加 class="divHeight"<div>你想要受影响。现在你将 94% 应用到所有 <div>在您的网站上。
  2. 如果这些绿色条是您网站的背景,为什么不直接使用渐变呢?以下代码适用于说...您的 bodyhtml元素将实现相同的效果,同时省略了对 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

关于html - Div 100% 长度变形 Bootstrap 模式对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38101163/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com