Menu bị cắt, dùng position

You

menu không nằm trên tag cha khi tag cha có overflow-y: auto, vì sao, cách fix?
GPT

Vấn đề bạn đang đề cập có thể xuất phát từ việc sử dụng thuộc tính overflow-y: auto hoặc các thuộc tính overflow khác trên thẻ cha. Khi thuộc tính overflow được đặt thành auto, scroll, hoặc hidden, mọi nội dung vượt quá kích thước của thẻ cha sẽ bị cắt bỏ hoặc cuộn theo cài đặt.

Để giải quyết vấn đề này, bạn có thể sử dụng thuộc tính position trong CSS để đảm bảo menu hoặc phần tử con khác được định vị chính xác:

  1. Sử dụng position: absolute hoặc position: fixed: Điều này cho phép menu được "thoát khỏi" dòng chảy tài liệu bình thường và không bị ảnh hưởng bởi overflow của thẻ cha. Hãy đảm bảo rằng thẻ cha có position: relative để position: absolute hoạt động đúng.

Dưới đây là ví dụ minh họa:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Example</title>
    <style>
        .parent {
            position: relative; /* Đặt parent ở relative để absolute hoạt động */
            width: 300px;
            height: 200px;
            overflow-y: auto; /* Tạo overflow dọc */
            border: 1px solid black;
        }

        .content {
            height: 400px; /* Nội dung dài hơn chiều cao của thẻ cha */
            background-color: lightgrey;
        }

        .menu {
            position: absolute; /* Định vị tuyệt đối */
            top: 0;
            left: 0;
            width: 100%;
            background-color: #333;
            color: white;
            z-index: 1000; /* Đảm bảo menu nằm trên các phần tử khác */
        }

        .menu a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        .menu a:hover {
            background-color: #111;
        }
    </style>
</head>
<body>

<div class="parent">
    <div class="menu">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </div>
    <div class="content">
        Content goes here
    </div>
</div>

</body>
</html>

Trong ví dụ trên:

  • Thẻ div chứa menu (.menu) được định vị bằng position: absolute, do đó không bị ảnh hưởng bởi thuộc tính overflow-y: auto của thẻ cha (.parent).
  • parent có thuộc tính position: relative, cho phép absolute bên trong nó hoạt động chính xác.

Nếu bạn cần bất kỳ hỗ trợ bổ sung hoặc có yêu cầu cụ thể hơn, hãy cho mình biết!
You

Bị che khuất bởi overflow-y: auto làm thế nào?
GPT

"Dùng position: absolute để thoát."
You

Tính độ cao height: 100vh; trừ cho 50px trong css như thế nào
GPT

Để tính độ cao bằng cách lấy 100% chiều cao của viewport (viewport height - 100vh) trừ đi 50px, bạn có thể sử dụng tính năng calc() trong CSS. Cụ thể, bạn có thể viết như sau:

element {
    height: calc(100vh - 50px);
}

Trong đoạn mã này, element là selector cho phần tử bạn muốn áp dụng chiều cao này. Hàm calc() cho phép bạn thực hiện các phép tính trong CSS, và trong trường hợp này, bạn đang lấy 100% chiều cao của viewport và trừ đi 50px để tính chiều cao của phần tử.
You

50px là độ cao của tag div, làm sao để tính độ cao của nó
GPT

Nếu bạn muốn tính độ cao của một phần tử div, bạn có thể sử dụng JavaScript để lấy giá trị độ cao động của phần tử và sau đó sử dụng nó trong CSS hoặc đặt nó như một giá trị inline.

Dưới đây là cách sử dụng JavaScript để lấy chiều cao của một phần tử và sau đó sử dụng giá trị đó:

<!DOCTYPE html>
<html>
<head>
    <style>
        #target {
            background-color: lightblue;
            /* The height will be set by JavaScript */
        }
    </style>
</head>
<body>

<div id="subtract">This is the div with known height of 50px</div>
<div id="target">This is the target div</div>

<script>
    // Lấy phần tử có height là 50px
    const subtractDiv = document.getElementById('subtract');

    // Lấy chiều cao của phần tử này
    const subtractHeight = subtractDiv.offsetHeight;

    // Tính chiều cao mới cho phần tử target
    const targetHeight = window.innerHeight - subtractHeight;

    // Đặt chiều cao mới này cho phần tử target sử dụng inline style
    const targetDiv = document.getElementById('target');
    targetDiv.style.height = `${targetHeight}px`;
</script>

</body>
</html>

Trong đoạn mã này:

  1. subtractDiv là phần tử mà bạn biết chính xác height của nó (50px).
  2. subtractHeight được lấy bằng cách sử dụng offsetHeight, đây là thuộc tính sẽ trả về chiều cao của phần tử bao gồm cả padding và border.
  3. targetHeight là chiều cao mà bạn muốn tính cho phần tử target, bằng cách lấy chiều cao của viewport (window.innerHeight) trừ đi chiều cao của phần tử subtractDiv.
  4. Cuối cùng, chiều cao đã tính (targetHeight) được đặt trực tiếp vào phần tử targetDiv bằng cách sử dụng inline style.

Hãy chắc chắn rằng bạn chạy đoạn mã này sau khi HTML đã được tải đầy đủ để đảm bảo rằng các phần tử đã tồn tại và có thể được tính toán kích thước chính xác. Điều này thường được thực hiện bằng cách đặt script ở cuối body hoặc sử dụng sự kiện DOMContentLoaded như sau:

document.addEventListener('DOMContentLoaded', (event) => {
    // Your code here
});