Một câu hỏi thường gặp trong thiết kế trang web là "làm thế nào để bạn thiết lập chiều cao của một phần tử đến 100%"?
Điều này có vẻ như một câu trả lời dễ dàng. Bạn chỉ cần sử dụng CSS để đặt chiều cao của phần tử là 100%, nhưng điều này không phải lúc nào cũng kéo dài phần tử đó để vừa với toàn bộ cửa sổ trình duyệt. Hãy tìm hiểu lý do tại sao điều này xảy ra và những gì bạn có thể làm để đạt được phong cách trực quan này.
Điểm ảnh và phần trăm
Khi bạn xác định chiều cao của phần tử bằng thuộc tính CSS và giá trị sử dụng pixel, phần tử đó sẽ chiếm nhiều không gian dọc trong trình duyệt.
Ví dụ, một đoạn có chiều cao: 100px; sẽ chiếm 100 pixel không gian dọc trong thiết kế của bạn.Không quan trọng cửa sổ trình duyệt của bạn lớn hơn bao nhiêu, phần tử này sẽ có chiều cao là 100 pixel.
Tỷ lệ phần trăm hoạt động khác với pixel. Theo thông số W3C, chiều cao phần trăm được tính theo chiều cao của container. Vì vậy, nếu bạn đặt một đoạn văn có chiều cao: 50%; bên trong một div có chiều cao là 100px, đoạn văn sẽ có chiều cao 50 pixel, là 50% của phần tử gốc của nó.
Tại sao Tỷ lệ phần trăm không thành công
Nếu bạn đang thiết kế một trang web và bạn có một cột mà bạn muốn chiếm toàn bộ chiều cao của cửa sổ, thì độ nghiêng tự nhiên là thêm chiều cao: 100%; với yếu tố đó. Sau khi tất cả, nếu bạn đặt chiều rộng thành chiều rộng: 100%; phần tử sẽ chiếm toàn bộ không gian ngang của trang, vì vậy chiều cao sẽ hoạt động giống nhau, phải không? Thật không may, đây không phải là trường hợp nào cả.
Để hiểu tại sao điều này xảy ra, bạn phải hiểu cách trình duyệt giải thích chiều cao và chiều rộng. Trình duyệt web tính toán tổng chiều rộng có sẵn như là một chức năng của cửa sổ trình duyệt mở rộng như thế nào. Nếu bạn không đặt bất kỳ giá trị độ rộng nào trên tài liệu của mình, trình duyệt sẽ tự động lưu nội dung để lấp đầy toàn bộ chiều rộng của cửa sổ (chiều rộng 100% là mặc định).
Giá trị chiều cao được tính khác với chiều rộng. Trên thực tế, các trình duyệt không đánh giá chiều cao trừ khi nội dung quá dài để nó đi ra ngoài khung nhìn (do đó yêu cầu thanh cuộn) hoặc nếu nhà thiết kế web đặt chiều cao tuyệt đối cho một phần tử trên trang. Nếu không, trình duyệt chỉ đơn giản cho phép luồng nội dung trong chiều rộng của khung nhìn cho đến khi nó kết thúc. Chiều cao là không thực sự tính toán ở tất cả.
Các sự cố xảy ra khi bạn đặt chiều cao phần trăm trên một phần tử có phần tử gốc không có độ cao được đặt - nói cách khác, các phần tử gốc có chiều cao mặc định: tự động; . Bạn đang thực sự yêu cầu trình duyệt tính toán chiều cao từ một giá trị không xác định. Do đó sẽ bằng một giá trị null, kết quả là trình duyệt không làm gì cả.
Nếu bạn muốn đặt chiều cao trên các trang web của bạn thành một tỷ lệ phần trăm, bạn phải đặt chiều cao của mỗi phần tử cha của phần tử bạn muốn chiều cao được xác định. Nói cách khác, nếu bạn có một trang như thế này:
Nội dung ở đây
Bạn có thể muốn div và đoạn trong đó có chiều cao 100%, nhưng div đó thực sự có hai phần tử cha:
và. Để xác định chiều cao của div với chiều cao tương đối, bạn cũng phải đặt chiều cao của phần tử nội dung và html.
Vì vậy, bạn sẽ cần phải sử dụng CSS để thiết lập chiều cao không chỉ là div, mà còn cả phần tử body và html. Điều này có thể là một thách thức, vì bạn có thể nhanh chóng bị choáng ngợp với mọi thứ được đặt ở độ cao 100%, chỉ để đạt được hiệu ứng mong muốn này.
Một số điều cần lưu ý khi làm việc với 100% Heights
Bây giờ bạn đã biết cách đặt chiều cao của các phần tử trang thành 100%, có thể thú vị khi ra ngoài và thực hiện điều đó cho tất cả các trang của bạn, nhưng có một số điều bạn nên biết:
- Lề và đệm có thể thêm thanh cuộn nơi bạn không muốn. Một trong những điều khó chịu nhất tôi thấy khi làm việc với chiều cao phần trăm (và chiều rộng) là sau đó phần đệm và lề trên cùng các phần tử đó có thể thêm thanh cuộn vào trang, mặc dù tất cả nội dung hiển thị mà không cần thanh cuộn. Điều này là do chiều cao hoặc chiều rộng của phần tử là điều đầu tiên được tính toán. Sau đó, lề và đệm được thêm vào. Vì vậy, nếu bạn có một phần tử có chiều cao 100% và lề trên cùng và dưới cùng là 10 pixel, thì sẽ có một thanh cuộn cho thêm 20 pixel. Hãy nhớ rằng, mô hình hộp CSS thêm lề, đường viền và đệm vào kích thước của một phần tử, vì vậy 100% với bất kỳ giá trị mô hình hộp nào khác thực sự sẽ lớn hơn 100%.
- Nếu nội dung của bạn chiếm nhiều hơn chiều cao được xác định, nó sẽ ghi đè lên bất kỳ nội dung nào sau đó. Nói cách khác, nếu bạn có thiết kế có cột cao 80% và nội dung bên trong nó sẽ chiếm 100% chiều cao, thêm 20% sẽ tiếp tục bên dưới cột và phá vỡ thiết kế trực quan của trang của bạn. Nếu có nội dung bên dưới cột đó, văn bản sẽ chỉ viết lên trên nó. Tôi thường thấy điều này xảy ra khi một nhà thiết kế web cố gắng tăng chiều cao của một trang và làm cho nó hoạt động hoàn hảo để khởi chạy, nhưng khi nội dung trên trang đó thay đổi trong tương lai, độ cao tuyệt đối của họ sẽ phá vỡ hoàn toàn luồng trang. Điều này đúng gấp đôi khi bạn xây dựng các trang web đáp ứng có chiều rộng và chiều cao phải thay đổi với kích thước của chế độ xem.
Để khắc phục điều này, bạn cũng có thể đặt chiều cao của phần tử. Nếu bạn đặt nó thành tự động, thanh cuộn sẽ xuất hiện nếu cần nhưng sẽ biến mất khi chúng không xuất hiện. Điều đó sửa lỗi ngắt hình ảnh, nhưng nó thêm thanh cuộn nơi bạn có thể không muốn chúng.
Sử dụng đơn vị Viewport
Một cách khác bạn có thể giải quyết thử thách này là thử nghiệm với các đơn vị Viewport CSS. Bằng cách sử dụng đơn vị đo chiều cao của chế độ xem , bạn có thể kích thước các yếu tố để chiếm một chiều cao được xác định của chế độ xem và điều đó sẽ thay đổi khi chế độ xem thay đổi! Đây là một cách tuyệt vời để có được hình ảnh độ cao 100% trên trang nhưng vẫn linh hoạt cho các thiết bị và kích thước màn hình khác nhau.