[HTML][CSS] problem z height Opcje

[kamilo818]

Może ktoś podpowie.

Nie mogę sobie poradzić z wysokością diva.
Mam ustawionego diva na 90% wysokości okna. W nim ma być kolejny div w którym jest tekst. Jak tekstu jest więcej to ma się przewijać ale nie powiększać diva. Wszytko niby ustawion ok ale nie działa. Nawet jak wrzuca mniej tekstu to przy zmianie wielkosci okna dzieje się to samo.

Możecie podejrzeć to na stronie: www.page4u.waw.pl/galeria
Chodzi o zakładkę 'reduta'

[kamilo818]

Oślepłem nie widze co tu nie gra.
index

[PHP] pobierz, plaintext 
		<div class="slide" id="reduta">
			<div class="fake_menu"></div>
			<div class="content">
 
				<div class="container">
					<div class="opis">
						<div class="txt">
		                                        jh adhj hjdljah ladh da hj kadhj ladkjha djh adhj hjdljah ladh da hj kadhj ladkjha djh adhj hjdljah ladh da hj
						</div>
					</div>
					<div class="galeria">
						<div class="galeria_main cycle-slideshow"
								data-cycle-fx="fade"
								data-cycle-timeout=0
								data-cycle-prev="#prev"
								data-cycle-next="#next"
								data-cycle-center-horz=true
    								data-cycle-center-vert=true
 
							>
							<img src="img/promenada.jpg"/>
							<img src="img/reduta.jpg"/>
							<img src="img/manufaktura.jpg"/>
							<img src="img/glodzka.jpg"/>
							<img src="img/arkadia.jpg"/>
						</div>
						<div id="prev"></div>
						<div id="next"></div>
					</div>
				   	<div class="mapa">
				   		<iframe src="" frameborder="0" style="border:0"></iframe>
				   	</div>
				</div>
				<div class="navigation">
					 <div style="width:300px; height:20px; padding:0; margin:auto; display:table;">
						<div id="opis"> Opis </div>
						<div id="galeria"> Galeria </div>
						<div id="mapa"> Mapa </div>
					</div>
				</div>
			</div>
			<div class="fake_right"></div>
		</div>
[PHP] pobierz, plaintext 

css

[PHP] pobierz, plaintext 
html{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
 
body{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow:scroll; //docelowo hidden
	font-family:Arial;
}
div.slide{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display:table;
}
div#reduta{
	background-image:url('img/reduta.jpg');
}
div.fake_menu {
	width:250px;
}
div.fake_right{
	width:5%;
}
div.fake_menu, div.content, div.fake_right{
	display:table-cell;
	position:relative;
	height:100%;
	border:0px solid;
	vertical-align:top;
}
div.container{
	width:100%;
	border:0px solid white;
	height:90%;
	overflow:hidden;
	position:relative;
 
}
div.navigation{
	width:100%;
	border:0px solid;
	height:10%;
	text-align:center;
	background-color:#4E8FFF;
	opacity:0.9;
 
 
 
}
div.navigation div{
	color:#ffffff;
	text-decoration: none;
	font-size:20px;
 
	display:table-cell;
	cursor:pointer;
 
 
 
}
div.opis{
	background: rgba(78, 143, 255, 0.9);
 
 
	border:1px solid #ffffff;
	width:99%;
	max-height:99%;
	overflow-x:hidden;
	margin:auto;
 
}
div.txt{
	color:#ffffff;
	font-size:17px;
	padding:40px;
	text-align:justify;
 
}
#reduta .galeria, #reduta .mapa{
	display:none;
}
.galeria img{
	max-width:100%;
	max-height:100%;
 
}
div.navigation a.cycle-pager-active{
	font-size:30px;
 
}
#reduta div.mapa{
	width:100%;
	height:100%;
}
#reduta div.galeria{
	width:100%;
	height:100%;
}
div.galeria_main{
	position:relative;
 
}
div#prev, div#next{
	position:absolute;
	top:0;
	background-color:#ffffff;
	width:20%;
	z-index:99999;
	height:100%;
	opacity:0;
 
}
div#next{
	right:0;	
	background: url('next.png') no-repeat scroll 50% 50% transparent;
	background-size: 80px 80px;
 
}
div#prev{
	left:0;	
	background: url('prev.png') no-repeat scroll 50% 50% transparent;
	background-size: 80px 80px;
}
div#prev:hover, div#next:hover{
	opacity:0.7;
	cursor:pointer;
}
[PHP] pobierz, plaintext 

Ten post edytował kamilo818 2.09.2014, 18:55:54