React如何给div设置100%背景图

使用内联样式总是失败,最终还是通过单独写css实现了。

要解决几个问题:

1. body为自适应的,所以即使设置body第一个布局div高度为百分比也是无效的,因为div解析上级高度为0,自然div height 100%实际高度也为0。

2. 需要将div的父元素html、body、root根节点设置为100%。

3. body有一定的margin,也就是body默认有margin-top和margin-bottom所以设置100%高度之后body多余的margin值显示不完整,出现下拉滚动条,要想正确显示的话就要对body设置margin为0.

CSS文件内容如下:

html, body, #root{

    height: 100%;

}

body{

    margin: 0;

}

.yourDivClass{
    background-image: url(./img/1.jpg);
    height: 100%;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值