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

[krzysztof_kf]

W selektorze o nazwie

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

usuń

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

[Norfik]

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ść.

[krzysztof_kf]

Zostaw wszystko dodaj do

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

[Norfik]

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.

[pedro84]

Tutaj znajdziesz rozwiązanie.

[Norfik]

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.

Ten post edytował Norfik 20.04.2010, 22:59:11

[pedro84]

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

[Norfik]

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

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

[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