Forum PHP.pl > [CSS]3 kolumny 100% width i height

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]3 kolumny 100% width i height

ShadowD

8.03.2013, 21:07:35

Szukam rozwiązania na coś takiego:
http://d.pr/i/v3zB

Ogólnie to ma być strona na 100% wysokości 100% szerokości z 3 kolumnami i belką na górze, chciał bym wszystko zrobić za pomocą css - niby jest to proste ale tak na prawdę to skomplikowany lay.

To co mi się udało wykombinować za pomocą sieci:
1. użycie position: absolute; top: 0px; right: 0px; itd. tym sposobem można osiągnąć taki szablon, jednak przy powiększaniu się stronty ponad 100% (ponad pełen ekran) pojawia się pasek przewijania, ale kolumny sięgają tylko do pewnego miejsca.
2. Tabelki - da się to zrobić bez problemu i działa jak należy w 100%, ale tabelka nie służy do robienia szablonów stron...
3. http://www.dynamicdrive.com/style/layouts/...ed-fluid-fixed/ - działa bardzo ładnie, ale pojawia się problem z uzyskaniem height: 100%;, wszystko było by super gdyby w css dało się napisać tak jak na screenie czyli 100% - 40px tak by całość dać na full minus wysokość headera - zostaje użycie js czego chciał bym uniknąć.

Macie jakiś pomysł jak to napisać tak by nie użyć js lub tabelek?

Kaarpiik

8.03.2013, 22:08:33

[HTML] pobierz, plaintext 
<div id="top"></div>
<div id="lewa"></div>
<div id="srodek"></div>
<div id="prawa"></div>
[HTML] pobierz, plaintext

CSS:

[XML] pobierz, plaintext 
#top {
width: 100%;
height: 40px;
float: left;
}
#lewa {
width: xx;
height: 100%;
float: left;
}
[XML] pobierz, plaintext

i analogicznie

kamil_lk

8.03.2013, 23:44:46

http://jsfiddle.net/Q7HYS/

[CSS] pobierz, plaintext 
*{
	margin: 0;
	padding: 0;
}
 
html, body{
	width: 100%;
	height: 100%;
	min-width: 980px;
 
}
 
#kontener{
	height: 100%;
	overflow: hidden;	
}
 
#top{
	width: 100%;
	height: 40px;	
	background: #999;
}
 
#content{
	height: 100%;
	overflow: hidden;
}
 
#content div{
	height: 100%;	
}
 
.menu-lewe{
	width: 230px;
	float: left;
	background: #666;	
}
 
.tresc{
	float: left;
}
 
.menu-prawe{
	float: right;
	width: 230px;	
	background: #666;
}
[CSS] pobierz, plaintext

[HTML] pobierz, plaintext 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="kontener">
 
    <div id="top">TOP</div>
    <div id="content">
    	<div class="menu-lewe">menu - lewe</div>
        <div class="tresc">tresc</div>
        <div class="menu-prawe">menu - prawe</div>
    </div>
 
</div>
</body>
</html>
[HTML] pobierz, plaintext

ShadowD

9.03.2013, 07:21:14

@Kaarpiik próbowałeś jak działa Twój kod? height: 100%; to szerokość całej powierzchni na stronę więc dodając header tworzymy 100% + 40px gdzie pojawia nam się scroll właśnie na te 40px.

@kamil_lk Twoje rozwiązanie faktycznie działa, ale ma pewne problemy - nie dość że na start ścinana 40px to jeszcze w przypadku większej ilości elementów na stronie gdzie powinien pojawić się pasek przewijania Twój sposób po prostu zetnie kawałek kodu. ;-( Dodatkowo tworząc taki lay zawartość środka będzie zależna od jego szerokości - np formy i wszystkie inne elementy będą mieć width: 98%; margin: 0 1%; a ten sposób nie zadziała w tym przykładzie - musiał bym dać na stałe width formom, ale w takim przypadku przy dużej rozdzielczości zostaną paski pustego miejsca - a tego chce uniknąć.

Może macie inne pomysły?

!*!

9.03.2013, 09:37:02

Może tak: http://jsfiddle.net/92ENJ/show/ tylko nie pamiętam regułki css która da header na 100% szerokości, w przypadku display:table-row.

wNogachSpisz

9.03.2013, 10:44:09

Widzę że każdy z Was zatrzymał się w rozwoju w połowie lat 90'tych.
Niniejszym informuję Was, że minęło trochę czasu i w sieci jest zatrzęsienie wyśmienitych framewróków HTML+CSS na każdą okazję. Np. ten:

http://workless.ikreativ.com/scaffold.html

Oczywiście najlepiej sięgnąć po tw.bootstrap lub fundation.

!*!

9.03.2013, 10:48:50

Faktycznie, świetny, tylko... niewiele wnosi.

wNogachSpisz

9.03.2013, 10:53:48

Cytat(!*! @ 9.03.2013, 10:48:50 )

Faktycznie, świetny, tylko... niewiele wnosi.

Troche jednak wnosi
- dostarcza przemyślany, semantyczny zestaw znaczników HTML i klas CSS których łatwo się nauczyć i które są napisane w taki sposób aby nie kolidować z innymi elementami strony wykonanymi bez zwracania uwagi na framework
- sprawia że strona wyświetla się tak samo na każdym urządzeniu/przeglądarce/systemie operacyjnym
- nie musisz zajmowac się eliminowaniem bugów, robią to członkowie projektu, więc utrzymanie kodu staje się znacznie tańsze
- jest duża szansa, że któregoś dnia przeglądaki będą optymalizowane pod frameworki html+css, w skutek czego Twoja strona stanie się wyjątkowo wydajna.
- i wiele, wiele innych

kamil_lk

9.03.2013, 11:02:09

Pytanie, czy rozwiązuje postawiony problem?

!*!

9.03.2013, 11:06:19

wNogachSpisz - Ty tak na poważnie? Nazwanie takich "kodów" frameworkami, to już solidne nadużycie. W 99% przypadków takie gotowce zwyczajnie się nie sprawdzają.
Nie widzę też tam rozwiązania które przydałoby się autorowi tematu. Już nie mówiąc o tym, że jakieś rozwiązania są przypisane do nazw klasy.

Sztuka dla sztuki, ale każdy używa tego co chce.

wNogachSpisz

9.03.2013, 11:08:23

@kamil_lk
Tak, rozwiązuje, jak każdy framework dostarcza tzw. "grid system".

@!*!
Odmawiam dalszej rozmowy z Tobą, nie masz bladego pojęcia o developowaniu frontentendu.

!*!

9.03.2013, 11:14:38

Podaj przykład bezinwazyjnego użycia takiego gotowca w dwóch przykładach.
1. bardzo łatwy, szablon ma być taki jaki zaproponował autor
2. może być obojętnie co, ale już istniejące np. strona wortalu + Twoje modyfikacje

Zakładając że pierwszy szablon wyklepiesz metodą kopiuj/wklej to jak unikniesz kolizji w nazwach przy późniejszych modernizacjach? W drugim przykładzie może być znacznie gorzej, bo kolizja może być już od początku.
Jeszcze przestrzeni nazw do html i css nie wprowadzili, a samo dziedziczenie z możliwością resetu to za mało. Tyle w temacie.

ps. I przyznam Ci racje, coś takiego ma sens, tylko i wyłącznie jak chcemy na szybko zaprojektować szkic.

Cytat(wNogachSpisz)

developowaniu frontentendu

wNogachSpisz

9.03.2013, 11:19:27

Jeśli potrebujesz tylko niektórych funkcji frameworka, to np. tw.bootstrap pozwala wygenerować paczkę zawierającą tylko wybrany zestaw modułów

http://twitter.github.com/bootstrap/customize.html

Musisz odznaczyć wszystko za wyjątkiem "Grid system".

!*!

9.03.2013, 11:29:25

To prawda, generator dobra rzecz, ale to nie rozwiązuje problemu. Chce mieć formularze, buttony i navbar, to wygenerowałem sobie CSS na ichniejszej stronie. Dostałem 1789 linijek kodu, ale to mniejsza z tym, kod do navbaru wygląda np. tak:

[CSS] pobierz, plaintext 
.navbar-inverse .navbar-search .search-query {
  color: #ffffff;
  background-color: #515151;
  border-color: #111111;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
.navbar-inverse .navbar-search .search-query:-moz-placeholder {
  color: #cccccc;
}
[CSS] pobierz, plaintext

UPS, ale ja mam już u siebie w html coś co ma klasę navbar-search i/lub search-query (już nie wspominając o samym form, input itp) ... czyli muszę zmieniać ten plik CSS, lub swój html? Bo może o czymś nie wiem, i są jednak w tym jakieś przestrzenie nazw?

_Borys_

9.03.2013, 12:18:51

Odnośnie tematu

[HTML] pobierz, plaintext 
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
	<style type="text/css">
<!--
#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 40px;
    -webkit-box-shadow:inset 0px 0px 0px 5px red;
    -moz-box-shadow:inset 0px 0px 0px 5px red;
    box-shadow:inset 0px 0px 0px 5px red;
}
 
#divLeft {
    position: absolute;
    top: 40px;
    left: 0px;
    width: 230px;
    bottom: 0px;
    -webkit-box-shadow:inset 0px 0px 0px 5px green;
    -moz-box-shadow:inset 0px 0px 0px 5px green;
    box-shadow:inset 0px 0px 0px 5px green;
}
#divCenter {
    position: absolute;
    top: 40px;
    left: 230px;
    right: 230px;
    bottom: 0px;
    -webkit-box-shadow:inset 0px 0px 0px 5px brown;
    -moz-box-shadow:inset 0px 0px 0px 5px brown;
    box-shadow:inset 0px 0px 0px 5px brown;
    }
#divRight {
    position: absolute;
    width: 230px;
    top: 40px;
    right: 0px;
    bottom: 0px;
    -webkit-box-shadow:inset 0px 0px 0px 5px green;
    -moz-box-shadow:inset 0px 0px 0px 5px green;
    box-shadow:inset 0px 0px 0px 5px green;
}
 
-->
</style>
</head>
<body>
<div id="divContainer">
<div id="divHeader"></div>
<div id="divLeft"></div>
<div id="divCenter"></div>
<div id="divRight"></div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

wNogachSpisz

9.03.2013, 13:34:00

Kolejny przybysz z przeszłości

!*!

9.03.2013, 13:37:26

Cytat(wNogachSpisz @ 9.03.2013, 13:34:00 )

Kolejny przybysz z przeszłości

To pokażesz w końcu ten grid system jak autor pytał, lub przestrzeń nazw czy tylko będziesz nabijał posty?

ShadowD

9.03.2013, 20:01:43

Wymieniałem to rozwiązanej jako jedno z możliwych i właśnie w taki sposób mam to teraz zrobione, niestety ma to problemy przy content > 100%, wstaw sobie:

[HTML] pobierz, plaintext 
        1<br>
        2<br>
        3<br>
        4<br>
        5<br>
        6<br>
        7<br>
        8<br>
        9<br>
        0<br>
[HTML] pobierz, plaintext

tak z 10 razy i wszystko się rozjedzie - a dokładnie mówiąc wszystko wygląda ok do czasu zjechania screllem niżej. :/ Trzeba by dopisać js który po resize() ustalał by nie 100% a wartość aktualną.

Cytat(_Borys_ @ 9.03.2013, 12:18:51 )

Odnośnie tematu

[HTML] pobierz, plaintext 
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
	<style type="text/css">
<!--
#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 40px;
    -webkit-box-shadow:inset 0px 0px 0px 5px red;
    -moz-box-shadow:inset 0px 0px 0px 5px red;
    box-shadow:inset 0px 0px 0px 5px red;
}
 
#divLeft {
    position: absolute;
    top: 40px;
    left: 0px;
    width: 230px;
    bottom: 0px;
    -webkit-box-shadow:inset 0px 0px 0px 5px green;
    -moz-box-shadow:inset 0px 0px 0px 5px green;
    box-shadow:inset 0px 0px 0px 5px green;
}
#divCenter {
    position: absolute;
    top: 40px;
    left: 230px;
    right: 230px;
    bottom: 0px;
    -webkit-box-shadow:inset 0px 0px 0px 5px brown;
    -moz-box-shadow:inset 0px 0px 0px 5px brown;
    box-shadow:inset 0px 0px 0px 5px brown;
    }
#divRight {
    position: absolute;
    width: 230px;
    top: 40px;
    right: 0px;
    bottom: 0px;
    -webkit-box-shadow:inset 0px 0px 0px 5px green;
    -moz-box-shadow:inset 0px 0px 0px 5px green;
    box-shadow:inset 0px 0px 0px 5px green;
}
 
-->
</style>
</head>
<body>
<div id="divContainer">
<div id="divHeader"></div>
<div id="divLeft"></div>
<div id="divCenter"></div>
<div id="divRight"></div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

Korzystałem z twitterbootstrap kiedyś przy małym projekcie robiony na bardzo szybko i od razu w html bez grafiki - ok sprawdza się i dało by się to wykonać, ale czy na prawdę chce taką kobyłę do bardzo prostego lay'a? Ma być to panel admina który i tak jest już przeładowany js'em i zamiast bootstrapa wolał bym skorzystać z sposobu Fixed-Fluid-Fixed lub choćby z absolutów i dodać js w 2 liniach mówiący o zmianie height dla body.

@!*! ma rację bootstrap css tak, ale tam gdzie jest niezbędny np. przy projektowaniu, a nie wszędzie gdzie się da.

Jest dość nowoczesny sposób w css - calc(). Niestety obsługa tego wynalazku jest jeszcze kulejąca, no ale cóż gradienty też są wynalazkiem, może ktoś jeszcze zna jakiś wspaniały trick i się podzieli. ;-)

[HTML] pobierz, plaintext 
                width: 100%;
                min-height: -webkit-calc(100% - 40px);
                min-width: -o-calc(100% - 400px);
                min-height: -moz-calc(100% - 40px);
                min-height: calc(100% - 40px);
[HTML] pobierz, plaintext

http://caniuse.com/#search=calc

Bez problemu można w nim zrobić też kolumny poziomo, teraz tylko się modlić by to było jeszcze bardziej wspierane i by ie8 zmiksowało z rynku.

wNogachSpisz

9.03.2013, 20:10:34

Cytat(ShadowD @ 9.03.2013, 20:01:43 )

@!*! ma rację bootstrap css tak, ale tam gdzie jest niezbędny np. przy projektowaniu, a nie wszędzie gdzie się da.

Bo?
Nieuzasadniając swoich decyzji narażasz się na śmieszność. To co robisz jest według mnie głupie i wynika z niewiedzy.

ShadowD

9.03.2013, 20:38:16

Ok, proszę pokaż kod w twitter bootstrap który:

1. zajmuje 100% wysokości lub więcej jeśli zawartość jest większa niż 100%
2. ma header 100% width i 40 height
3. pod headerem są 3 kolumny - dwie stałe zawsze po 230px i jedna środkowa typu fluid (100% - 2*230), dodam że wszystkie te elementy mają mieć height 100% minus header, tak by rozciągać się na całą wolną przestrzeń

Próbowałem to przed wypowiedzią ogarnąć, nie siedzę nad tym problemem pierwszy dzień i na prawdę jeśli uda Ci się coś takiego to ok. przyznam Ci rację. Na chwilę obecną sądzę że problemy wynikające z tego to:
1. konflikty nazw
2. w sumie nauka kolejnego "standardu"
3. przy moich próbach miałem problem z 1 stałą kolumną i 2 zmienną - w sumie można by dodać min-width i zmienić lay, ale uważam że 230px w moim przypadku jest idealne i szkoda nawet tych 40px więcej które skrócą treść z lewej i prawej poprzez procentowy udział
4. ogrom js i css które są używane w małym stopniu - w sumie to można sobie podarować każdy ma już przynajmniej 1mb neta.

Na koniec - ja się nie upieram przy 1 rozwiązaniu, myślę po prostu że szkoda mi dodawać nawet okrojonego bootstrapa jak i tak skorzystał bym z niego tylko do tego lay a całość w środku będzie prosta jak but.

wNogachSpisz

9.03.2013, 20:45:29

Cytat(ShadowD @ 9.03.2013, 20:38:16 )

Ile płacisz?

Cytat(ShadowD @ 9.03.2013, 20:38:16 )

myślę po prostu że szkoda mi dodawać nawet okrojonego bootstrapa jak i tak skorzystał bym z niego tylko do tego lay a całość w środku będzie prosta jak but.

Nie szkoda, przeciwnie, jest to jedyna opcja (tw lub inny framework). Za dużo plaftorm żeby swobodnie pisać css i html. Rozleci się. Nawet gdybyś był najwyższej klasy ekspertem, na nic się to zda, któego dnia wyjdzie nowa wersja czegoś tam i twoja strona przestanie działać.

ShadowD

9.03.2013, 21:02:49

Ile płacisz? Jak bym tak brał za każdego posta na tym i innych forach to był bym bogaty, to max 50 linii kodu zakładając każdy znacznik w nowej linii - mogę na piwo albo dwa przelew zrobić, choć i tak to wyzysk. ;P

!*!

9.03.2013, 21:19:09

wNogachSpisz - od kiedy stałeś się trolem na forum?

ShadowD - w zasadzie to zrób to... standardowo + js z resize (raptem 2 linijki kodu) i problem z głowy.

ShadowD

9.03.2013, 21:25:04

Aktualnie stoję nad dylematem js vs calc(), ale mam manię do szukania idealnych rozwiązań - a czasem się tak po prostu nie da. ;-(

Dzięki wszystkim w każdym bądź razie!

!*!

10.03.2013, 10:42:11

Cytat(ShadowD @ 9.03.2013, 20:01:43 )

Wymieniałem to rozwiązanej jako jedno z możliwych i właśnie w taki sposób mam to teraz zrobione, niestety ma to problemy przy content > 100%, wstaw sobie:

[HTML] pobierz, plaintext 
        1<br>
        2<br>
        3<br>
        4<br>
        5<br>
        6<br>
        7<br>
        8<br>
        9<br>
        0<br>
[HTML] pobierz, plaintext

Czekaj... Co Ci się rozjedzie? Wpisując to w article, masz scroll po lewej który przewija cała stronę w dół, wszystkie pola są równe do samego końca. Chcesz, aby główny kontener był cały czas na 100%? To daj overflow dla jego dzieci, wtedy scroll będzie tylko dla nich.

ShadowD

10.03.2013, 13:40:57

O nie zauważyłem Twojego posta, u mnie wygląda to tak - widzę całość, a jak dodam dużo br to robi się scroll, jak nim przewinę to strona dalej jest biała. :/

http://d.pr/i/3Ul - tak to wygląda, a w założeniu te bloki powinny się rozciągać na dół.

!*!

10.03.2013, 13:50:57

Nie możliwe. Musisz coś nadpisywać. Popatrz na kod który podałem, wklej coś w article, 3 kolumny sa przesuwane w dół tak samo.

ShadowD

10.03.2013, 14:02:01

A piszesz o swoim kodzie nie Borysa, Twój pod ff wogóle się nie sprawdza (trzeba toam coś poprawić) pod chrome jest ok, tylko trzeba header jakoś rozciągnąć - no nic pokombinuję, wcześniej miałem to dosłownie na table zrobione i wystarczyło scalić kolumny tu może być gorzej. ;-)

Dzięki.

sebastian.rozmus

10.03.2013, 14:05:09

Spróbuj tego:

[PHP] pobierz, plaintext 
<div style="clear: both"></div>
[PHP] pobierz, plaintext

wNogachSpisz

10.03.2013, 14:09:30

Cytat(!*! @ 9.03.2013, 21:19:09 )

wNogachSpisz - od kiedy stałeś się trolem na forum?

Od kiedy [daruj sobie]

ShadowD

10.03.2013, 18:41:30

@sebastian.rozmus niestety to nie ta bajka - pomogło by dla float. ;-)

Kurde chciałem zaraportować a klikałem pomógł, ale już naprawiłem swój błąd.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.