Do tej pory robiłem strony na tabelach , ale wszędzie piszą po różnych kursach że tabele to przeżytek, że teraz wszyscy robią strony na divach , no to zacząłem się uczyć tych css'ów ale doszłem do wniosku że nie da się zrobić strony na samych divach bez tabeli bo kombinuje od wczoraj i nie...

Oczywiście, że jest to możliwe Zajrzyj tutaj, masz gotowy plik HTML z DIV na 100% wysokości strony.

Pomieszałem trochę w twoich plikach. Kod: text Rozwiń Zaznacz wszystko Kopiuj do schowka

Jeżeli w głównym DIV-ie ustawisz wysokość na 100% - to będzie on dokładnie wysokości 100% obiektu nadrzędnego. W tym przypadku BODY. Jeżeli chcesz zamieszczać na nim filmy, tak jak na podanej stronie, to ograniczanie jego wysokości w jakikolwiek sposób, nie ma sensu. Cokolwiek nie ustawisz, to zawsze jakiś film będzie wystawał u dołu. Usuń ustawienia wysokości z BODY i z głównego DIV-a, lub ręcznie oblicz jaką wysokość powinny mieć w punktach.

Podziel głównego DIV-a na 2 mniejsze, np. każdy po 50% szerokości i możesz wszystko pokazać po prawej lub po lewej stronie.

Daj cały HTML. Zwłaszcza jak podłączasz ten plik stylów.

Kod: text Rozwiń Zaznacz wszystko Kopiuj do schowka

Sorki tak się zagalopowałem z tym a miałem zamienione zamiast id miałem class wstawione teraz jest ok , ale dalej jest to samo z głównym divem że nie chce się rozciągać, mi chodzi o coś takiego jak tutaj : tyle że tą zrobiłem na tabelach a chciałem zrobić to samo na divach ale jednak coś mi to nie wychodzi , i chyba zamiast tego głównego diva będe musiał wstawić jedną tabele

jeszcze popróbuję może cos się uda jak nie to jednak zostanie ta jedna tabela główna kurde przez chwile mi zadziałało jak usunałem te wysokości , ale miałem wtedy na position:absolute; ustawione , jak przestawiłem na relative; to tylko tło i napis obejmuje a jak teraz przestawie spowrotem na absolute to też juz nie działa . Ale jest światełko w tunelu że może zadziałać , dzięki za radę . Już doszłem , wszystko mi się ładnie wydłuża ale działa dopuki w treści nie wstawię float: right; jak to wstawię to od razu główny div zmniejsza się do rozmiarów logo i napisu . może jeszcze znajdę jakieś inne rozwiązanie , chociaż to nie jest złe z tym że nie wszystkie filmy są pod sobą bo te niżej pod menu wysuwają się na środek , ale dobre i to .

Już mi działa wszystko jak trzeba , w treści strony wstawiłem tylko position:auto; i nic więcej tam nie dodawałem i samo się ustwia jak trzeba . Można sprawdzić www.hipichild.net84.net/humorek/ strona taka sama jak ta na tabelach tyle że ta jest na divach , jak na razie wrzuciłem tylko 3 pierwsze lepsze filmiki z youtube tak do sprawdzenia . jak już się dobrze nauczę robić strony to wtedy będe miał więcej czasu na opracowanie ich treści a narazie to tak wrzucam byle co żeby tylko sprawdzić czy strona działa .

REKLAMA

Adblock/uBlockOrigin/AdGuard mogą powodować znikanie niektórych postów z powodu nowej reguły.

Jak ustawić height: 100% dla głównego diva w CSS?

hipichild 12 Kwi 2010 13:16 2347 10

REKLAMA

Zgłoś naruszenie prawa

Odpowiedz | Nowy temat

#1 7951530 12 Kwi 2010 13:16

hipichild hipichild

Poziom 10

Posty: 45

Ocena: 1
Autor tematu

Post #1
7951530 12 Kwi 2010 13:16

Do tej pory robiłem strony na tabelach , ale wszędzie piszą po różnych kursach że tabele to przeżytek, że teraz wszyscy robią strony na divach , no to zacząłem się uczyć tych css'ów ale doszłem do wniosku że nie da się zrobić strony na samych divach bez tabeli bo kombinuje od wczoraj i nie znalazłem żadnego sposobu na to żeby rozciągnąć powierzchnie głównego diva w którym mieszczą się wszystkie pozostałe na całą wysokość strony czyli 100% można to zrobić na stałe w pikselach ale w procentach nie działa , chyba że komuś udało się tego dokonać , to będe wdzięczny za pomoc .
dodam że to ma być strona dynamiczna więc nie mogę ustalić stałej wysokości
no i oczywiście nie przeszkadzało by mi to gdy bym pozostawił białe tło ale białe strony jakoś mi się nie podobają .
Prezentacja i testy COM Express Type 10 - NANOCOM-ARH z carrier board [sponsorowany]
REKLAMA
Pomocny post

#2 7951610 12 Kwi 2010 13:48

arnoldziq arnoldziq

VIP Zasłużony dla elektroda

Posty: 5376

Pomógł: 789

Ocena: 299
Pomocny post? (+1)

Pomocny post
Post #2
7951610 12 Kwi 2010 13:48

Oczywiście, że jest to możliwe
Zajrzyj tutaj, masz gotowy plik HTML z DIV na 100% wysokości strony.

#3 7953613 12 Kwi 2010 21:32

hipichild hipichild

Poziom 10

Posty: 45

Ocena: 1

Post #3

7953613 12 Kwi 2010 21:32

To co podałeś to działa ale to co sam napisałem to niechce :


<body>
<div id="glowna" >
<div id="logo"><img src="tlog.jpg" width="750" height="200" alt="logo" /></div>
<div id="napis"><img src="napisg.jpg" width="750" height="70" alt="napis" /></div>
<div id="menu">
<ul id="lista">
<li><a href="download/"><img src="downloadb.png"/></a></li>
<li><a href="galeria/"><img src="galeriab.png" /></a></li>
<li><a href="http://www.hipichild.net84.net"><img src="hipichildmb.png"/></a></li>
<li><a href="http://www.starebuty.yoyo.pl"><img src="starebutyb.png"/></a></li>
<li><a href="http://www.google.pl"><img src="googleb.png"/></a></li>
</ul>
</div>
<div id="tresc">
<div id="tresc1"><?php 
$dane = file("arty/art1.txt");
$plik=file("emoty.txt");


	$ile=count($plik);
for ($i1=0; $i1<$ile; $i1++){
 $emoty=explode("|+|",$plik[$i1]);
 $dane=str_replace($emoty[0],"<img src=\"$emoty[1]\" style=\"border:0px;\"
  alt=\"$emoty[0]\" />",$dane);
  }
  foreach($dane as $value){
  $exp = explode("`",$value); 
        echo $exp[0]."<br />".$exp[1]."<hr />"; 
		}
?></div>
<div> tutaj jest to samo co w poprzednim i tak w kolejnych 8 divach </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
</body>

a tutaj kod cssa:


html, body{ 
text-align: center; 
height: 100%;
margin:0;
padding:0;
 }
#glowna{
position:relative;
top: 0px;
float: center;
margin: auto;
width:750px;
height: 100%;
border: solid red 3px;
background-color: #C0DCD6;
padding:0 10px;
margin-bottom:20px;
}
#logo{
position:relative;
width: 750px;
height: 200px;
}
#napis{
position:relative;
top: 1px;
}
#menu{
position:relative;
float:left;
width: 200px;
height: 100%;
top: 1px;
left: 1px;
}
#lista{
list-style-type: none;
padding:0;
}
#tresc{
	position: relative;
	top: 40px;
	right: 20px;
	float:right;
	width: 500px;
	height: 100%;
	margin-bottom:20px;
	
}

No i nie chce mi to chwycić .

REKLAMA
#4 7953703 12 Kwi 2010 21:46

arnoldziq arnoldziq

VIP Zasłużony dla elektroda

Posty: 5376

Pomógł: 789

Ocena: 299
Pomocny post? (0)

Post #4
7953703 12 Kwi 2010 21:46

Daj cały HTML. Zwłaszcza jak podłączasz ten plik stylów.
REKLAMA

#5 7954041 12 Kwi 2010 22:32

hipichild hipichild

Poziom 10

Posty: 45

Ocena: 1

Post #5

7954041 12 Kwi 2010 22:32


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<div id="glowna" >
<div id="logo"><img src="tlog.jpg" width="750" height="200" alt="logo" /></div>
<div id="napis"><img src="napisg.jpg" width="750" height="70" alt="napis" /></div>
<div id="menu">
<ul id="lista">
<li><a href="download/"><img src="downloadb.png"/></a></li>
<li><a href="galeria/"><img src="galeriab.png" /></a></li>
<li><a href="http://www.hipichild.net84.net"><img src="hipichildmb.png"/></a></li>
<li><a href="http://www.starebuty.yoyo.pl"><img src="starebutyb.png"/></a></li>
<li><a href="http://www.google.pl"><img src="googleb.png"/></a></li>
</ul>
</div>
<div id="tresc">
<div id="tresc1"><?php 
$dane = file("arty/art1.txt");
$plik=file("emoty.txt");


	$ile=count($plik);
for ($i1=0; $i1<$ile; $i1++){
 $emoty=explode("|+|",$plik[$i1]);
 $dane=str_replace($emoty[0],"<img src=\"$emoty[1]\" style=\"border:0px;\"
  alt=\"$emoty[0]\" />",$dane);
  }
  foreach($dane as $value){
  $exp = explode("`",$value); 
        echo $exp[0]."<br />".$exp[1]."<hr />"; 
		}
?></div>
</div>
</div>

Całego nie będe wklejał bo długi się robi w każdym kolejnym divie z treścią jest to samo co w tym pierwszym zmieniają się tylko numery

REKLAMA

Pomocny post

#6 7954475 13 Kwi 2010 00:04

arnoldziq arnoldziq

VIP Zasłużony dla elektroda

Posty: 5376

Pomógł: 789

Ocena: 299

Pomocny post

Post #6

7954475 13 Kwi 2010 00:04

Pomieszałem "trochę" w twoich plikach.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head> 
<body>
<div id="glowna">
  <div id="menu">
  </div>
  <div id="tresc">
  </div> 
  <div id="logo">
  </div>
  <div id="napis">
  </div>
  <div id="lista">
  </div>
  
</div>
</body>
</html>

i style :

html, body{
text-align: center;
height: 100%;
margin:0;
padding:0;
background-color: #00FF00;
 }
#glowna{
position:relative;
top: 0px;
float: center;
margin: auto;
width:750px;
height: 90%;
border: solid red 3px;
background-color: #C0DCD6;
padding:0 10px;
margin-bottom:20px;
}
#napis{
position:relative;
top: 1px;
}
#menu{
position:relative;
float:left;
width: 200px;
height: 100%;
top: 1px;
left: 1px;
background-color: #00FFFF;
}
#logo{
position:relative;
width: 750px;
height: 20%;
background-color: #ff2020;
top: 10px;
left: 10px;
}
#lista{
list-style-type: none;
padding:0;
background-color: #FFFF00;
}
#tresc{
   position: relative;
   top: 22%;
   right: 20px;
   float:right;
   width: 500px;
   height: 70%;
   margin-bottom:20px;
 background-color: #005000;  
}

Odpal to u siebie i zobacz jak to wygląda.
Nie możesz ustawiać wszędzie 100%, bo ta wysokość, jest liczona w stosunku do nadrzędnego DIV-a. Jak ustawisz wysokość DIV na 200 punktów i kolejny będzie na 100%, to rozjedzie ci się kompletnie.
Prześledź ten plik stylów i zobacz co się dzieje teraz.
Dla ułatwienia, poprzesuwałem trochę pozycje i wstawiłem jakieś kosmiczne kolory

#7 7955272 13 Kwi 2010 11:07

hipichild hipichild

Poziom 10

Posty: 45

Ocena: 1
Autor tematu Pomocny post? (0)

Post #7
7955272 13 Kwi 2010 11:07

Sorki tak się zagalopowałem z tym a miałem zamienione zamiast id miałem class
wstawione teraz jest ok , ale dalej jest to samo z głównym divem że nie chce się rozciągać, mi chodzi o coś takiego jak tutaj : http://www.hipichild.cba.pl/Humorek/ tyle że tą zrobiłem na tabelach a chciałem zrobić to samo na divach ale jednak coś mi to nie wychodzi , i chyba zamiast tego głównego diva będe musiał wstawić jedną tabele
Pomocny post

#8 7955295 13 Kwi 2010 11:13

arnoldziq arnoldziq

VIP Zasłużony dla elektroda

Posty: 5376

Pomógł: 789

Ocena: 299
Pomocny post? (+1)

Pomocny post
Post #8
7955295 13 Kwi 2010 11:13

Jeżeli w głównym DIV-ie ustawisz wysokość na 100% - to będzie on dokładnie wysokości 100% obiektu nadrzędnego. W tym przypadku BODY.
Jeżeli chcesz zamieszczać na nim filmy, tak jak na podanej stronie, to ograniczanie jego wysokości w jakikolwiek sposób, nie ma sensu. Cokolwiek nie ustawisz, to zawsze jakiś film będzie "wystawał" u dołu.
Usuń ustawienia wysokości z BODY i z głównego DIV-a, lub "ręcznie" oblicz jaką wysokość powinny mieć w punktach.
#9 7955315 13 Kwi 2010 11:19

hipichild hipichild

Poziom 10

Posty: 45

Ocena: 1
Autor tematu Pomocny post? (0)

Post #9
7955315 13 Kwi 2010 11:19

jeszcze popróbuję może cos się uda jak nie to jednak zostanie ta jedna tabela główna
kurde przez chwile mi zadziałało jak usunałem te wysokości , ale miałem wtedy na position:absolute; ustawione , jak przestawiłem na relative; to tylko tło i napis obejmuje a jak teraz przestawie spowrotem na absolute to też juz nie działa .
Ale jest światełko w tunelu że może zadziałać , dzięki za radę .

Już doszłem , wszystko mi się ładnie wydłuża ale działa dopuki w treści nie wstawię "float: right;" jak to wstawię to od razu główny div zmniejsza się do rozmiarów logo i napisu . może jeszcze znajdę jakieś inne rozwiązanie , chociaż to nie jest złe z tym że nie wszystkie filmy są pod sobą bo te niżej pod menu wysuwają się na środek , ale dobre i to .
Pomocny post

#10 7955905 13 Kwi 2010 14:23

arnoldziq arnoldziq

VIP Zasłużony dla elektroda

Posty: 5376

Pomógł: 789

Ocena: 299
Pomocny post? (+1)

Pomocny post
Post #10
7955905 13 Kwi 2010 14:23

Podziel głównego DIV-a na 2 mniejsze, np. każdy po 50% szerokości i możesz wszystko pokazać po prawej lub po lewej stronie.
#11 7959921 14 Kwi 2010 14:02

hipichild hipichild

Poziom 10

Posty: 45

Ocena: 1
Autor tematu Pomocny post? (0)

Post #11
7959921 14 Kwi 2010 14:02

Już mi działa wszystko jak trzeba , w treści strony wstawiłem tylko "position:auto;" i nic więcej tam nie dodawałem i samo się ustwia jak trzeba .
Można sprawdzić " www.hipichild.net84.net/humorek/ " strona taka sama jak ta na tabelach tyle że ta jest na divach , jak na razie wrzuciłem tylko 3 pierwsze lepsze filmiki z youtube tak do sprawdzenia .
jak już się dobrze nauczę robić strony to wtedy będe miał więcej czasu na opracowanie ich treści a narazie to tak wrzucam byle co żeby tylko sprawdzić czy strona działa .
Zarejestruj konto, Zaloguj się i bądź aktywny na forum, a wtedy reklamy nie będą się pojawiać. Dołącz do dyskusji i otrzymaj punkty za rejestrację oraz odpowiedzi.

Zainstaluj aplikację Elektroda

Odpowiedz | Nowy temat

Zgłoś naruszenie prawa

Podsumowanie tematu

✨ Użytkownik miał problem z ustawieniem wysokości głównego diva na 100% w CSS, co jest istotne dla dynamicznych stron internetowych. Po kilku próbach i wskazówkach od innych uczestników dyskusji, udało mu się osiągnąć zamierzony efekt poprzez usunięcie ustawień wysokości z elementów nadrzędnych oraz zastosowanie odpowiednich właściwości CSS, takich jak "position: auto;". Wskazano również na problemy związane z używaniem "float: right;", które wpływały na rozmiar głównego diva. Ostatecznie użytkownik zdołał stworzyć stronę działającą na divach, podobną do wcześniejszej wersji opartej na tabelach.
Wygenerowane przez model językowy.

Strona Główna
/
Forum
/
Programowanie
/
Jak ustawić height: 100% dla głównego diva w CSS?

REKLAMA