Mam drobny problem z rozszerzaniem się "zawartosc" na 100% wysokości i już nie wiem co robie źle.

Szukałem już informacji na wielu stronach jak można to zrobić i prawie jest ok ale :| Strona wprawdzie rozszerza się na wysokość 100% ale do 100% dodawana jest wysokość id "logo" + "stopka" co powoduje, że pasek przewijania jest jakby to napisać cały czas aktywny nawet przy pustej "zawartosc". Proszę o wskazówki co można zrobić by pozbyć się tego efektu. Z góry wielkie dzięki

Divy wglądają następująco:

[HTML] pobierz, plaintext 
<div id="strona">
    <div id="logo">LOGO</div>
    <div id="middle">
        <div id="menu">    
            menu    
        </div>
        <div id="zawartosc">
              Zawartość wyświetlania   
        </div>
    </div>
    <div id="stopka">tekst stopki</div>
</div>
[HTML] pobierz, plaintext 

Plik CSS:

[CSS] pobierz, plaintext 
	html, body {
		margin : 0px;
		background-color: #2e1b17;
		background-image:url('tlo.jpg');
		background-repeat:repeat-x;
		background-position:left top;
		font-family: arial;
		text-align: justify;
		font-size: 14px;
		line-height: 130%;
		height:100%;
	}
 
	#logo {
		width : 900px;
		height : auto;
		position : relative;
		float : left;
		text-align : center;
		margin-left: auto;
		margin-right: auto;
		background-color:rgba(0, 0, 0, 0.3);
	}
 
	#menu {
		width : 150px;
		height : inherit;
		position : relative;
		float : left;
		text-align : center;
		padding : 0px 0px 0px 0px;
	}
 
	#zawartosc {
		width : 750px;
		height : inherit;
		position : relative;
		float : left;
		text-align : left;
		padding : 0px 0px 0px 0px;
		margin-left: auto;
		margin-right: auto;
	}
 
	#middle {
		width : 900px;
		height : inherit;
		position : relative;
		float : left;
		margin-left: auto;
		margin-right: auto;
		background-image:url('top.jpg');
		background-color: #e9e0c3;
		background-repeat:repeat-x;
		background-position:left top;
	}
 
	#stopka {
		width : 900px;
		height : 10px;
		position : relative;
		float : left;
		text-align : center;
		font-family: arial;
		font-size: 12px;
		font-variant: small-caps;
		padding : 6px 0px 6px 0px;
		text-shadow: #6a5b3e 1px 1px;
		color: #4c342a;
		margin-left: auto;
		margin-right: auto;
		background-image:url('bottom.jpg');
		background-color: #e9e0c3;
		background-repeat:repeat-x;
		background-position:left bottom;
	}
 
	#strona {
		width : 900px;
		height : 100%;
		position : relative;
		text-align : center;
		padding : 0px 0px 0px 0px;
		margin-left: auto;
		margin-right: auto;
	}
[CSS] pobierz, plaintext 

Strona przed próbą rozszerzania wysokości:


Efekt po ustawieniu wysokości div'a "zawartosc" na height: 100%;


i teraz skoro kontekst diva "zawartosc" nie przekracza rozdzielczości to chce żeby pasek przewijania się nie pojawiał a stopka była widoczna. W momencie gdy zawartość "zawartosc" była większa od rozdzielczości to ma się rozszerzać tylko div "zawartosc" a "stopka" była na końcu diva "zawartosc". Tak jakby to było w table:

[HTML] pobierz, plaintext 
<table>
    <tr><td>LOGO</td></tr>
    <tr><td>Zawartosc strony</td></tr>
    <tr><td>Stopka</td></tr>
</table>
[HTML] pobierz, plaintext 

W selektorze o nazwie

[CSS] pobierz, plaintext 
#strona {
[CSS] pobierz, plaintext 

usuń

[CSS] pobierz, plaintext 
		height : 100%;
[CSS] pobierz, plaintext 

Nie pomaga a wręcz przeciwnie strona się kurczy nie ma rozszerzenia na wysokość a chce aby środek "zawartosc" rozszerzała się na wysokość.

Zostaw wszystko dodaj do

[CSS] pobierz, plaintext 
 
#strona { 
overflow: hidden;
[CSS] pobierz, plaintext 

Pasek przewijania znika ale strona jest ucięta czyli "stopka" i zawartość bloku "zawartosc", która nie mieści się w rozdzielczości ekranu.

Tutaj znajdziesz rozwiązanie.

Dziękuje za ten pomysł ale nie do końca o to mi chodzi. Jak dobrze rozumiem przykład ze strony przykładowej polega to na tym że stopka jest cały czas widoczna na ekranie a jezeli w kontekstowym divie zawartość jest większa pojawia się pasek przewijania tylko dla okna zawartości. Skorzystam z tego jak nie znajde rozwiązania na swój problem. Dziękuje bardzo.

Wydaje mi się że z tekstu osoby nie rozumieją o co mi chodzi dlatego dodaje do 1 postu screeny.

Przejrzyj dokładnie te wyniki co Ci dałem... Bo dokładnie o to Ci chodzi.

@norfik, Wybacz, ale WTF? skożystam? rozumią? Do cholery używasz Firefoxa, patrz do diaska co Ci podkreśla, to gwałci moje (podejrzewam, że nie tylko) poczucie estetyki tekstu. I używaj interpunkcji

No dobrze to spojrzę na to ponownie i będę próbował rozwiązać ten problem.

Przepraszam za te dwa błędy poprawiłem je. Wprawdzie mam FF i widać na screenach, że menu jest polskie ale słownik jest angielski więc każdy polski wyraz mam na czerwono

OK Od razu lepiej.

Przejrzyj, na pewno jest tam coś, czego szukasz (sorry, nie chce mi się szukać teraz:))

Miałeś racje to rozwiązuje mój problem dziękuje bardzo za podpowiedz.

Divy:

[HTML] pobierz, plaintext 
<div id="strona">
    <div id="logo">LOGO</div>
    <div id="middle">
        <div id="menu">
                   MENU
        </div>
        <div id="zawartosc">
                    ZAWARTOSC
        </div>
    </div>
</div>
<div id="stopa">
    <div id="stopka">STOPKA</div>
</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
	html, body {
		margin : 0px;
		height:100%;
	}
 
    body > #strona {
        height: auto;
        min-height: 100%;
        width : 900px;
    }
 
    /*Opera Fix*/
    body:before {
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-top:-32767px;/
    }
 
    #strona {
	width : 900px;
	height: 100%;
        overflow: auto;
	position : relative;
	background-color: #e9e0c3;
    }
 
    #stopa {
        width : 900px;
	position : relative;
	padding : 0px 0px 0px 0px; 
        margin-left: auto;
	margin-right: auto;
    }
 
	#stopka {
		width : 900px;
		height : 12px;
                margin-top: -24px;
		position : relative;
		float : left;
		padding : 6px 0px 6px 0px;
		clear: both;
		margin-left: auto;
		margin-right: auto;
	}
 
	#zawartosc {
		width : 750px;
		position : relative;
		float : left;
		text-align : left;
		padding : 0px 0px 0px 0px;
		margin-left: auto;
		margin-right: auto;
		overflow:auto;
	}
 
	#middle {
		width : 900px;
		overflow: auto;
		height-min: 100%;
		position : relative;
		float : left;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 12px;
	}
 
	#menu {
		width : 150px;
		height : inherit;
		position : relative;
		float : left;
		text-align : center;
		padding : 0px 0px 0px 0px;
	}
 
	#logo {
		width : 900px;
		height : auto;
		position : relative;
		float : left;
		margin-left: auto;
		margin-right: auto;
	}
[CSS] pobierz, plaintext