Vì vậy, bạn đang viết nội dung vào một trang có cột ở giữa được xác định và muốn thêm một phần tử nằm ngang chạy dọc theo chiều rộng màn hình — làm cách nào để bạn ngắt ra bên ngoài div nội dung của cột ở giữa?
Tôi đã gặp vấn đề này khi xây dựng một trang cho trang web này. Thực hiện bước hợp lý tiếp theo - Tôi đã tìm kiếm trên internet một bài đăng trên blog giải thích cách khắc phục sự cố này nhưng không tìm thấy gì. Sau khi từ bỏ việc tìm kiếm của mình, tôi bắt đầu sáng tạo và nghĩ ra một giải pháp khá hay, vì vậy tôi nghĩ rằng mình sẽ ghi lại nó ở đây với hy vọng hỗ trợ các thế hệ nhà phát triển đang hoang mang trong tương lai
Không có gì. ]
Hiệu trưởng cần thiết
- Đặt thuộc tính tràn cho khu vực nội dung chính [chiều rộng toàn màn hình] thành ẩn để dừng cuộn ngang
- Đặt thuộc tính tràn cho div nội dung bên trong [bên trong chứa div] thành auto để làm cho nội dung hiển thị chiều cao bên trong div chứa
- Đặt chiều rộng của div toàn chiều rộng của bạn thành bội số của div cột trung tâm chứa [i. e. 500%] và lề trái là -50% của chiều rộng đó trừ đi 100% [i. e. -200%]
Hướng dẫn
- Trước tiên, hãy đặt chiều rộng của div vùng chứa nội dung mở rộng thành 500%. Thao tác này sẽ làm cho div mà bạn đang cố gắng mở rộng rộng hơn 5 lần so với cột trung tâm mà nó nằm bên trong. Điều này có thể được điều chỉnh lên hoặc xuống tùy thuộc vào kích thước của cột trung tâm mà bạn đang làm việc.
- Bước hai là đặt lề trái của cùng div vùng chứa đó thành -200%. Thao tác này sẽ căn giữa div nội dung mở rộng đó và làm cho nó trông giống như nó phù hợp với phần còn lại của cột nội dung chính ở giữa. Nếu bạn điều chỉnh toàn bộ chiều rộng được đề cập ở trên, hãy đảm bảo rằng bạn điều chỉnh lề trái này bằng -[[width - 100%]/2]
- Bước tiếp theo là loại bỏ cuộn ngang xảy ra bởi vì bây giờ chúng ta có div nội dung mở rộng 200% cả bên trái và bên phải bên ngoài cột nội dung trung tâm. Chúng tôi có thể đạt được điều này bằng cách đặt thuộc tính tràn của div vùng chứa chiều rộng toàn trang [toàn bộ chiều rộng của trang] thành ẩn. Thao tác này sẽ ẩn nội dung tràn sang trái và phải vượt quá chiều rộng toàn trang và loại bỏ cuộn ngang không mong muốn của chúng tôi
Một div con bên trong một thùng chứa có thể được tạo để lấy toàn bộ chiều rộng và chiều cao của div cha. Có hai phương pháp để kéo dài div cho vừa với vùng chứa bằng CSS sẽ được thảo luận bên dưới
Phương pháp 1. Phương pháp đầu tiên là chỉ cần gán 100% chiều rộng và 100% chiều cao cho div con để nó chiếm tất cả không gian có sẵn của div cha
Xem xét HTML này để trình diễn
HTML