Đặt một div cố định thành 100% chiều rộng của vùng chứa mẹ

Tôi có một trình bao bọc với một số phần đệm, sau đó tôi có một div tương đối nổi với chiều rộng phần trăm (40%).

Bên trong div tương đối nổi, tôi có một div cố định mà tôi muốn có cùng kích thước với mẹ của nó. Tôi hiểu rằng một div cố định bị xóa khỏi luồng tài liệu và như vậy sẽ bỏ qua phần đệm của trình bao bọc.

HTML

<div id="wrapper">
  <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
  </div>
</div>

CSS

body { 
  height: 20000px 
}  
#wrapper {
  padding: 10%;
}  
#wrap { 
  float: left;
  position: relative;
  width: 40%; 
  background: #ccc; 
} 
#fixed { 
  position: fixed;
  width: inherit;
  padding: 0px;
  height: 10px;
  background-color: #333;
}

Đây là fiddle bắt buộc: http://jsfiddle.net/C93mk/489/

Có ai biết một cách để thực hiện điều này?

Tôi đã sửa đổi fiddle để hiển thị chi tiết hơn về những gì tôi đang cố gắng hoàn thành, xin lỗi vì sự nhầm lẫn: http://jsfiddle.net/EVYRE/4/

Bạn có thể sử dụng ký quỹ cho .wrap container thay vì padding cho .wrapper:

body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{ 
    float: left;
    position: relative;
    margin: 10%;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px; 
    height:10px;
    background-color:#333;    
}

jsfiddle

Làm thế nào về điều này ?

$( document ).ready(function() {
    $('#fixed').width($('#wrap').width());
});

Bằng cách sử dụng jquery, bạn có thể đặt bất kỳ loại chiều rộng nào :)

CHỈNH SỬA: Như đã nêu trong phần bình luận, việc sử dụng JQuery chỉ cho hiệu ứng này là vô nghĩa và thậm chí còn phản tác dụng. Tôi đã làm ví dụ này cho những người sử dụng JQuery cho các nội dung khác trên trang của họ và cũng cân nhắc sử dụng nó cho phần này. Tôi xin lỗi vì bất kỳ sự bất tiện nào mà câu trả lời của tôi đã gây ra.

Hãy thử thêm một biến đổi cho cha mẹ (không phải làm bất cứ điều gì, có thể là một bản dịch 0) và đặt chiều rộng cố định của phần con thành 100%

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 40%; 
    background:#ccc; 
    transform: translate(0, 0);
}
#fixed{ 
    position:fixed;
    width:100%;
    padding:0px;
    height:10px;
    background-color:#333;
}

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

Bạn có thể sử dụng định vị tuyệt đối để ghim chân trang vào cơ sở của div mẹ. Tôi cũng đã thêm 10px padding-bottom vào wrap (khớp với chiều cao của footer). Vị trí tuyệt đối là tương đối với div mẹ chứ không phải bên ngoài luồng vì bạn đã cấp cho nó thuộc tính vị trí tương đối.

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    padding-bottom: 10px;
    position: relative;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:absolute;
    width:100%;
    left: 0;
    bottom: 0;
    padding:0px;
    height:10px;
    background-color:#333;

}

http://jsfiddle.net/C93mk/497/

man vùng chứa của bạn bằng 40% chiều rộng của phần tử mẹ

nhưng khi bạn sử dụng vị trí: cố định, chiều rộng dựa trên chiều rộng khung nhìn (tài liệu) ...

nghĩ về việc, tôi nhận ra rằng phần tử mẹ của bạn có 10% khoảng đệm (trái và phải), điều đó có nghĩa là phần tử của bạn có 80% tổng chiều rộng trang. vì vậy phần tử cố định của bạn phải có 40% dựa trên 80% tổng chiều rộng

vì vậy bạn chỉ cần thay đổi lớp #fixed của mình thành

#fixed{ 
    position:fixed;
    width: calc(80% * 0.4);
    height:10px;
    background-color:#333;
}

nếu bạn sử dụng sass, postcss hoặc trình biên dịch css khác, bạn có thể sử dụng các biến để tránh phá vỡ bố cục khi bạn thay đổi giá trị đệm của phần tử mẹ.

đây là bản cập nhật fiddle http://jsfiddle.net/C93mk/2343/

tôi hy vọng nó có ích, trân trọng

Trên jsfiddle cuối cùng của bạn , bạn chỉ bỏ lỡ một điều:

#sidebar_wrap {
  width:40%;
  height:200px;
  background:green;
  float:right;
}
#sidebar {
  width:inherit;
  margin-top:10px;
  background-color:limegreen;
  position:fixed;
  max-width: 240px; /*This is you missed*/
}

Nhưng, làm thế nào điều này sẽ giải quyết vấn đề của bạn? Đơn giản, hãy giải thích lý do tại sao lớn hơn mong đợi trước.

Phần tử cố định #sidebarsẽ sử dụng kích thước chiều rộng cửa sổ làm cơ sở để có kích thước riêng của nó, giống như mọi phần tử cố định khác, khi phần tử này được xác định width:inheritvà #sidebar_wrapcó 40% là giá trị chiều rộng, thì sẽ tính toán window.width * 40%, sau đó khi chiều rộng cửa sổ của bạn lớn hơn .containerchiều rộng, #sidebarsẽ lớn hơn #sidebar_wrap.

Bằng cách này, bạn phải đặt chiều rộng tối đa trong của mình #sidebar_wrap, để ngăn lớn hơn #sidebar_wrap.

Kiểm tra jsfiddle này hiển thị mã đang hoạt động và giải thích rõ hơn cách hoạt động của mã này.

Xóa Padding: 10%;hoặc sử dụng px thay vì phần trăm cho.wrap

xem ví dụ: http://jsfiddle.net/C93mk/493/

HTML:

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

CSS:

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 200px; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px;
    height:10px;
    background-color:#333;

}