problem z DIVem - tlo nie jest na calej wysokosci Opcje

[marianekxx]

Witam.
Mam problem z DIVem - tlo i obrys nie jest na calej wysokosci - tylko do wysokosci okna przegladarki - po przwinieciu na dol juz nie ma tla ani obrysu.

Kod html.

[HTML] pobierz, plaintext 
<div id="header1">
	<div id="top_szary_pasek">  </div>  
	<div id="menu1">  </div>
</div>
 
	<div id="main" class="col">
		<div class="wrap">		
			<div class="left_2">lewa </div>   <!-- koniec .left -->
			<div class="right_2"></div>   <!-- koniec .right -->
		</div>   <!-- koniec .wrap -->
	</div>   <!-- koniec .main -->
<div class="clear"></div>	
 
<div id="footer1"></div>
[HTML] pobierz, plaintext 

Kod .css

[HTML] pobierz, plaintext 
#header1 {
	background: #3c3c3c url(imgs/tlo.png) repeat-x center center;
	width: 100%;
	position: top;
	z-index: 9999;
}
#menu1 {
  width: 960px;
  height: 80px;
  margin: 0 auto;
}
 
#main {
	padding-bottom: 319px;
	width: 960px;
	background-color: #ffffff;
	margin: 0 auto;
	height:100%;
	padding:0 10px 0 10px; border-left: 1px solid #b5b5b5;border-right: 1px solid #b5b5b5;
 
}
#main .col{
	background-color: #ffffff;
	height:100%;
}
#main .wrap {
	width:960px;
	background-color: #ffffff;
}
 
#main  .left_2 {
	float:left;
	width:650px;
	position:relative;
	top:5px;
}
 
#main  .right_2 {
	float:left;
	width:300px;
	margin-left:10px;
	margin-bottom:35px;
}
 
#footer1 {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
  	border-top: 6px solid #dcdcdc;
	background: #3c3c3c url(imgs/footer-content-bg.jpg) repeat top left;
}
 
[HTML] pobierz, plaintext 

Ogolnie strona wyglada tak ze header i footer sa calej szerkosci przegladarki - zas MAIN ma szerokosc 960px - i problem w tym ze tresc znajdujaca sie czy to w prawej czy lewej kolumnie (left_2 i right2) wyplenia cala warstwe nie nachodzac na stopke - tylko ze tlo i obrys warstwy MAIN niestety ale jest tylko do wysokosci wczytania w przegladarce jak przewine nizej to nie ma juz ani tla ani obrysu.

Z gory wielkie dzieki za pomoc.

[Kostek.88]

A nie mozesz po prostu pozwolic DIVowi sie rozciagnac do ilosci tekstu w nim? Jesli zalezy Ci na przylegajacej stopce do dolu (jesli tekstu jest malo), to polecam ten przyklad http://ryanfait.com/sticky-footer/ .

I niestety jak wpiszesz height: 100% to punktem odniesienia bedzie tyle ile widzisz na ekranie...

[Volume]

temat wałkowany 1000 razy, na upartego można to osiągnąć oczywiście im lepsze wsparcie dla css2.1 tym lepiej, dla IE6 były jakies tricki... Ale po co? Większość osob daruje sobie tą tabelkowata możliwość, z czasem jak strone wypełniasz treścią to ten efekt kompletnie jest zbędny, a nawet jak zdarzy sie krótka treść to mało kompu będzie przeszkadzać, że stopka się oderwie od dołu przeglądarki.

edit - a co do tego bys mial rowny obrys tla to dla glownego bloku albo stosujesz obrazek w tle - 1px x szerokość i dajesz repeat-y albo w CSS3 bawisz sie

Kod

background: -o-linear-gradient(0deg, yellow 50%, blue 50%);
background: -moz-linear-gradient(0deg, yellow 50%, blue 50%);
background: -webkit-linear-gradient(0deg, yellow 50%, blue 50%);
background: linear-gradient(0deg, yellow 50%, blue 50%);

Ten post edytował Volume 28.12.2011, 17:09:40

[erix]

Prefiks -o jest tylko dla Opery, gwoli ścisłości.

[Volume]

tak zagadza sie nadpisałem pozostałe istotne prefiksy