Làm cách nào để tạo một div vị trí cố định kế thừa chiều rộng của cha mẹ?

Question

Có cách nào div vị trí cố định có thể thừa hưởng chiều rộng của cha/mẹ không?

Tôi biết chiều rộng cố định là liên quan đến cửa sổ của do đó, mã này không làm việc:

#wrapper{ 
 
     position: relative; 
 
     width:500px; 
 
     height: 20px; 
 
     background-color: blue; 
 
} 
 

 
#header{ 
 
     position: fixed; 
 
     width: 100%; 
 
     height: 20px; 
 
     background-color: rgba(255,0,0,0.5); 
 
}

<div id="wrapper"> 
 
    #wrapper 
 
     <div id="header"> 
 
      #header 
 
     </div> 
 
    </div> 
 

 

Answer 1

Sử dụng giá trị inherit cho thuộc tính width trên bộ chọn #header.

Tại sao này Làm việc

Bằng cách xác định position: fixed tới phần tử #header, vị trí #header yếu tố được tính toán đối với các khung nhìn với theo quy định trong đặc tả CSS2:

http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#positioning-scheme

Tuy nhiên , position: fixed không thay đổi cấu trúc DOM, có nghĩa là các #wrapper phần tử vẫn là phụ huynh của phần tử #header. Là một hệ quả , #header vẫn có thể kế thừa các giá trị thuộc tính từ phần tử gốc của nó, mặc dù vị trí của nó được xác định đối với khung nhìn.

Cũng lưu ý rằng nếu bạn chỉ định giá trị phần trăm cho chiều rộng, phần tử cố định sẽ tính giá trị dựa trên chế độ xem, như được nêu trong đặc tả. Tuy nhiên, điều này không liên quan đến width: inherit, có giá trị của nó từ phần tử gốc chứ không phải khung nhìn.

Xem: http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-width

Ví dụ, nếu bạn thêm color tài sản để #wrapper, nó sẽ được thừa hưởng bởi #header.

Sự khác biệt là giá trị ban đầu/mặc định cho width là auto trong khi color là inherit. Để có được tài sản của cha mẹ với tài sản, bạn cần phải chỉ định width: inherit, không phải width: 100%;

Lưu ý: Có sự phân biệt tinh tế giữa phần tử gốc và khối chứa. Trong hầu hết các trường hợp, cả hai đều giống nhau, nhưng đối với các phần tử định vị cố định, chúng khác nhau.

#wrapper { 
 
    position: relative; 
 
    width: 500px; 
 
    height: 20px; 
 
    background-color: blue; 
 
    color: white; /* for demo */ 
 
} 
 
#header { 
 
    position: fixed; 
 
    width: inherit; 
 
    height: 20px; 
 
    background-color: rgba(255, 0, 0, 0.5); 
 
}

<div id="wrapper"> 
 
    #wrapper 
 
    <div id="header"> 
 
    #header 
 
    </div> 
 
</div>

Answer 2

Thay đổi

#wrapper{ 
    position: relative; 
    width:500px; 
} 

để

#wrapper{ 
    position: absolute; 
    width:500px; 
}