Wysokość div'a względem innych Opcje

[Norfik]

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 (IMG:style_emoticons/default/smile.gif)

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:
(IMG:http://img245.imageshack.us/img245/2617/smdt.png)

Efekt po ustawieniu wysokości div'a "zawartosc" na height: 100%;
(IMG:http://img245.imageshack.us/img245/8613/smdt2.png)

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 

Ten post edytował Norfik 20.04.2010, 22:15:17

[pedro84]

OK (IMG:style_emoticons/default/smile.gif) Od razu lepiej.

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

[Norfik]

OK (IMG:style_emoticons/default/smile.gif) 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 

Ten post edytował Norfik 21.04.2010, 11:05:39