Czy istnieje sposób na umieszczenie podrzędnego DIV wewnątrz rodzica DIV kontenera, który jest szerszy niż jego rodzic? Dziecko DIV musi mieć tę samą szerokość rzutni przeglądarki.
Zobacz przykład poniżej:
DIV dziecka musi pozostać dzieckiem div rodzica. Wiem, że mogę ustawić dowolne ujemne marginesy na div dziecka, aby go poszerzyć, ale nie jestem w stanie dowiedzieć się, jak zasadniczo zwiększyć jego szerokość do 100%.
Wiem, że potrafię to zrobić:
.child-div{
margin-left: -100px;
margin-right: -100px;
}
Ale potrzebuję, aby dziecko miało taką samą szerokość jak dynamiczna przeglądarka.
Aktualizacja
Dzięki za odpowiedzi, wydaje się, że najbliższą odpowiedzią jest uczynienie pozycji DIV dziecka: absolutną i ustawienie właściwości lewej i prawej na 0.
Kolejnym problemem, jaki mam, jest to, że rodzic ma pozycję: względną, co oznacza, że właściwości lewej i prawej strony są nadal względne w stosunku do rodzica div, a nie przeglądarki, patrz przykład tutaj: jsfiddle.net/v2Tja/2
Nie mogę usunąć pozycji względem rodzica bez zepsucia wszystkiego innego.
position: relative
? Co jest potrzebneposition: relative
do? Chyba pytam: co próbujesz zrobić?Odpowiedzi:
Użyj pozycjonowania bezwzględnego
źródło
position:fixed
. dlaczego to nie działa poprawnie?Oto ogólne rozwiązanie, które utrzymuje element potomny w obiegu dokumentów:
Ustawiamy
width
element podrzędny tak, aby wypełniał całą szerokość rzutni, a następnie dostosowujemy go do krawędzi ekranu, przesuwając go naleft
odległość połowy rzutni, minus 50% szerokości elementu nadrzędnego.Próbny:
Obsługa przeglądarek dla vw i calc () można ogólnie postrzegać jako IE9 i nowsze wersje.
Uwaga: Zakłada się, że model pudełkowy jest ustawiony na
border-box
. Bez tegoborder-box
musiałbyś również odjąć wypełnienia i obramowania, co spowodowałoby bałagan w tym rozwiązaniu.Uwaga: Zaleca się ukrywanie poziomego przepełnienia przewijanego kontenera, ponieważ niektóre przeglądarki mogą wyświetlać poziomy pasek przewijania, mimo że nie występuje przepełnienie.
źródło
position: relative
rodzica!Długo szukałem rozwiązania tego problemu. Idealnie chcielibyśmy mieć dziecko większe niż rodzic, ale nie znając z góry ograniczeń rodzica.
I w końcu znalazłem genialną ogólną odpowiedź tutaj . Kopiowanie go dosłownie:
źródło
90vw
. Wygląda na to, żemargin-right
w żadnym wypadku nie ma to żadnego efektu.W oparciu o twoją sugestię oryginalną sugestię (ustawienie ujemnych marginesów), próbowałem i opracowałem podobną metodę przy użyciu jednostek procentowych dla dynamicznej szerokości przeglądarki:
HTML
CSS:
Ujemne marginesy pozwolą na wypływ zawartości z Parent DIV. Dlatego ustawiłem
padding: 0 100%;
aby przesuwać zawartość z powrotem do pierwotnych granic Chlid DIV.Ujemne marginesy spowodują również, że całkowita szerokość .child-div rozszerzy się z okienka przeglądarki, co spowoduje przewijanie w poziomie. Dlatego musimy przyciąć szerokość wytłaczania poprzez zastosowanie
overflow-x: hidden
DIV do Dziadka (który jest rodzicem Div Dywizji):Oto JSfiddle
Próbowałem Nils Kaspersson
left: calc(-50vw + 50%)
; działało idealnie w Chrome i FF (jeszcze nie jestem pewien co do IE), dopóki nie dowiedziałem się, że przeglądarki Safari nie robią tego poprawnie. Mam nadzieję, że naprawili to wkrótce, jak mi się podoba ta prosta metoda.Może to również rozwiązać problem, w którym musi znajdować się element Parent DIV
position:relative
Dwie wady tej metody obejścia:
Daj mi znać, jeśli znajdziesz jakiś problem z tą metodą;). Mam nadzieję, że to pomoże.
źródło
Flexbox może być użyty do uczynienia dziecka szerszym niż jego rodzic za pomocą trzech linii CSS.
Tylko dziecka
display
,margin-left
awidth
być ustawione potrzeba.margin-left
zależy od dzieckawidth
. Formuła jest następująca:Zmiennych CSS można użyć, aby uniknąć ręcznego obliczania lewego marginesu.
Demo # 1: Obliczenia ręczne
Demo # 2: Używanie zmiennych CSS
źródło
Użyłem tego:
HTML
CSS
źródło
możesz wypróbować pozycję: absolutną. i podaj szerokość i wysokość, góra: „oś y od góry” i lewa strona: „oś x”
źródło
Miałem podobny problem. Zawartość elementu potomnego miała pozostać w elemencie macierzystym, podczas gdy tło musiało rozszerzyć pełną szerokość rzutni.
Rozwiązałem ten problem, tworząc element potomny
position: relative
i dodając do niego pseudo element (:before
)position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;
. Pseudo element pozostaje za faktycznym dzieckiem jako pseudo element tła. Działa to we wszystkich przeglądarkach (nawet IE8 + i Safari 6+ - nie mają możliwości testowania starszych wersji).Małe przykładowe skrzypce: http://jsfiddle.net/vccv39j9/
źródło
overflow-x: hidden
.Dodając do rozwiązania Nils Kasperssona, decyduję się również na szerokość pionowego paska przewijania. Używam
16px
jako przykładu, który jest odejmowany od szerokości portu widoku. Pozwoli to uniknąć wyświetlania poziomego paska przewijania.źródło
16px
co musisz odjąć, ponieważ powoduje, że poziomy pasek przewijania jest domyślnym marginesem / wypełnieniem przeglądarki, zamiast go odjąć, po prostu użyj tego,html, body{ margin:0; padding:0 }
więc nie musisz wykonywać dodatkowych obliczeń dla16px
Zakładając, że rodzic ma stałą szerokość, np.
#page { width: 1000px; }
I jest wyśrodkowany#page { margin: auto; }
, chcesz, aby dziecko pasowało do szerokości okna przeglądarki, co możesz po prostu zrobić:źródło
Aby div dziecka był tak szeroki jak treść, spróbuj tego:
źródło
źródło
Wiem, że to jest stare, ale dla każdego, kto przyjdzie do tego po odpowiedź, zrobiłbyś to tak:
Przepełnienie ukryte w elemencie zawierającym element nadrzędny, takim jak ciało.
Podaj elementowi dziecemu szerokość znacznie szerszą niż strona i ustaw go bezwzględnie w lewo o -100%.
Oto przykład:
Oto także JS Fiddle: http://jsfiddle.net/v2Tja/288/
źródło
Następnie rozwiązanie będzie następujące.
HTML
CSS
źródło
Wypróbowałem niektóre z twoich rozwiązań. Ten :
jest zdecydowanie najlepszy, ponieważ nie potrzebujemy dodatkowego css dla mniejszego ekranu. Zrobiłem codePen, aby pokazać wyniki: Użyłem div div rodzica z obrazem tła i div div dziecka z treścią wewnętrzną.
https://codepen.io/yuyazz/pen/BaoqBBq
źródło