Üst div'e göre "Konum: sabit" div genişliğini ayarlayın

% 100 genişliğinde bir div (konum: sabit) vermeye çalışıyorum (üst div ile ilgili olarak). Ama bazı sorunlarım var ...

DÜZENLEME: İlk sorun kalıtım kullanılarak çözülür, ancak yine de çalışmaz. Sanırım sorun,% 100 / devralma genişliğini alan birden çok div kullanıyorum. İkinci sorunu jsfiddle güncellemesinde bulabilirsiniz: http://jsfiddle.net/4bGqF/7/

Fox örneği

#container {
    width: 800px;
}

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

ve html

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

Veya deneyebilirsiniz: http://jsfiddle.net/4bGqF/

Sorun, sabit öğenin her zaman pencere / belgenin genişliğini alması gibi görünüyor . Bunun nasıl düzeltileceğini bilen var mı?

Sabit öğeme sabit bir öğe veremiyorum çünkü jScrollPane eklentisini kullanıyorum. Kaydırma çubuğunun olup olmadığı içeriğe bağlıdır.

Çok teşekkürler!

Not: 2 div'in metni birbirinin üstündedir. Bu sadece bir örnek, bu yüzden gerçekten önemli değil.

İkinci sorunun ne olduğundan emin değilim (düzenlemenize bağlı olarak), ancak width:inherittüm iç divlere uygularsanız , işe yarar : http://jsfiddle.net/4bGqF/9/

Desteklemeniz gereken ve desteklemeyen tarayıcılar için bir javascript çözümüne bakmak isteyebilirsiniz. width:inherit

Birçok kişinin yorumladığı gibi, duyarlı tasarım çoğu zaman genişliği% olarak belirler

width:inherithesaplanan genişliği DEĞİL CSS genişliğini miras alacak - Bu, alt kapsayıcının devraldığı anlamına gelirwidth:100%

Ancak sanırım, neredeyse çoğu zaman duyarlı tasarım setleri max-width, bu nedenle:

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

Bu, yapışkan bir menünün "takılı kaldığında" orijinal ana genişliğe sınırlandırılması sorunumu çözmek için çok tatmin edici bir şekilde çalıştı

width:100%Görüntü alanı maksimum genişlikten küçükse, hem üst hem de alt öğe buna uyacaktır . Aynı şekilde, her ikisi max-width:800pxde görüntü alanı daha geniş olduğunda uygun olacaktır .

Zaten yanıt veren temamla, sabit alt öğeyi de değiştirmek zorunda kalmadan ana kapsayıcıyı değiştirebileceğim bir şekilde çalışır - zarif ve esnek

ps: Ben şahsen IE6 / 7'nin kullanmamasının önemli olmadığını düşünüyorum inherit

sabit konum biraz aldatıcıdır (gerçekten imkansızdır), ancak konum: yapışkan hileyi güzel bir şekilde yapıyor:

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

codepen örneğine bakın

Bunu jQuery ile de çözebilirsiniz:

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

Bu bana çok yardımcı oldu çünkü düzenim duyarlıydı ve inheritçözüm benimle çalışmıyordu!

Bu CSS'yi kullanın:

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

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

#Fixed öğe, ebeveyn genişliğini devralacak, bu nedenle% 100 olacak.

Sabit konumlandırmanın her şeyi görüntü alanına göre tanımlaması gerekir, bu yüzden position:fixedher zaman bunu yapacaktır. position:relativeBunun yerine alt div üzerinde kullanmayı deneyin . (Başka nedenlerden dolayı sabit konumlandırmaya ihtiyacınız olabileceğini biliyorum, ancak öyleyse - genişliği JS olmadan ebeveyniyle eşleştiremezsiniz. inherit)

İşte büyük bir uygulamadaki bazı yeniden çizme sorunlarını düzeltirken karşılaştığımız küçük bir hack.

-webkit-transform: translateZ(0);Ebeveyn üzerinde kullanın . Elbette bu Chrome'a ​​özeldir.

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

-webkit-transform: translateZ(0);

Bunun için kolay bir çözüm var.

Üst div için sabit bir konum ve içerikler için bir maksimum genişlik kullandım.

Diğer kapsayıcılar hakkında çok fazla düşünmenize gerek yok çünkü yalnızca tarayıcı penceresine göre sabit konum.

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

Bu çözüm aşağıdaki kriterleri karşılar

1. Yüzde genişliğine ebeveynde izin verilir
2. Pencere yeniden boyutlandırıldıktan sonra çalışır
3. Başlığın altındaki içeriğe asla erişilemez

Bildiğim kadarıyla bu kriterler Javascript olmadan karşılanamaz (maalesef).

Bu çözüm jQuery kullanır, ancak kolaylıkla vanilla JS'ye dönüştürülebilir:

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>

Sabit eleman ve onun ana elemanı için aynı stili vermeniz gerekir. Bu örneklerden biri maksimum genişliklerde ve diğer örnekte dolgu ile oluşturulmuştur.

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