Tetapkan lebar div “Posisi: tetap” relatif terhadap div induk

Saya mencoba memberikan div (posisi: tetap) lebar 100% (terkait dengan div induknya). Tapi saya punya beberapa masalah ...

EDIT: Masalah pertama diatasi dengan menggunakan inherit, tetapi masih tidak berhasil. Saya pikir masalahnya adalah bahwa saya menggunakan beberapa div yang mengambil lebar 100% / inherit. Anda dapat menemukan masalah kedua pada pembaruan jsfiddle: http://jsfiddle.net/4bGqF/7/

Contoh rubah

#container {
    width: 800px;
}

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

dan html

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

Atau Anda dapat mencobanya: http://jsfiddle.net/4bGqF/

Masalahnya tampaknya bahwa elemen tetap selalu mengambil lebar jendela / dokumen . Adakah yang tahu bagaimana cara memperbaikinya?

Saya tidak bisa memperbaiki elemen saya, karena saya menggunakan plugin jScrollPane. Itu tergantung pada konten apakah ada scrollbar atau tidak.

Terima kasih banyak!

PS: Teks dari 2 divs berada di atas satu sama lain. Ini hanya contoh sehingga tidak terlalu penting.

Saya tidak yakin tentang apa masalah kedua (berdasarkan edit Anda), tetapi jika Anda berlaku width:inherituntuk semua div dalam, itu berfungsi: http://jsfiddle.net/4bGqF/9/

Anda mungkin ingin melihat ke dalam solusi javascript untuk browser yang perlu Anda dukung dan yang tidak mendukung width:inherit

Seperti yang dikomentari banyak orang, desain responsif sangat sering menetapkan lebar sebesar%

width:inheritakan mewarisi lebar CSS BUKAN lebar yang dihitung - Yang berarti wadah anak mewarisiwidth:100%

Tapi, saya pikir, desain set responsif hampir sering max-widthjuga, karena itu:

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

Ini bekerja dengan sangat memuaskan untuk memecahkan masalah saya membuat menu lengket dibatasi ke lebar induk asli setiap kali "macet"

Baik induk dan anak akan mematuhi width:100%jika viewport kurang dari lebar maksimum. Demikian juga, keduanya akan mematuhi max-width:800pxsaat viewport lebih luas.

Ini berfungsi dengan tema saya yang sudah responsif sehingga saya dapat mengubah wadah induk tanpa harus juga mengubah elemen anak tetap - elegan dan fleksibel

ps: Saya pribadi berpikir tidak masalah sedikit pun bahwa IE6 / 7 tidak digunakan inherit

posisi tetap agak sulit (memang tidak mungkin), tetapi posisi: lengket melakukan trik dengan indah:

<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;
}

lihat sampel codepen

Anda juga dapat menyelesaikannya dengan jQuery:

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

Ini sangat membantu saya karena tata letak saya responsif, dan inheritsolusinya tidak bekerja dengan saya!

Gunakan CSS ini:

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

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

Elemen #fixed akan mewarisi lebar induknya, jadi itu akan menjadi 100% dari itu.

Fixed positioning seharusnya mendefinisikan segala sesuatu yang berhubungan dengan viewport, jadi position:fixedakan selalu melakukan itu. Coba gunakan position:relativepada div anak sebagai gantinya. (Saya sadar Anda mungkin memerlukan penentuan posisi tetap karena alasan lain, tetapi jika demikian - Anda tidak dapat benar-benar membuat lebarnya sesuai dengan orang tua tanpa JS inherit).

Berikut adalah sedikit retasan yang kami temui sambil memperbaiki beberapa masalah redraw pada aplikasi besar.

Gunakan -webkit-transform: translateZ(0);pada orang tua. Tentu saja ini khusus untuk Chrome.

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

-webkit-transform: translateZ(0);

Ada solusi mudah untuk ini.

Saya telah menggunakan posisi tetap untuk div induk dan max-width untuk isinya.

Anda tidak perlu terlalu memikirkan wadah lain karena posisi tetap hanya relatif terhadap jendela peramban.

       .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>

Solusi ini memenuhi kriteria berikut

1. Lebar persentase diizinkan pada induk
2. Bekerja setelah mengubah ukuran jendela
3. Konten di bawah tajuk tidak pernah dapat diakses

Sejauh yang saya ketahui, kriteria ini tidak dapat dipenuhi tanpa Javascript (sayangnya).

Solusi ini menggunakan jQuery, tetapi juga dapat dengan mudah dikonversi ke 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>

Anda perlu memberikan gaya yang sama dari elemen tetap dan elemen induknya. Salah satu contoh ini dibuat dengan lebar maks dan dalam contoh lainnya dengan bantalan.

* {
  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>