给body设置高度


今天做一个小demo,需要给body设置高度为100%,然鹅发现只设置body的height不可行,需,html,body{height:100%;}
为何呢?
一个容器的height是从上一级继承而来的,html{height:100%}中设置的html的高度是相对于浏览器来说,而body中的高度又从html中继承,指的是页面的高度。

在查资料时,也发现比较有趣的一点:
当html标签无背景样式时,body的背景色其实不是body标签的背景色,而是浏览器的。
一旦html标签含有背景色,则body的背景色变成了正常的body标签自己的背景色,而此时的html标签最顶级,背景色被浏览器获取,成为浏览器的背景色。
简单的说就是,html优先于body标签,浏览器按html>body的顺序提取其设置的背景样式作为浏览器的背景,也就是用户能看到的背景。

转载于:https://www.cnblogs.com/MelodysBlog/p/10449326.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Bootstrap 3 的模态框中,可以通过 JavaScript 动态设置 modal-body高度。具体的实现方法如下: 1. 首先,为 modal-body 设置一个固定的最大高度,例如: ``` .modal-body { max-height: 400px; overflow-y: auto; } ``` 这里设置了最大高度为 400px,当 modal-body 的内容超过 400px 时,modal-body 就会出现滚动条。 2. 在 JavaScript 中获取 modal-body高度和模态框的高度,然后计算出 modal-body 的实际高度,例如: ``` var modalBody = document.querySelector('.modal-body'); var modalDialog = document.querySelector('.modal-dialog'); var modalHeight = modalDialog.clientHeight - 60; // 60 是 modal-body 的 padding-top 和 padding-bottom 之和 var modalBodyHeight = Math.min(modalBody.scrollHeight, modalHeight); ``` 这里首先获取了 modal-body 和 modal-dialog 的元素,然后通过 clientHeight 属性获取了 modal-dialog 的高度,并减去了 modal-body 的 padding-top 和 padding-bottom 的值,得到了 modal-body 可用的高度。然后通过 scrollHeight 属性获取了 modal-body 的内容实际高度,使用 Math.min 方法将这两个高度的较小值作为 modal-body高度。 3. 最后,将计算出来的 modal-body 高度赋值给 modal-body 的样式中: ``` modalBody.style.height = modalBodyHeight + 'px'; ``` 这样就可以动态设置 modal-body高度了。完整的 JavaScript 代码如下: ``` var modalBody = document.querySelector('.modal-body'); var modalDialog = document.querySelector('.modal-dialog'); var modalHeight = modalDialog.clientHeight - 60; var modalBodyHeight = Math.min(modalBody.scrollHeight, modalHeight); modalBody.style.height = modalBodyHeight + 'px'; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值