Utwórz div i element div dziecka, aby uzyskać co najmniej pełną wysokość okna przeglądarki.

Potrzebuję obrazów, które rozciągają się wzdłuż lewej i prawej strony mojego głównego div div (w rzeczywistości dla rodzaju efektu drop-shadow pod div).Utwórz div i element div dziecka, aby uzyskać co najmniej pełną wysokość okna przeglądarki.

Byłoby to proste, gdyby nie fakt, że chcę, aby ten element div był rozszerzalny, i potrzebuję go do pracy w IE7 i IE8, i chcę, aby rozszerzył się na co najmniej dno Strona.

Próbowałem używać polyfills, aby uzyskać magię CSS3, ale nie działały (próbowałem PIE i niektóre filtry bez szczęścia).

Czuję, że próbowałem wszystkiego ... co mnie tutaj sprowadza! To jest tak daleko, jak stałam tylko poprzez CSS/HTML, czuję się jak byłbym w stanie zmusić go do pracy, ale do tej pory nie cygaro:

<div class="left-image"> 
<div class="right-image"> 
main body text 
</div> 
</div>

z następującym CSS:

html,body{ 
    height: 100% 
} 
.left-image{ 
    background: transparent url('image/url.png') repeat-y top left; 
    min-height: 100%; /*this alone works for making outer div extend browser & content height*/ 
    min-width: 960px; 
    max-width: 1280px; 
    margin: 0 auto; 
} 
.right-image{ 
    background: transparent url('image/url.png') repeat-y top left; 
    height: 100%; /*this only makes the div the height of its content*/ 
}

Powoduje to, że element div wypełniony jest wysokością okna przeglądarki lub wysokością zawartości (w zależności od tego, która wartość jest większa), ale element div div zawierający tylko wysokość treści (czyli jeśli zawartość jest mniejszy niż okno przeglądarki, nie będzie go wypełniał).

Jakikolwiek sposób obejścia tego? Po prostu użyj jQuery?

Źródło

2012-01-22 Sabrina Leggett

Jest to powszechny problem bez łatwego rozwiązania. CSS3 to rozwiąże, ale wspieranie starszych przeglądarek oznacza, że nie zniknie w najbliższym czasie.

Wyjazd

http://www.alistapart.com/articles/fauxcolumns/

i zobaczyć, czy to wskazuje się w dobrym kierunku. Zasadniczo musisz go sfałszować (fałszywe kolumny) lub użyć javascriptu, o ile mi wiadomo.

Źródło

2012-02-16 23:35:18

Ponieważ jest to najwyżej oceniany hit Google, chciałem tylko dodać, że "CSS3 to rozwiąże" oznacza http://stackoverflow.com/a/16837667/1463507 – kqr

Jednym z tanich rozwiązań, z których korzystałem w przeszłości, było ustawienie pozycji górnej i dolnej na zero.

.left-image{ 
    background: transparent url('image/url.png') repeat-y top left; 
    /*min-height: 100%;*/ 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    min-width: 960px; 
    max-width: 1280px; 
    margin: 0 auto; 
} 
.right-image{ 
    background: transparent url('image/url.png') repeat-y top left; 
    /*height: 100%;*/ 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
}

Źródło

2012-01-22 22:51:48 Shredderroy

Dzięki! Działa to idealnie pod względem dopasowania elementu div do ekranu, ale jeśli przewijam w dokumencie, element div nie rozciąga się dla zawartości (zatrzymuje się, gdy przewijam). Zastanawiam się, czy mógłbym coś zrobić z pozycją: naprawiono (może sprawić, że zawartość w osobnym dziale? Będę się z nią bawił ...) –

-1

skończyło się przy użyciu:

$(".left-image, .right-image").height($(document).height());

(użyłem go na obciążenia dokumentu, w oknie rozmiaru, a podczas rozmowy ajax są wykonane, że może rozwinąć strona)

myślę, że moja nowa zasada będzie polegać na tym, że jeśli zajmie mi to więcej niż dwadzieścia minut, aby samemu użyć css, przejdę prostą drogą i użyję skryptu javascript/jquery ...

Źródło

2012-01-23 11:42:48

Twoje próby w twoim pytaniu pokazują, że nie znasz dobrze CSS i wpadasz w "użycie "pułapka jQuery" oznacza, że zdecydowałeś się poddać, zamiast uczyć się, jak to działa. – Rob

Sterowanie mną w dobrym kierunku jest bardziej przydatne niż krytykowanie mojej wiedzy ... Nie wiem wszystkiego o CSS, bo inaczej nie pytałbym o to. –

To może być czysto rozwiązane w css. – Dementic

Prawdopodobnie będziesz lepszy od nas obraz tła - patrz http://jsfiddle.net/ZXpyT/ na przykład. Zwróć uwagę, że zakłada to, że zawartość treści będzie miała 960 pikseli; Ideą byłoby stworzenie obrazu (powtarzalnego w pionie), który zastępuje obecne osobne obrazy w lewo/w prawo.

Źródło

2012-01-26 23:56:22 Conan

Tło musi się rozszerzać i zmniejszać za pomocą głównego elementu div. Główny div ma min-with o wartości 960px i max-width o wartości 1280px i potrzebuję obrazka tła, aby go obramować na dowolnej szerokości, dlatego potrzebuję dwóch oddzielnych obrazów. –

można określić wiele środowisk do otoki div zamiast do 2 div, tak

.wrapper{ 
background: url('left.jpg'),url('right.jpg'); 
background-repeat: repeat-y, repeat-y; 
height:100%; 
}

Niestety brakowało mi matrycę przeglądarki chcesz wspierać ... no to tutaj goes..try ..this pracował dla mnie we wszystkich przeglądarkach

<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      .left-image{ 
       background:grey; 
       min-height:100%; 
       height:100%; 
       width:100%; 
       position:absolute; 
      } 
      .right-image{ 
       background:#eee; 
       min-height:100%; 
       height:100%; 
       width:50%; 
       margin:0 auto; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="left-image"> 
      <div class="right-image"> 
       main body text 
      </div> 
     </div> 
    </body> 
</html>

Źródło

2012-01-27 10:24:09 Abhidev

http://www.w3schools.com/css3/css3_backgrounds.asp wiele środowisk nie działa w IE8 i poniżej. Nie udało mi się uruchomić SROKI i nie jestem pewien, czy warto z nią walczyć, czy tylko używać JS. –

Niezła próba! :) Jeśli umieścisz tekst, który rozciąga się bardziej niż wysokość okna przeglądarki, to nie działa. Mówię ci ... wygląda to łatwo, ale nie tak bardzo! –

Innym sposobem może być ... dawanie pozycji: ustalone na div lewego obrazu. Czy próbowałeś tego? – Abhidev

Dlaczego nie dasz .left-imageheight:100%? Niektóre przeglądarki, aby uzyskać szerokość/wysokość przeglądarki 100%, musisz ustawić każdy element zawierający na 100%.

Źródło

2012-02-09 22:17:03

Co powiecie na height: inherit;? Powinna ona przyjąć taką wysokość jak tag macierzysty.

Źródło

2012-02-10 13:39:50 Giannis

działa to, gdy zawartość jest co najmniej na wysokość strony, ale musiałem div są co najmniej tak wysokie, jak okna przeglądarki. Wydaje mi się, że przeczytałem gdzieś tę wysokość: 100% nie działa, gdy element zewnętrzny ma wartość auto, a min-height jest uważane za auto, prawdopodobnie jest tak również w przypadku dziedziczenia –

Używasz min-height na lewym obrazku, dlaczego nie na prawym obrazku też?

Źródło

2012-02-12 11:41:21 JuanOjeda

-1

Istnieje naprawdę łatwa naprawa. Dodaj to do swojego wyświetlacza css: bock;

Źródło

2012-03-06 20:05:30

Utwórz div i element div dziecka, aby uzyskać co najmniej pełną wysokość okna przeglądarki.

Odpowiedz

Powiązane problemy