gpt4 book ai didi

html - 调整浏览器大小时高度 100% 无法正常工作

转载 作者:行者123 更新时间:2023-11-28 18:29:16 24 4
gpt4 key购买 nike

我在使用 height 时遇到问题。我在我的页面中使用了 height:100% 作为 div。我为此设置了背景颜色。当浏览器最大化时它工作正常。但是当它调整大小时,我的 div 没有正确呈现。

我的问题是,当我调整浏览器窗口大小时,我的 div 会出现一个滚动条,但不会为我的整个 div 呈现背景颜色。它仅针对我在调整窗口大小时看到的部分进行渲染。

我的风格课

html,body{height:100%;} 
.rightDiv{ height:100%;width: 39%;background: #3F5D91;float: right;color: #F0F0F0;}

请帮我解决这个问题。

提前致谢。

最佳答案

我已经使用本地 html 文件对此进行了测试:

<!DOCTYPE html>
<html>
<head>
<style>
html,body{height:100%;}
.rightDiv{height:100%;width: 39%;background: #3F5D91;float: right;color: #F0F0F0;}
</style>
</head>
<body>
<div class="rightDiv">Hello</div>
</body>
</html>

在 Firefox 18.0.2/Windows7 上,我看到右侧的 div,颜色为蓝色,全屏或调整大小时我看到滚动条。

滚动会显示 div 的其余部分,背景颜色完好无损,所以我无法解释您为什么会看到这种情况。

但是,我想知道您是否真的想看到滚动条。将元素设置为 100% 通常意味着您只希望它填充视口(viewport),而不是溢出。
如果是这种情况,那么您需要删除浏览器应用于包含您的 div 的元素的任何默认边距,例如 body 。设置:

 html,body{margin:0; height:100%;}

将使 div 合适。

顺便说一句,像 CodePen 这样的网站和 JSFiddle提供应用重置样式表的选项,如 NormalizeReset ,当你创建一个新的笔/ fiddle 时,你应该注意这些被预先选择(JSFiddle 为 Normalize 做这个)。

关于html - 调整浏览器大小时高度 100% 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14807255/

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