gpt4 book ai didi

javascript - 制作一个 div 填充页面的其余部分(跨浏览器)

转载 作者:行者123 更新时间:2023-11-28 03:12:24 25 4
gpt4 key购买 nike

我只是想在一些固定的文本下面做一个 div,我希望 div 正好填充页面的高度,我希望它跨浏览器工作......很难相信有多少这样的工作一项自然任务需要。

我试过了 this code , 它通过 jQuery 调整高度。它在 Chrome 中运行良好,但在 Chrome 中运行不完美:如果我们向下滚动,我们可以看到它不会自动恢复到初始位置。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<style>
body {
margin: 0
}
.rb .myME {
background: grey
}
</style>
</head>
<body>
<div class="rb">
<div class="top">1<br/>2<br/>3<br/>4<br/></div>
<div class="myME">abc</div>
</div>
<script>
$(".myME").css({
height: (($(document).height()) - $(".top").height()) + 'px'
})
</script>
</body>
</html>

有没有人有跨浏览器的完美解决方案(CSS 或 jQuery)?

最佳答案

对于旧版和新版浏览器,display:table 属性可以满足您的要求。

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

.rb {
display: table;
width: 100%;
border-collapse: collapse;
}

.top, .myME {
display: table-row;
}

.buffer {
display: table-cell;
}

.top .buffer {
background: lightblue;
}

.myME .buffer {
background: tomato;
height:100%;
}
<div class="rb">
<div class="top">
<div class="buffer">
1<br/>2<br/>3<br/>4<br/>
</div>
</div>
<div class="myME">
<div class="buffer">
abc
</div>
</div>
</div>

.buffer div 是为了确保您的每一行都由一个单元格组成,以避免布局也被拆分成列。

关于javascript - 制作一个 div 填充页面的其余部分(跨浏览器),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45644110/

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