CSS đặt chiều cao dựa trên phần tử khác

Thuộc tính chiều cao và chiều rộng không bao gồm phần đệm, đường viền hoặc lề. Nó đặt chiều cao/chiều rộng của khu vực bên trong phần đệm, đường viền và lề của phần tử

Giá trị chiều cao và chiều rộng CSS

Các thuộc tính height và width có thể có các giá trị sau

• auto - Đây là mặc định. Trình duyệt tính toán chiều cao và chiều rộng
• length - Xác định chiều cao/chiều rộng tính bằng px, cm, v.v.
• height0 - Xác định chiều cao/chiều rộng theo phần trăm của khối chứa
• height1 - Đặt chiều cao/chiều rộng thành giá trị mặc định
• height2 - Chiều cao/chiều rộng sẽ được kế thừa từ giá trị gốc của nó

Ví dụ về chiều cao và chiều rộng CSS

Phần tử này có chiều cao là 200 pixel và chiều rộng là 50%

Ví dụ

Đặt chiều cao và chiều rộng của một

thành phần

div {
  chiều cao. 200px;
  chiều rộng. 50%;
  màu nền. phấn xanh;
}

Tự mình thử »

Phần tử này có chiều cao là 100 pixel và chiều rộng là 500 pixel

Ví dụ

Đặt chiều cao và chiều rộng của cái khác

thành phần

div {
  chiều cao. 100px;
  chiều rộng. 500px;
  màu nền. phấn xanh;
}

Tự mình thử »

Ghi chú. Hãy nhớ rằng các thuộc tính height và width không bao gồm phần đệm, đường viền hoặc lề. Chúng đặt chiều cao/chiều rộng của khu vực bên trong phần đệm, đường viền và lề của phần tử

Đặt chiều rộng tối đa

Thuộc tính max-width được sử dụng để đặt chiều rộng tối đa của phần tử

max-width có thể được chỉ định theo các giá trị độ dài, như px, cm, v.v. , hoặc theo phần trăm (%) của khối chứa hoặc được đặt thành không (đây là giá trị mặc định. Có nghĩa là không có chiều rộng tối đa)

Vấn đề với

ở trên xảy ra khi cửa sổ trình duyệt nhỏ hơn chiều rộng của phần tử (500px). Trình duyệt sau đó thêm một thanh cuộn ngang vào trang

Thay vào đó, sử dụng max-width, trong tình huống này, sẽ cải thiện khả năng xử lý các cửa sổ nhỏ của trình duyệt

Mẹo. Kéo cửa sổ trình duyệt có chiều rộng nhỏ hơn 500px để thấy sự khác biệt giữa hai div

Phần tử này có chiều cao là 100 pixel và chiều rộng tối đa là 500 pixel

Ghi chú. Nếu vì lý do nào đó bạn sử dụng cả thuộc tính width và thuộc tính max-width trên cùng một phần tử và giá trị của thuộc tính width lớn hơn thuộc tính max-width;

Ban đầu có nghĩa là một công cụ đơn giản để nhóm các thành phần trang, thẻ DIV mang đến cho người thiết kế thêm tính linh hoạt và kiểm soát bố cục khi nó được kết hợp với các thuộc tính Biểu định kiểu xếp tầng (CSS)

• Hướng dẫn định dạng (họ phông chữ, màu sắc, đường viền, v.v. )
• Thuộc tính chiều cao và chiều rộng
• Định vị tuyệt đối

Nhà thiết kế sử dụng DIV để tạo bố cục trang phức tạp mà không cần sử dụng bảng. Thật không may, khi bố cục trở nên phức tạp hơn, các vấn đề về khả năng tương thích của trình duyệt sẽ tăng lên

Các vấn đề về khả năng tương thích với CHIỀU CAO VÀ CHIỀU RỘNG

Hãy xem xét một trong những cách bố trí đơn giản nhất xung quanh. hai cột đặt cạnh nhau. Một cái chứa menu điều hướng và cái kia chứa nội dung trang. Đây có vẻ là ứng cử viên lý tưởng để chuyển đổi từ bố cục dựa trên bảng sang bố cục CSS

Nó có ý nghĩa. cả DIV và bảng đều có thể được lồng vào nhau, có các thuộc tính HEIGHT và WIDTH được đặt, chứa các đường viền, v.v. Tuy nhiên, có một sự khác biệt lớn trong hành vi. Nếu bạn hiểu vấn đề này, bạn sẽ tiết kiệm cho mình rất nhiều thời gian gỡ lỗi bực bội. Ghi lại điều này

Các ô của bảng kéo dài để vừa với nội dung được đặt bên trong chúng, nhưng DIV có thể không

Giống như rất nhiều vấn đề thiết kế gây phiền nhiễu, vấn đề cơ bản không nằm ở chính các quy tắc CSS, mà là cách các trình duyệt chọn diễn giải chúng

Các trình duyệt Mozilla, Netscape và Opera hiểu các giá trị này là các phép đo chính xác và không cho phép các giá trị HEIGHT hoặc WIDTH của DIV vượt quá những gì bạn chỉ định. Vì vậy, nếu bạn đặt các thuộc tính HEIGHT và WIDTH cho DIV, sau đó chèn hình ảnh hoặc văn bản chiếm nhiều dung lượng hơn, màn hình sẽ trở thành một mớ hỗn độn

Internet Explorer dễ tha thứ hơn nhiều. Nó coi các giá trị HEIGHT và WIDTH là các giá trị tối thiểu và mở rộng DIV để chứa tất cả nội dung bạn muốn - giống như một ô của bảng

Ai đúng? . Có vẻ như Explorer đang giúp ích cho bạn, nhưng hãy xem xét kết quả nếu bạn đang sử dụng định vị tuyệt đối để đặt tất cả các thành phần trang. Nếu một DIV hiển thị lớn hơn bạn mong đợi, nội dung quan trọng khác có thể bị ẩn khỏi chế độ xem

So sánh màn hình Explorer và Netscape

Nhìn vào mã HTML bên dưới. Đặc biệt chú ý đến các giá trị HEIGHT và WIDTH trên các lớp và trên các hình ảnh bên trong phần HEAD

Bên trong phần CƠ THỂ

Lưu ý rằng quy tắc CSS đặt RỘNG của DIV điều hướng thành 125px, nhưng chúng tôi đã đặt một hình ảnh bên trong DIV có chiều rộng 163px. Cũng lưu ý các giá trị HEIGHT trên hai DIV. Cả hai đều được đặt thành 75% cửa sổ trình duyệt, nhưng DIV điều hướng có thể cần nhiều chỗ hơn thế

Đây là cách nó hiển thị trong Explorer 6. 0. DIV điều hướng mở rộng sang bên phải để chứa toàn bộ hình ảnh logo Happy Puppy và các mục menu. Lưu ý cách menu DIV cao hơn DIV nội dung

Trong Netscape7. 1, toàn bộ logo Happy Puppy xuất hiện, nhưng chiều rộng DIV điều hướng không kéo dài để phù hợp với nó. Đó là lý do tại sao phần lớn nội dung văn bản DIV ghi đè lên hình ảnh logo. Chiều cao của cả hai DIV được cố định ở mức 75%, do đó, nội dung bổ sung sẽ hết cả hai vào khoảng trắng bên dưới

Không có trang nào trông tuyệt vời như vậy, nhưng phiên bản Explorer ít nhất có thể đọc được

Giải pháp DIV lồng nhau cho Explorer

Phiên bản Explorer dù đẹp hơn nhưng vẫn chưa hoàn hảo. May mắn thay, rất dễ khắc phục - mặc dù đây là giải pháp chỉ dành cho Explorer

Đặt cả hai DIV vào một DIV vùng chứa được đặt thành 100% chiều cao của trang và đặt cả hai DIVS bên trong thành 100%. Chúng sẽ lấp đầy DIV vùng chứa và chiều cao của cả hai sẽ bằng nhau

Thay đổi thuộc tính HEIGHT của cả hai DIV thành 100% và thêm lớp kiểu này vào quy tắc CSS của bạn. . thùng chứa {chiều cao. 100%} và sau đó áp dụng nó cho vùng chứa DIV trong phần CƠ THỂ

Đây là kết quả trong Explorer

Màn hình trong Netscape không thay đổi khi bạn thực hiện việc này, nhưng phiên bản Explorer gần với những gì bạn mong đợi. Nếu bạn chắc chắn rằng tất cả (hoặc ít nhất là đại đa số) khách truy cập của bạn đang sử dụng Explorer, điều này sẽ giải quyết vấn đề của bạn. Đó là một giải pháp bố trí tuyệt vời, không có bảng

Tài sản tràn

Nếu bạn cần một giải pháp đa trình duyệt hơn, có lẽ thuộc tính OVERFLOW là dành cho bạn. Tiêu chuẩn W3C mô tả tình huống như thế này

"Nói chung, nội dung của hộp khối được giới hạn ở các cạnh nội dung của hộp. Trong một số trường hợp nhất định, một hộp có thể bị tràn, nghĩa là nội dung của nó nằm một phần hoặc toàn bộ bên ngoài hộp. "

Thuộc tính OVERFLOW có thể có một trong bốn giá trị khác nhau

• Hiển thị - Nội dung có thể xuất hiện bên ngoài DIV
• Ẩn - Nội dung bổ sung hoàn toàn không hiển thị
• Cuộn - Nội dung không hiển thị bên ngoài DIV, nhưng nội dung hiển thị bằng thanh cuộn
• Tự động - Giá trị này phụ thuộc vào tác nhân người dùng, nhưng thường tạo các thanh cuộn

Việc thêm thuộc tính OVERFLOW vào cả hai DIV sẽ giữ nội dung bên trong các DIV nhưng cũng tạo ra cảm giác "khung" có thể không làm hài lòng cả nhà thiết kế và khách truy cập

Khi chúng tôi thêm "tràn. cuộn" quy tắc CSS sang vùng chứa DIV, chúng tôi nhận được màn hình này trong Netscape 7. 1 và Nhà thám hiểm

Lưu ý thanh cuộn bên phải. Nội dung của phần vùng chứa sẽ cuộn trong khi điều hướng vẫn tĩnh. Nó mang lại cảm giác "đóng khung", nhưng có thể giúp giữ chân khách truy cập nếu bạn có một số trang quá dài

Làm cách nào để đặt chiều cao động trong CSS?

Chiều cao có thể được kế thừa CSS không?

Làm cách nào tôi có thể làm cho Div có cùng chiều cao?