CSS kế thừa chiều rộng từ cha mẹ

Đầu năm nay, tôi bắt gặp một câu hỏi trên SOF hỏi làm thế nào một phần tử con là fixed kế thừa chiều rộng của phần tử mẹ của nó. Tôi đã bị sốc khi thấy một giải pháp đề xuất sử dụng inherit đã được bình chọn nhiều lần. Đây không phải là giải pháp đúng. Vì vậy, tôi đã viết một bài báo hơi kỹ thuật về cách tiếp cận nó. Đây là phiên bản dành cho nhà phát triển của câu trả lời đó

Sự thật là, bạn không thể sử dụng inherit một cách đáng tin cậy để thiết lập chiều rộng của phần tử con trong khi nó cố định. Điều này liên quan đến sự hiểu lầm hoặc không hiểu về cách thức hoạt động của fixed

Hiểu cố định

Không giống như

 function toggleFixed () {
      var parentwidth = $(".parent").width();      
      $(".child").toggleClass("fixed").width(parentwidth);        
  }

0, fixed không định vị chính nó từ cha mẹ họ hàng gần nhất của nó. Thay vào đó, fixed vị trí của chính nó so với khung nhìn. Chế độ xem sẽ luôn cố định, đó là lý do tại sao bạn nhận được hiệu ứng mà bạn thực hiện

Điều đó đang được nói, bất cứ khi nào bạn "kế thừa" bất kỳ chiều rộng nào, nó sẽ tương ứng với chế độ xem. Vì vậy, sẽ không tốt cho chúng tôi khi chúng tôi đang cố gắng đặt chiều rộng của phần tử đích thành chiều rộng của phần tử gốc của nó

Tìm hiểu thêm về các hành vi khác nhau của vị trí

Giải pháp nhanh

Bây giờ chúng ta đã hiểu rõ hơn về fixed, đây là hai cách tiếp cận để thực hiện điều này

CSS thuần túy

Chúng tôi có thể sử dụng CSS thuần túy để khắc phục sự cố này, nhưng chúng tôi cần biết trước chiều rộng. Giả sử rằng phần tử cha của nó là

 function toggleFixed () {
      var parentwidth = $(".parent").width();      
      $(".child").toggleClass("fixed").width(parentwidth);        
  }

4

.parent{
    width: 300px;
}

.parent .fixed_child{
    position: fixed;
    width: 300px;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

JS

Giờ đây với các thiết bị di động, chúng tôi không thực sự có điều kiện xa xỉ là đặt chiều rộng, đặc biệt là bất cứ thứ gì trên

 function toggleFixed () {
      var parentwidth = $(".parent").width();      
      $(".child").toggleClass("fixed").width(parentwidth);        
  }

5. Sử dụng tỷ lệ phần trăm cũng sẽ không hoạt động, vì nó sẽ liên quan đến chế độ xem chứ không phải phần tử gốc. Chúng ta có thể sử dụng JS, trong trường hợp này là jQuery để đạt được điều này. Hãy xem xét một hàm sẽ luôn đặt độ rộng của cấp độ gốc tại thời điểm nhất định

 function toggleFixed () {
      var parentwidth = $(".parent").width();      
      $(".child").toggleClass("fixed").width(parentwidth);        
  }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

css

.fixed{
    position:fixed;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Xem trong CodePen

Độ rộng động

Điều đó tốt và bảnh bao, nhưng điều gì xảy ra nếu chiều rộng của cửa sổ thay đổi trong khi người dùng vẫn ở trên trang, thay đổi phần tử gốc bằng phần tử này? . Chúng ta có thể sửa lỗi này bằng trình nghe sự kiện

 function toggleFixed () {
      var parentwidth = $(".parent").width();      
      $(".child").toggleClass("fixed").width(parentwidth);        
  }

6 của jQuery. Trước tiên, chúng ta sẽ cần chia chức năng mà chúng ta đã tạo thành hai

function toggleFixed() {
   adjustWidth();
   $(".child").toggleClass("fixed");
 }

 function adjustWidth() {
   var parentwidth = $(".parent").width();
   $(".child").width(parentwidth);
 }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ chúng tôi đã tách từng phần, chúng tôi có thể gọi chúng riêng lẻ, chúng tôi sẽ bao gồm phương thức nút ban đầu để chuyển đổi cố định và chiều rộng

________số 8_______

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Và bây giờ chúng tôi cũng thêm trình lắng nghe sự kiện thay đổi kích thước vào cửa sổ

 $(window).resize(
     function() {
       adjustWidth();
     })

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Xem trong CodePen

Ở đó. Bây giờ chúng ta có một phần tử cố định có kích thước sẽ được điều chỉnh khi cửa sổ được thay đổi kích thước

Phần kết luận

Chúng tôi đã giải quyết thách thức này bằng cách hiểu rõ vị trí của fixed và những hạn chế của nó. Không giống như Tuyệt đối, fixed chỉ liên quan đến cổng xem và do đó không thể kế thừa chiều rộng của cha mẹ nó

Để giải quyết vấn đề này, chúng ta cần sử dụng một số phép thuật JS, không mất nhiều thời gian với jQuery, để đạt được điều này

Trong một số trường hợp, chúng tôi cần một cách tiếp cận năng động với các thiết bị chia tỷ lệ có độ rộng khác nhau. Một lần nữa, chúng tôi đã sử dụng phương pháp JS

Thí dụ

Đặt chiều rộng của ba

yếu tố

div. một {
bề rộng. Tự động;
biên giới. 1px màu đen đặc;
}

div. b{
bề rộng. 150px;
biên giới. 1px màu đen đặc;
}

div. c {
bề rộng. 50%;
biên giới. 1px màu đen đặc;
}

Tự mình thử »

Thêm các ví dụ "Tự mình thử" bên dưới

---

Định nghĩa và cách sử dụng

Thuộc tính width đặt chiều rộng của phần tử

Chiều rộng của một phần tử không bao gồm phần đệm, đường viền hoặc lề

Ghi chú. Các thuộc tính chiều rộng tối thiểu và chiều rộng tối đa ghi đè lên thuộc tính width

Đưa ra bản chạy thử ❯

---

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính

Độ rộng thuộc tính1. 04. 01. 01. 03. 5

---

---

Cú pháp CSS

bề rộng. Tự động. giá trị. ban đầu. thừa kế;

Giá trị tài sản

---

Thêm ví dụ

Thí dụ

Đặt chiều rộng của một phần tử thành 100px. Tuy nhiên, khi nó được lấy nét, hãy làm cho nó rộng 250px

đầu vào [loại = văn bản] {
bề rộng. 100px;
}

đầu vào [loại = văn bản]. tiêu điểm {
bề rộng. 250px;
}

Tự mình thử »

---

Trang liên quan

hướng dẫn CSS. Chiều cao và chiều rộng CSS

hướng dẫn CSS. Mô hình hộp CSS

tham chiếu CSS. thuộc tính chiều cao

Tham chiếu DOM HTML. thuộc tính chiều rộng

Chiều rộng có được kế thừa trong CSS không?

Làm cách nào để kế thừa CSS từ cha mẹ?

Chiều rộng kế thừa hoạt động như thế nào?

Chiều rộng 100 có giống với chiều rộng 100% không?