Đặt độ rộng của một vị trí trên đỉnh: cố định div div liên quan đến div cha

Tôi đang cố gắng cung cấp cho div (vị trí: cố định) chiều rộng 100% (liên quan đến div cha). Nhưng tôi đã gặp một số vấn đề ...

EDIT: Vấn đề đầu tiên được giải quyết bằng cách sử dụng kế thừa, nhưng nó vẫn không hoạt động. Tôi nghĩ vấn đề là tôi đang sử dụng nhiều div có chiều rộng 100% / kế thừa. Bạn có thể tìm thấy vấn đề thứ hai trên bản cập nhật jsfiddle: http://jsfiddle.net/4bGqF/7/

Ví dụ con cáo

#container {
    width: 800px;
}

#fixed {
    position: fixed;
    width: 100%;
}

và html

<div id="container">
    <div id="fixed">Sitename</div>
    <p>
        blaat
    </p>
</div>

Hoặc bạn có thể dùng thử: http://jsfiddle.net/4bGqF/

Các vấn đề dường như là phần tử cố định luôn lấy chiều rộng của cửa sổ / tài liệu . Có ai biết làm thế nào để sửa lỗi này?

Tôi không thể sửa lỗi phần tử cố định của mình vì tôi đang sử dụng plugin jScrollPane. Nó phụ thuộc vào nội dung có thanh cuộn hay không.

Cảm ơn rất nhiều!

PS: Văn bản của 2 div nằm chồng lên nhau. Đây chỉ là một ví dụ để điều đó không thực sự quan trọng.

Tôi không chắc vấn đề thứ hai là gì (dựa trên chỉnh sửa của bạn), nhưng nếu bạn áp dụng width:inheritcho tất cả các div bên trong, nó hoạt động: http://jsfiddle.net/4bGqF/9/

Bạn có thể muốn xem xét một giải pháp javascript cho các trình duyệt mà bạn cần hỗ trợ và hỗ trợ dont width:inherit

Như nhiều người đã nhận xét, thiết kế đáp ứng rất thường đặt chiều rộng theo%

width:inheritsẽ kế thừa chiều rộng CSS KHÔNG phải chiều rộng được tính toán - Điều đó có nghĩa là vùng chứa con kế thừawidth:100%

Nhưng, tôi nghĩ rằng, hầu như thường xuyên thiết kế đáp ứng max-widthquá, do đó:

#container {
    width:100%;
    max-width:800px;
}
#contained {
    position:fixed;
    width:inherit;
    max-width:inherit;
}

Điều này làm việc rất thỏa mãn để giải quyết vấn đề của tôi về việc làm cho một menu dính bị hạn chế về chiều rộng gốc ban đầu bất cứ khi nào nó bị "kẹt"

Cả cha mẹ và con cái sẽ tuân thủ width:100%nếu khung nhìn nhỏ hơn chiều rộng tối đa. Tương tự như vậy, cả hai sẽ tuân thủ max-width:800pxkhi khung nhìn rộng hơn.

Nó hoạt động với chủ đề đã phản hồi của tôi theo cách tôi có thể thay đổi vùng chứa cha mà không phải thay đổi thành phần con cố định - thanh lịch và linh hoạt

ps: Cá nhân tôi nghĩ rằng không có vấn đề gì khi IE6 / 7 không sử dụng inherit

vị trí cố định là một chút khó khăn (thực sự là không thể), nhưng vị trí: dính đang thực hiện các thủ thuật đẹp mắt:

<div class='container'>
  <header>This is the header</header>
  <section>
    ... long lorem ipsum
  </section>
</div>

body {
  text-align: center;  
}

.container {
  text-align: left;
  max-width: 30%;
  margin: 0 auto;
}


header {
  line-height: 2rem;
  outline: 1px solid red;
  background: #fff;
  padding: 1rem;

  position: sticky;
  top: 0;
}

xem mẫu codepen

Bạn cũng có thể giải quyết nó bằng jQuery:

var new_width = $('#container').width();
$('#fixed').width(new_width); 

Điều này rất hữu ích với tôi vì bố cục của tôi rất nhạy và inheritgiải pháp không hiệu quả với tôi!

Sử dụng CSS này:

#container {
    width: 400px;
    border: 1px solid red;
}

#fixed {
    position: fixed;
    width: inherit;
    border: 1px solid green;
}

Phần tử #fixed sẽ kế thừa chiều rộng cha mẹ của nó, vì vậy nó sẽ là 100%.

Định vị cố định được cho là xác định mọi thứ liên quan đến chế độ xem, vì vậy position:fixedsẽ luôn luôn làm điều đó. position:relativeThay vào đó hãy thử sử dụng div con. (Tôi nhận ra rằng bạn có thể cần định vị cố định vì những lý do khác, nhưng nếu vậy - bạn thực sự không thể làm cho chiều rộng phù hợp với phụ huynh mà không có JS mà không có inherit)

Đây là một hack nhỏ mà chúng tôi đã chạy qua trong khi sửa một số vấn đề vẽ lại trên một ứng dụng lớn.

Sử dụng -webkit-transform: translateZ(0);trên cha mẹ. Tất nhiên điều này là dành riêng cho Chrome.

http://jsfiddle.net/senica/bCQEa/

-webkit-transform: translateZ(0);

Có một giải pháp dễ dàng cho việc này.

Tôi đã sử dụng một vị trí cố định cho div cha và độ rộng tối đa cho nội dung.

Bạn không cần phải suy nghĩ quá nhiều về các container khác vì vị trí cố định chỉ liên quan đến cửa sổ trình duyệt.

       .fixed{
            width:100%;
            position:fixed;
            height:100px;
            background: red;
        }

        .fixed .content{
            max-width: 500px;
            background:blue;
            margin: 0 auto;
            text-align: center;
            padding: 20px 0;
        }

<div class="fixed">
  <div class="content">
     This is my content
  </div>
</div>

Giải pháp này đáp ứng các tiêu chí sau

1. Tỷ lệ phần trăm được phép trên cha mẹ
2. Hoạt động sau khi thay đổi kích thước cửa sổ
3. Nội dung bên dưới tiêu đề không bao giờ có thể truy cập được

Theo như tôi biết, tiêu chí này không thể được đáp ứng nếu không có Javascript (thật không may).

Giải pháp này sử dụng jQuery, nhưng cũng có thể dễ dàng chuyển đổi sang vanilla JS:

function fixedHeader(){
  $(this).width($("#wrapper").width());
  $("#header-filler").height($("#header-fixed").outerHeight());
}

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

fixedHeader();

#header-fixed{
  position: fixed;
  background-color: white;
  top: 0;
}
#header-filler{
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="header-fixed">
  This is a nifty header! works even when resizing the window causing a line break
</div>
<div id="header-filler"></div>

[start fluff]<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
[end fluff]

</div>

Bạn cần đưa ra cùng một kiểu của phần tử cố định và phần tử cha của nó. Một trong những ví dụ này được tạo ra với chiều rộng tối đa và trong ví dụ khác với phần đệm.

* {
  box-sizing: border-box
}
body {
  margin: 0;
}
.container {
  max-width: 500px;
  height: 100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: lightgray;
}
.content {
  max-width: 500px;
  width: 100%;
  position: fixed;
}
h2 {
  border: 1px dotted black;
  padding: 10px;
}
.container-2 {
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  margin-top: 10px;
  background-color: lightgray;
}
.content-2 {
  width: 100%;
  position: fixed;
  left: 0;
  padding-left: 32px;
  padding-right: 32px;
}

<div class="container">
  <div class="content">
    <h2>container with max widths</h2>
  </div>
</div>

<div class="container-2">
  <div class="content-2">
    <div>
      <h2>container with paddings</h2>
    </div>
  </div>
</div>