Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

css - 溢出-y空白空间错误？

In lại Tác giả: Walker 123 更新时间：2023-11-28 15:13:30 28 4
mua khóa gpt4 Nike

这似乎是一个相当常见且不那么奇特的用例，但我以前没有遇到过。我设置了一支笔，但无法在那里复制它，我正在努力找出原因。

nhập mô tả hình ảnh ở đây

Demo Pen

左侧边栏有一个用于元素列表的自定义滚动窗口，但是虽然设置 tràn-y: cuộn 给了我一个很好的可滚动列表，但它也创建了一个巨大的空白 block ，等于如果 overflow-y 未设置为滚动，左侧列表的高度。这个空白在 HTML 标签之外(因为蓝色背景停止了)。所以看起来高度计算正在发生一些事情，但我只是不知道我还能玩什么。

在我的应用程序中，我尝试在我的内容包装器上同时注释掉 overflow-y Và display: grid，并且在执行任一操作后，空白消失。但是我当然需要这两个属性。我需要在某处设置另一个高度吗？

câu trả lời hay nhất

我终于找到问题了!与绝对定位的元素有关。我正在使用自定义复选框来填充正方形而不是浏览器的默认值，并且该代码的一部分(我借用并修改了)是将 input 本身设置为 vị trí: tuyệt đối 这当然使它脱离了正常流程(因此我的 100vh 没有产生任何影响)。只需添加 top: 0 即可解决所有问题。如果有人能解释为什么将 top 设置为其默认值会有所不同，我会很高兴。

nhập mô tả hình ảnh ở đây

HTML( Angular )


  •

    • SCSS:

    .m-checkbox {
      vị trí: tuyệt đối;
      opacity: 0; // hide it
      top: 0; // <<<<<<< THIS IS ALL THAT I NEEDED TO ADD

      & + label {
        vị trí: tương đối;
        con trỏ: con trỏ;
        phần đệm: 0;
      }

      // Box.
      & + label:before {
        nội dung: '';
        margin-right: 4px;
        hiển thị: khối nội tuyến;
        vertical-align: text-top;
        chiều rộng: 20px;
        chiều cao: 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 {
        bóng hộp: không có;
        background: #ddd;
      }

      // Checkmark. Could be replaced with an image
      &:checked + label:after {
        nội dung: '';
        vị trí: tuyệt đối;
        left: 5px;
        top: 11px;
        nền: màu trắng;
        width: 2px;
        chiều cao: 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;
      }
    }

    关于css - 溢出-y空白空间错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47797609/

    28 4 0
    Đề xuất bài viết: ios - Swift:Map 返回 4 个值作为 2 点之间的距离，为什么？
    Đề xuất bài viết: Javascript转ASP经典函数用于移动设备检测
    Đề xuất bài viết: ios - 如何制作彩色和半透明的导航栏(iOS)？
    Đề xuất bài viết: css - 包含 3 个 div 到 3 列
    Walker 123
    Hồ sơ

    Tôi là một lập trình viên xuất sắc, rất giỏi!

    Nhận phiếu giảm giá taxi Didi miễn phí
    Phiếu giảm giá taxi Didi
    Các bài viết phổ biến trên toàn bộ trang web
    Chứng chỉ ICP Bắc Kinh số 000000
    Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
    Xem sitemap của VNExpress