Thẻ chiều rộng trong html là gì?

CSS khó nhưng cũng dễ tha thứ. Và sự tha thứ này cho phép chúng tôi tùy ý ném các kiểu vào CSS của mình

Trang của chúng tôi vẫn tải. Không có "sự cố"

Khi nói đến chiều rộng và chiều cao của trang, bạn có biết phải đặt gì trên phần tử HTML không?

Bạn chỉ cần kết hợp các phong cách vào cả hai yếu tố và hy vọng điều tốt nhất?

Nếu bạn làm thế, bạn không đơn độc

Câu trả lời cho những câu hỏi đó không trực quan

Tôi hoàn toàn có lỗi khi áp dụng kiểu cho cả hai phần tử trong quá khứ mà không xem xét chính xác thuộc tính nào sẽ được áp dụng cho phần tử nào. 🤦‍♂️

Không có gì lạ khi thấy các thuộc tính CSS được áp dụng cho cả phần tử HTML và nội dung như thế này

html, body {
     min-height: 100%;
}

Nó có quan trọng không?

Vâng, vâng nó làm

Định nghĩa phong cách trên tạo ra một vấn đề

Đặt chiều cao tối thiểu thành 100% trên cả hai phần tử không cho phép phần tử nội dung lấp đầy trang như bạn mong đợi. Nếu bạn kiểm tra các giá trị kiểu được tính toán trong các công cụ dành cho nhà phát triển, thì phần tử nội dung có chiều cao bằng 0

Trong khi đó, phần tử HTML có chiều cao bằng phần hiển thị của trang trên trình duyệt

Nhìn vào ảnh chụp màn hình sau từ Chrome Dev Tools

Lý do tại sao điều này xảy ra?

Việc sử dụng tỷ lệ phần trăm làm giá trị kích thước yêu cầu phần tử tham chiếu cấp độ gốc để dựa trên tỷ lệ phần trăm đó

Phần tử HTML tham chiếu chế độ xem có giá trị chiều cao bằng với chiều cao chế độ xem hiển thị. Tuy nhiên, chúng tôi chỉ đặt chiều cao tối thiểu cho phần tử HTML. KHÔNG phải là giá trị thuộc tính chiều cao

Do đó, phần tử body không có giá trị chiều cao gốc để tham chiếu khi quyết định 100% bằng bao nhiêu

Và vấn đề có thể bị che giấu

Nếu bạn bắt đầu với đủ nội dung để lấp đầy phần nội dung của trang, bạn có thể không nhận thấy vấn đề này

Và để khó nhận thấy hơn, nếu bạn đặt màu nền cho cả hai thành phần hoặc thậm chí chỉ trên một trong số chúng, chế độ xem sẽ có đầy đủ màu đó. Điều này tạo ấn tượng rằng phần tử cơ thể cao bằng khung nhìn

Nó không thể. Nó vẫn ở mức không

Hình ảnh trên được lấy từ một trang có CSS ​​sau

html, body {
    min-height: 100%;
}
body { background-color: dodgerblue; }

Kế thừa ngược?

Trong một khuynh hướng kỳ lạ, phần tử HTML giả định màu nền của phần tử nội dung nếu bạn không đặt màu nền riêng cho phần tử html

Vì vậy, Cài đặt chiều cao lý tưởng cho một trang đáp ứng đầy đủ là gì?

Trong nhiều năm, câu trả lời là như sau

html {
    height: 100%;
}
body {
    min-height: 100%;
}

Điều này cho phép phần tử HTML tham chiếu chế độ xem chính và có giá trị chiều cao bằng 100% giá trị chế độ xem

Với phần tử HTML nhận giá trị chiều cao, giá trị chiều cao tối thiểu được gán cho phần tử nội dung sẽ cung cấp cho nó chiều cao ban đầu khớp với phần tử HTML

Điều này cũng cho phép nội dung phát triển cao hơn nếu nội dung phát triển vượt xa trang hiển thị

Hạn chế duy nhất là phần tử HTML không phát triển vượt quá chiều cao của chế độ xem hiển thị. Tuy nhiên, việc cho phép phần tử nội dung lớn hơn phần tử HTML đã được coi là chấp nhận được

Giải pháp hiện đại được đơn giản hóa

body { min-height: 100vh; }

Ví dụ này sử dụng đơn vị vh (chiều cao khung nhìn) để cho phép phần thân đặt giá trị chiều cao tối thiểu dựa trên toàn bộ chiều cao của khung nhìn

Giống như màu nền đã thảo luận trước đó, nếu chúng ta không đặt giá trị chiều cao cho phần tử HTML, thì nó sẽ lấy cùng một giá trị cho chiều cao được cấp cho phần tử body

Do đó, giải pháp này tránh tràn phần tử HTML có trong giải pháp trước đó và cả hai phần tử đều phát triển cùng với nội dung của bạn

Trước đây, việc sử dụng các đơn vị vh đã gây ra một số sự cố với trình duyệt di động nhưng có vẻ như Chrome và Safari hiện đã nhất quán với các đơn vị khung nhìn

Chiều cao trang có thể gây ra thanh cuộn ngang

Đợi đã, cái gì?

Điều này không nên nói "Chiều rộng trang"?

Không

Trong một chuỗi sự kiện kỳ ​​lạ khác, chiều cao trang của bạn có thể kích hoạt thanh cuộn ngang trong trình duyệt của bạn

Khi nội dung trang của bạn cao hơn chiều cao của khung nhìn, thanh cuộn dọc ở bên phải được kích hoạt. Điều này cũng có thể khiến trang của bạn ngay lập tức có thanh cuộn ngang

Vậy cách khắc phục là gì?

Bạn có thể ngủ ngon hơn khi biết nó bắt đầu bằng cài đặt độ rộng trang

Sự cố này phát sinh khi bất kỳ phần tử nào - không chỉ HTML hoặc phần tử nội dung - được đặt thành đơn vị 100vw (chiều rộng khung nhìn)

Các đơn vị khung nhìn không chiếm khoảng 10 pixel mà thanh cuộn dọc chiếm

Do đó, khi kích hoạt thanh cuộn dọc, bạn cũng nhận được thanh cuộn ngang

Cách đặt trang cho toàn bộ chiều rộng

Có lẽ chỉ cần không

Không đặt chiều rộng trên HTML và các phần tử nội dung sẽ mặc định ở kích thước đầy đủ của màn hình. Nếu bạn đặt giá trị chiều rộng khác với giá trị tự động, trước tiên hãy cân nhắc sử dụng thiết lập lại CSS

Hãy nhớ rằng, theo mặc định, phần tử body có 8px lề ở tất cả các cạnh

Đặt lại CSS sẽ loại bỏ điều này. Mặt khác, đặt chiều rộng thành 100% trước khi xóa lề sẽ khiến phần tử nội dung bị tràn. Đây là thiết lập lại CSS tôi sử dụng

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Cách đặt chiều rộng theo sở thích của bạn

Mặc dù không phải lúc nào cũng cần đặt chiều rộng, nhưng tôi thường làm

Nó có thể chỉ đơn giản là một thói quen

Nếu bạn đặt chiều rộng thành 100% trên phần tử nội dung, bạn sẽ có toàn bộ chiều rộng trang. Điều này về cơ bản tương đương với việc không đặt giá trị chiều rộng và cho phép giá trị mặc định

Nếu bạn muốn sử dụng phần tử nội dung làm vùng chứa nhỏ hơn và để phần tử HTML lấp đầy trang, bạn có thể đặt giá trị độ rộng tối đa cho phần nội dung

Đây là một ví dụ

html { background-color: #000; } 
body {
    min-height: 100vh;
    max-width: 400px;
    background-color: papayawhip; 
    margin: 0 auto;
}

Phần kết luận

Không có giá trị chiều cao được cung cấp cho phần tử HTML, việc đặt chiều cao và/hoặc chiều cao tối thiểu của phần tử nội dung thành 100% sẽ không có chiều cao (trước khi bạn thêm nội dung)

Tuy nhiên, không có giá trị chiều rộng được cung cấp cho phần tử HTML, việc đặt chiều rộng của phần tử nội dung thành 100% dẫn đến chiều rộng toàn trang

Điều này có thể phản trực giác và khó hiểu

Để có chiều cao toàn trang đáp ứng, hãy đặt chiều cao tối thiểu của phần tử cơ thể thành 100vh

Nếu bạn đặt chiều rộng trang, hãy chọn 100% trên 100vw để tránh các thanh cuộn ngang bất ngờ

Tôi sẽ để lại cho bạn một hướng dẫn từ kênh YouTube của tôi trình bày cài đặt chiều cao và chiều rộng CSS cho trang HTML có kích thước toàn màn hình và phát triển cùng với nội dung chứa trong đó

Bạn có cách nào khác để đặt chiều rộng và chiều cao CSS mà bạn thích không?

Hãy cho tôi biết phương pháp của bạn

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

dave xám

Xin chào, tôi hiện đang làm bằng tiến sĩ về Hệ thống thông tin. Đồng thời là Kiến trúc sư & Nhà phát triển giải pháp toàn thời gian. "Phấn đấu cho sự tiến bộ, không phải sự hoàn hảo. " Theo dõi tôi trên Twitter. @yesdavidgray

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Chiều rộng 100% có nghĩa là gì trong HTML?

Chiều rộng của một phần tử là gì?

Chiều rộng có nghĩa là gì trong CSS?