这似乎是一个相当常见且不花哨的用例,但我之前没有碰到它。我设置了一支笔,但不能在那里复制它,而且我要拔掉我的头发试图找出原因。
左侧边栏有一个自定义滚动窗口,用于列出项目,但是虽然设置overflow-y: scroll
给了我一个很好的可滚动列表,但它也创建了一个巨大的空白块,等于列表的高度。如果overflow-y
未设置为滚动,请离开。此空格位于HTML标记之外(因为蓝色背景停止)。所以看起来有高度计算的事情,但我不知道我还能玩什么。
在我的应用中,我尝试在我的内容包装器上评论overflow-y
和display: grid
,并且在执行任何操作时,空白消失。但是我当然需要这两个属性。我需要在某处设置另一个高度吗?
答案 0 :(得分:1)
我终于找到了问题!与绝对定位的元素有关。我正在使用自定义复选框来执行填充方块而不是浏览器的默认值,并且该代码的一部分(我借用和修改)是将input
本身设置为position:absolute
,将其取出正常的流程(因此我的100vh
没有什么区别)。简单地添加top: 0
修复了所有问题。如果有人能解释为什么将top
设置为默认值会对此产生影响,我会很高兴。
HTML(Angular)
<li class="flex justify-between" *ngFor="let error of hardSummary">
<input class="m-checkbox" id="{{'h' + error.errorCode}}" type="checkbox" [(ngModel)]="error.isChecked" (click)="filterByError(error)">
<label for="{{'h' + error.errorCode}}">
{{error.errorCode}}
</label>
<span>{{error.count}}</span>
</li>
<强> SCSS:强>
.m-checkbox {
position: absolute;
opacity: 0; // hide it
top: 0; // <<<<<<< THIS IS ALL THAT I NEEDED TO ADD
& + label {
position: relative;
cursor: pointer;
padding: 0;
}
// Box.
& + label:before {
content: '';
margin-right: 4px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
background: #f4f4f4;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px;
}
// Box hover
&:hover + label:before {
background: #d8d8d8;
}
// Box focus
&:focus + label:before {
border: 1px solid #666;
}
// Box checked
&:checked + label:before {
background: #448aff;
}
// Disabled state label.
&:disabled + label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled + label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked + label:after {
content: '';
position: absolute;
left: 5px;
top: 11px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
transition: all 0.2s;
}
}