Poprawiono pasek boczny z wysokości 100% w CSS

robię stałe sidebar że postanowiłem here in stack overflow, więc teraz mam stałą bar z tym kodem:Poprawiono pasek boczny z wysokości 100% w CSS

<div id="main" style="width:100%;background:red;"> 
    <div id="sidemenu" style="float:left;height:200px;background:#000;"> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
    </div> 
    <div id="content" style="height:200px;overflow-y:scroll;background:silver;"> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
    </div> 
</div>

Ma wysokość 200px (tylko do zobacz, jak to działa), ale pasek boczny, którego potrzebuję, musi stale mieć wysokość 100%. Widziałem różne posty tutaj w stackoverflow, które mówią, że faux kolumn jest opcja: http://www.alistapart.com/articles/fauxcolumns/. Ale wewnątrz mojego <div id="sidebar"> będę, w niektórych przypadkach, 2 dodatkowe DIV: #menu i #submenu, więc szerokość będzie się różnić.

Co mogę zrobić? Nie potrzebuję pomocy dla starych przeglądarek: IE9, najnowszy Chrome i najnowszy Firefox są w porządku.

Źródło

2011-11-03 udexter

Dodałbym do ciała obiekt border-left, uzyskałem najdłuższy element menu i dopasowałem jego szerokość w ems, a następnie ustawiam margines ujemny na sidemenu. Potem pojawia się ona na równą wysokość div zawartości odbywa się (albo jeśli ją ustawić jawnie, czy zawartość rozszerza go):

<body style="border-left: 10em solid #666;"> 

<div id="main" style="background:red;"> 
    <div id="sidemenu" style="float:left;margin-left: -10em;width:10em;background:#666;"> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     very long menu item<br /> 
     menu<br /> 
     menu<br /> 
    </div> 
    <div id="content" style="height:400px;background:silver;"> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
    </div> 
</div> 

</body>

Na pasku bocznym z teksturą tle (jedna metoda), można ustawić szerokość w pikselach, aby dopasować szerokość tekstury (nie tak elastyczne, jak EMS, ale jeśli ustawiony w najszerszym punkcie, powinno być w porządku) oraz powtórzenia tekstury wzdłuż osi y:

<div id="main" style="background: url(pattern_157.gif) repeat-y;"> 
    <div id="sidemenu" style="float:left;width:200px;background: transparent;"> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     very long menu item<br /> 
     menu<br /> 
     menu<br /> 
    </div> 
    <div id="content" style="height:600px;background:transparent;"> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
    </div> 
</div>

Źródło

2011-11-03 09:50:31

hej @Dave! To dobre rozwiązanie, ale ... co się stanie, jeśli sidemenu ma obraz tła (teksturę), jak to rozwiążesz? Z góry dziękuję! – udexter

@udexter - jeden przykład dodany do powyższej odpowiedzi - jest na to kilka sposobów, ale ten był pierwszym, który przyszedł mi do głowy ... –

Czy problem że tło twojej kolumny ma jakiś gradient? Jeśli jest to tylko jednolity kolor, czy nie można pozostawić nierozdzielonych szerokości 2 kolumn i wstawić obraz tła na osi X, a także na osi Y?

Źródło

2011-11-03 09:52:54 Brighty

tak, ma on teksturę dołączoną – udexter

Co jeśli zrobiłeś swój teksturowany obraz 9000px szeroki, ale umieścić div zawartości na wyższym indeksie niż div sidemenu? – Brighty

Oto kolejny pomysł na to przy użyciu ustalonego pozycjonowania i wysokości 100%. Umieściłem tam również wystarczająco dużo przerw, aby pokazać, jak zawartość będzie przewijana, ale pasek boczny i jego zawartość pozostaną tam, gdzie są.

<body style="margin:0;"> 
    <div id="main"> 
     <div id="sidemenu" style="width:200px; position:fixed; height:100%; background: url(http://www.bittbox.com/wp-content/uploads/2007/12/free_grunge_paper_1.jpg) repeat;"> 
      menu<br /> 
      menu<br /> 
      menu<br /> 
      very long menu item<br /> 
      menu<br /> 
      menu<br /> 
     </div> 
     <div id="content" style="background:transparent; float:left; margin:0 0 0 220px;"> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
     </div> 
    </div> 
</body>

Źródło

2012-07-02 15:57:31

Poprawiono pasek boczny z wysokości 100% w CSS

Odpowiedz

Powiązane problemy