先放上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a {
text-decoration: none;
}
.statement-wrap {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 20px
}
.statement-wrap {
z-index: 1230
}
.statement-wrap::after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 10
}
.statement-wrap .title {
color: #E60012;
font-weight: 700;
text-align: center;
margin-bottom: 1.3em;
font-size: 24px;
}
.statement-wrap .st-btn {
display: inline-block;
width: 160px;
height: 40px;
line-height: 40px;
color: #fff;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
background-color: #E60012;
border-radius: 26px
}
.statement-box {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #fff;
max-width: 870px;
max-height: 800px;
border-radius: 10px;
padding: 2.6em 3.3em;
z-index: 60
}
.statement-box .txt {
display: inline-block
}
.statement {
max-height: 450px;
overflow: auto;/*当超出设定的最大高度时 设置auto会出现滚动条显示所有内容*/
}
.text-center {
text-align: center;
}
.paragraph {
font-size: 16px;
color: #555;
letter-spacing: 1px
}
</style>
<script type="text/javascript">
//窗口高度变化执行
function watchWindowSize() {
var h = document.documentElement.clientHeight; //获取窗口高度 不包括滚动条
var statementDom = document.getElementById("statement") //获取到内容部分
var statementHeight = h - 320 //根据窗口高度设置内容高度 内容高度=窗口高度-周边以及非正文部分 注：320是非正文内容部分的大小，并不是固定写320
statementDom.style.height = statementHeight + 'px' //将高度赋值给元素
}
//加载完毕时执行一次
window.onload = function() {
watchWindowSize()
}
//将事件侦听器函数附加到窗口的resize事件 监听窗口变化
window.addEventListener("resize", watchWindowSize);
</script>
</head>
<body>
<section class="statement-wrap">
<div class="statement-box">
<div class="title">这里放了标题</div>
<div class="txt paragraph statement" id="statement">
<p>这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。</p>
<p>这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。</p>
<p>这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。</p>
<p>这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。</p>
<p>好了，没有内容了。好了，没有内容了。好了，没有内容了。好了，没有内容了。好了，没有内容了。好了，没有内容了。好了，没有内容了。</p>
<p>强调一下！</p>
<p style="text-align: right;"><span style="font-size:14px;">某某某<br />某年某月某日</span></p>
</div>
<div class="text-center">
<a href="javascript:;" class="st-btn">ok</a>
</div>
</div>
</section>
</body>
</html>
原理通过监听窗口的变化来动态获取窗口大小
使用的方法addEventListener()监听window的resize事件
相关方法
//jQuery获取
//获取浏览器显示区域的高度 ：
$(window).height();
//获取浏览器显示区域的宽度 ：
$(window).width();
//获取页面的文档高度 ：
$(document).height();
//获取页面的文档宽度 ：
$(document).width();
//获取滚动条到顶部的垂直高度 ：
$(document).scrollTop();
//获取滚动条到左边的垂直宽度 ：
$(document).scrollLeft();
//计算元素位置和偏移量：
$(id).offset();
//offset方法是一个很有用的方法，它返回包含集合第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
options.relativeTop
//指定相对计算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll
//是否把滚动条计算在内，默认TRUE
options.padding
//是否把padding计算在内，默认false
options.margin
//是否把margin计算在内，默认true
options.border
//是否把边框计算在内，默认true
版权声明：本文为weixin_45406850原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。