Próbuję podać element div (pozycja: stała) o szerokości 100% (w odniesieniu do jego nadrzędnego elementu DIV). Ale mam pewne problemy ...
EDYCJA: Pierwszy problem jest rozwiązany przy użyciu dziedziczenia, ale nadal nie działa. Myślę, że problem polega na tym, że używam wielu elementów div, które przyjmują szerokość 100% / inherit. Drugi problem znajdziesz w aktualizacji jsfiddle: http://jsfiddle.net/4bGqF/7/
Przykład lisa
#container {
width: 800px;
}
#fixed {
position: fixed;
width: 100%;
}
i html
<div id="container">
<div id="fixed">Sitename</div>
<p>
blaat
</p>
</div>
Lub możesz to wypróbować: http://jsfiddle.net/4bGqF/
Wydaje się, że problem polega na tym, że stały element zawsze przyjmuje szerokość okna / dokumentu . Czy ktoś wie, jak to naprawić?
Nie mogę ustawić stałego elementu za pomocą, ponieważ używam wtyczki jScrollPane. Zależy to od zawartości, czy jest pasek przewijania, czy nie.
Wielkie dzięki!
PS: Tekst dwóch elementów div są jeden na drugim. To tylko przykład, więc to nie ma znaczenia.
źródło
inherit
jak użyciemax-width:inherit
zwidth:inherit
zachowuje taki sam stosunek kontener / zawartość, a jednocześnie jest responsywny i łatwy w zarządzaniuOdpowiedzi:
Nie jestem pewien, na czym polega drugi problem (na podstawie twojej edycji), ale jeśli zastosujesz się
width:inherit
do wszystkich wewnętrznych div, to działa: http://jsfiddle.net/4bGqF/9/Możesz zajrzeć do rozwiązania javascript dla przeglądarek, które musisz obsługiwać, a które nie obsługują
width:inherit
źródło
width: inherit
nie jest to pierwsza rzecz, o której bym pomyślałJak wiele osób zauważyło, responsywny projekt bardzo często ustawia szerokość o%
width:inherit
odziedziczy szerokość CSS, a NIE obliczoną szerokość - co oznacza, że dziedziczy kontener potomnywidth:100%
Ale myślę, że prawie równie często responsywne zestawy projektowe
max-width
, dlatego:#container { width:100%; max-width:800px; } #contained { position:fixed; width:inherit; max-width:inherit; }
To działało bardzo satysfakcjonująco, rozwiązując mój problem polegający na tym, że przyklejone menu było ograniczone do oryginalnej szerokości nadrzędnej, gdy „utknęło”
Zarówno rodzic, jak i dziecko będą przestrzegać,
width:100%
jeśli widoczny obszar jest mniejszy niż maksymalna szerokość. Podobnie obie będą przylegać do,max-width:800px
gdy widoczny obszar jest szerszy.Działa z moim już responsywnym motywem w taki sposób, że mogę zmienić kontener nadrzędny bez konieczności zmiany stałego elementu podrzędnego - elegancki i elastyczny
ps: Osobiście uważam, że nie ma znaczenia, że IE6 / 7 nie używa
inherit
źródło
min-width: inherit
.ustalona pozycja jest trochę trudna (a nawet niemożliwa), ale position: sticky pięknie radzi sobie:
<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; }
zobacz próbkę codepen
źródło
Możesz również rozwiązać to za pomocą jQuery:
var new_width = $('#container').width(); $('#fixed').width(new_width);
To było dla mnie bardzo pomocne, ponieważ mój układ był responsywny, a
inherit
rozwiązanie nie działało ze mną!źródło
Użyj tego CSS:
#container { width: 400px; border: 1px solid red; } #fixed { position: fixed; width: inherit; border: 1px solid green; }
Element #fixed odziedziczy swoją szerokość nadrzędną, więc będzie to 100% tej szerokości.
źródło
inherit
. Nie jestem pewien, czy to mattesr.Stałe pozycjonowanie ma określać wszystko w odniesieniu do widoku, więc
position:fixed
zawsze będzie to robić. Spróbujposition:relative
zamiast tego użyć na dziecku div. (Zdaję sobie sprawę, że możesz potrzebować stałego pozycjonowania z innych powodów, ale jeśli tak - nie możesz tak naprawdę dopasować szerokości do swojego rodzica bez JS bezinherit
)źródło
Oto mały hack, z którym natknęliśmy się podczas naprawiania niektórych problemów z przerysowaniem w dużej aplikacji.
Użyj
-webkit-transform: translateZ(0);
na rodzica. Oczywiście dotyczy to Chrome.http://jsfiddle.net/senica/bCQEa/
-webkit-transform: translateZ(0);
źródło
Jest na to proste rozwiązanie.
Użyłem stałej pozycji dla nadrzędnego elementu div i maksymalnej szerokości dla zawartości.
Nie musisz zbytnio myśleć o innych kontenerach, ponieważ ustalona pozycja jest tylko w stosunku do okna przeglądarki.
.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>
źródło
To rozwiązanie spełnia następujące kryteria
O ile mi wiadomo, tych kryteriów nie można spełnić bez Javascript (niestety).
To rozwiązanie wykorzystuje jQuery, ale można je również łatwo przekonwertować na waniliowy 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>
źródło
Musisz nadać ten sam styl stałemu elementowi i jego elementowi nadrzędnemu. Jeden z tych przykładów jest tworzony z maksymalnymi szerokościami, aw drugim z wypełnieniami.
* { 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>
źródło