Cách bố cục trung tâm và vấn đề nhảy trang do thanh cuộn

Trong thiết kế web hiện đại, phần lớn các trang web đều sử dụng cách bố cục trung tâm. Điều này có nghĩa là phần nội dung chính của trang sẽ được đặt giữa màn hình bằng cách sử dụng thuộc tính `margin: 0 auto`. Ví dụ, như trang chủ của một số trang thương mại điện tử lớn. Tuy nhiên, phương pháp này có thể gây ra một số vấn đề về trải nghiệm người dùng: 1. Trong các trang thông tin dạng dòng chảy như Weibo, ban đầu chỉ có ít nội dung được tải lên, không có thanh cuộn. Khi thêm nhiều nội dung hơn, thanh cuộn xuất hiện và làm thay đổi kích thước chiều rộng của trang, dẫn đến sự dịch chuyển không mong muốn. 2. Trong các trang có tương tác JavaScript, khi nhấn nút "Xem thêm" và nội dung vượt quá một màn hình, thanh cuộn xuất hiện và làm cho nội dung chính bị dịch chuyển. 3. Các trang có điều hướng ngang ở đầu trang cũng có thể gặp phải vấn đề tương tự. Hiện tại có hai cách giải quyết phổ biến: 1. Sử dụng thuộc tính `overflow-y: scroll` để luôn hiển thị thanh cuộn, nhưng điều này có thể gây khó chịu nếu trang không cần thanh cuộn. 2. Thiết lập cố định chiều cao cho trang, tuy nhiên cách này không linh hoạt đối với các trang có nội dung động. ### Giải pháp sử dụng CSS3 calc và đơn vị vw Một giải pháp tốt hơn là sử dụng CSS3 cùng với tính năng `calc()` và đơn vị `vw`. Dưới đây là ví dụ minh họa:

<style>
.wrapper-outer {
    margin-left: calc(100vw - 100%);
}
</style>

Hoặc:

<style>
.wrapper-outer {
    padding-left: calc(100vw - 100%);
}
</style>

**Lưu ý**: `.wrapper-outer` là lớp bao ngoài của nội dung chính, nếu chưa có thì bạn cần tạo mới. Thuộc tính `calc` hỗ trợ từ IE10 trở lên. Đơn vị `100vw` tương ứng với toàn bộ chiều rộng cửa sổ trình duyệt, bao gồm cả thanh cuộn, trong khi `100%` là chiều rộng thực tế không bao gồm thanh cuộn. Do đó, công thức `calc(100vw - 100%)` sẽ giúp tính toán chiều rộng của thanh cuộn (nếu có). Điều này đảm bảo rằng nội dung chính luôn nằm ở giữa cửa sổ trình duyệt, bất kể có hay không có thanh cuộn. Bạn có thể thử demo này (hỗ trợ từ IE9+): Demo không nhảy trang khi xuất hiện thanh cuộn. Các tiêu đề và hình ảnh trong demo sẽ được giữ nguyên vị trí khi thanh cuộn xuất hiện hoặc biến mất.

Xử lý cho màn hình nhỏ

Dưới đây là đoạn mã bổ sung để xử lý trường hợp màn hình có chiều rộng nhỏ:

@media screen and (min-width: 1150px) {
   .wrapper-outer {
       margin-left: calc(100vw - 100%);
   }
}