想要的效果是即使滚动了滚动条，蓝色这一行依然出现在最上面，位置也不变，于是就把蓝色一行的position设置成了fixed（不清楚有没有其他好的方法）
然后根据需求给每个标签设置了不同的宽度，但宽度会随着浏览器的缩放百分比的变化发生溢出现象，蓝色部分会溢出父级元素。如下
设置成absolute，蓝色一行就不会一直出现在顶层了，就会随着滚动条往上走
源码如下
<body class="bd">
<div class="mainDiv">
<div class="bTitle">日志管理</div>
<div class="div-t">
--- 日志列表
</div>
<hr class="bHr1" color="#0c5df4" size="1%">
<div class="div-1">
<div class="sText">应用选择</div>
<select class="selection">
<option class="options">cctv-proxy</option>
</select>
</div>
<div class="divCombine">
<div class="div1-2">
<div class="div1-2-1">
<ul class="ur2">
<div class="div-lit">
<li class="lit" >选择
</li>
</div>
<div> </div>
<div>
<li class="li1"><input type="checkbox" class="cb"></li>
<hr class="hrs" size="1%" color="#b7b7b7">
</hr>
</div>
<div>
<li class="li1"><input type="checkbox" class="cb"></li>
<hr class="hrs" size="1%" color="#b7b7b7">
</hr>
</div>
<div>
<li class="li1"><input type="checkbox" class="cb"></li>
<hr class="hrs" size="1%" color="#b7b7b7">
</hr>
</div>
<div>
<li class="li1"><input type="checkbox" class="cb"></li>
<hr class="hrs" size="1%" color="#b7b7b7">
</hr>
</div>
<div>
<li class="li1"><input type="checkbox" class="cb"></li>
<hr class="hrs" size="1%" color="#b7b7b7">
</hr>
</div>
<div>
<li class="li1"><input type="checkbox" class="cb"></li>
<hr class="hrs" size="1%" color="#b7b7b7">
</hr>
</div>
<div>
<li class="li1"><input type="checkbox" class="cb"></li>
<hr class="hrs" size="1%" color="#b7b7b7">
</hr>
</div>
<div>
<li class="li1"><input type="checkbox" class="cb"></li>
<hr class="hrs" size="1%" color="#b7b7b7">
</hr>
</div>
<div>
<li class="li1"><input type="checkbox" class="cb"></li>
<hr class="hrs" size="1%" color="#b7b7b7">
</hr>
</div>
</ul>
</div>
</div>
<div class="div1-3">
<div class="div1-2-1">
<ul class="ur3">
<div class="div-lit" >
<li class="lit">文件名称</li>
</div>
<div> </div>
<div>
<li class="li1">cctv-proxy.log</li>
<hr class="hrs" size="1%" color="#b7b7b7">
</hr>
</div>
<div>
<li class="li1">cctv-proxy.log.1</li>
<hr class="hrs" size="1%" color="#b7b7b7">
</hr>
</div>
</ul>
</div>
</div>
<div class="div1-4">
<div class="div1-2-1">
<ul class="ur3b">
<div class="div-lit">
<li class="lit" style="width: 10%;">更新时间
</li>
</div>
<div> </div>
<div>
<li class="li1">2022-12-29 12:31:44</li>
<hr class="hrs" size="1%" color="#b7b7b7">
</hr>
</div>
<div>
<li class="li1">2022-12-19 14:51:34</li>
<hr class="hrs" size="1%" color="#b7b7b7">
</hr>
</div>
</ul>
</div>
</div>
<div class="div1-5">
<div class="div1-2-1">
<ul class="ur3c">
<div class="div-lit" >
<li class="lit" style="width: 13%;">文件大小
</li>
</div>
<div> </div>
<div>
<li class="li1"> 3,210KB
</li>
<hr class="hrs" size="1%" color="#b7b7b7">
</hr>
</div>
<div>
<li class="li1">2,540KB
</li>
<hr class="hrs" size="1%" color="#b7b7b7">
</hr>
</div>
</ul>
</div>
</div>
</div>
<div class="div-3">
<div class="div-btn">
<button class="btn">下载</button>
</div>
</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.mainDiv {
width: 100rem;
height: 100rem;
position: fixed;
font-size: 30px;
left: 8%;
}
.bd {
width: 100%;
height: 100%;
}
.bTitle {
position: fixed;
margin-left: 4%;
margin-top: 2%;
font-size: 2.6rem;
}
.div-t {
position: fixed;
margin-left: 16%;
margin-top: 2.7%;
font-size: 2rem;
}
.div-1 {
width: 100%;
height: 4%;
}
.selection {
background: transparent;
position: absolute;
height: 2rem;
width: 15rem;
margin-left: 11rem;
margin-top: 1.25rem;
border: 2px #023dab solid;
}
.sText {
position: absolute;
font-size: 1.6rem;
margin-left: 3.8rem;
margin-top: 1rem;
border-radius: 40%;
}
.div-3 {
width: 100%;
height: 22%;
margin-top: 2%;
}
.div-btn {
margin-left: 32rem;
}
.btn {
width: 10rem;
height: 2.5rem;
display: inline-block;
border: none;
background-color: #4472c4;
color: white;
font-size: 1.3rem;
cursor: pointer;
}
.bHr1 {
margin-top: 8rem;
margin-left: -0.1rem;
}
.divCombine {
position: relative;
width: 75rem;
height: 30rem;
margin-left: 4%;
overflow: scroll;
}
.div1-2 {
height: 100%;
width: 25%;
position: absolute;
}
.div1-3 {
height: 100%;
width: 25%;
position: absolute;
left: 25%;
}
.div-btn {
margin-left: 35%;
width: 100%;
height: 122%;
}
.div1-4 {
height: 100%;
width: 25%;
position: absolute;
left: 50%
}
.div1-5 {
height: 100%;
width: 25%;
position: absolute;
left: 75%;
}
.ur2 {
list-style: none;
line-height: 200%;
width: 25%;
text-align: center;
}
.ur3 {
list-style: none;
line-height: 200%;
margin-left: -75%;
width: 180%;
text-align: center;
}
.ur3b {
list-style: none;
line-height: 200%;
margin-left: 5%;
width: 125%;
text-align: center;
}
.ur3c {
list-style: none;
line-height: 200%;
width: 65%;
margin-left: 30%;
text-align: center;
}
.li1 {
font-size: 1.2rem;
position: relative;
background-color: #ededed;
text-align: center;
}
.lit {
font-size: 1.3rem;
position: absolute;
text-align: center;
background-color: #4472c4;
color: white;
z-index: 99;
}
</style>
