Układ CSS, który wypełnia dostępne miejsce

Próbuję zrobić pozornie prosty układ strony, ale uderzam w ścianę.Układ CSS, który wypełnia dostępne miejsce

ja bym jak zrobić wszystko czysto z CSS (żadnych tabel do Muck rzeczy i nr rzeczy javascript dynamicznie zmiana rozmiaru)

które chciałbym posiadać:

pozycji o stałej wysokości
stopka o stałej wysokości
Lewy pasek boczny o stałej szerokości
Prawy boczny pasek o stałej szerokości
Cały układ zawsze wypełnia całą rzutnię (tj. gdy użytkownik zmienia rozmiar okna, układ dorasta do nowego rozmiaru)

Innymi słowy:

 

|<    Total width is 100% of viewport    >| 

+--------------------------------------------------------------+ --- 
|     Header with a fixed height     | ^
|--------+-------------------------------------------+---------+  
|  |           |   |  
|  |           |   |  
| Left |           | Right | Total 
| with |  Center grows in height/width  | with | height 
| fixed |  and has scrollbars if necessary  | fixed | is 
| width |           | width | 100% 
|  |           |   | of 
|  |           |   | viewport 
|  |           |   | 
|--------+-------------------------------------------+---------| 
|     Footer with a fixed height     | v 
+--------------------------------------------------------------+ ---

Części, które dają mi najwięcej problemów są

mającego paski boczne i środek mają wysokość równą wysokości okna roboczego minus wysokości nagłówka i stopki.
o środku mającym szerokość równą szerokości okna roboczego minus szerokości z dwóch bocznych pasków

Nie mam problemu z wymaganiem od użytkowników posiadania nowoczesnej przeglądarki.

Zdaję sobie sprawę, że podobne pytania do tego zostały poproszone przed, jak

Zrób div wypełnienia pozostałą przestrzeń (http://stackoverflow.com/questions/1717564)
Trzy wiersz układ tabelek CSS ze środkowym rzędzie, który wypełnia pozostały przestrzeń (http://stackoverflow.com/questions/1703455)
Tworzenie Div 2, jedna zajmuje pozostałą przestrzeń (http://stackoverflow.com/questions/1717564)

... i wydaje się, że nie ma dobrego rozwiązania. Te odpowiedzi są nieco stare, więc mam nadzieję, że ktoś zna tę sztuczkę.

Tak, jestem świadomy, że to wydaje się być banalne osiągnąć stosując <table>, a po „walić głową w ścianę” I rzeczywiście próbować osiągnąć stosując układ tabeli. Niestety, dzięki takiemu podejściu nie udało mi się uzyskać sekcji środkowej pokazującej paski przewijania (używając overflow: auto), gdy zawartość jest zbyt duża.)

Źródło

2010-03-29 Jared I

Nie można tego zrobić w trybie wielu przeglądarek bez używania tabel. Tabele mogą to robić w sposób trywialny. Spędzisz dużo czasu waląc głową o ścianę. Tabele są narzędziem i jeśli "czysty" CSS nie może zrobić tego, co chcesz (czego nie może w tym przypadku), musisz przejść przez to i użyć narzędzi, które mogą. – cletus

@cletus: Jeśli chodzi o "Tabele można to zrobić w sposób trywialny" ... czy może również umożliwić przewijanie części dla obszaru centralnego? Naprawdę starałem się zrobić wszystko przy pomocy tabel i prawie zadziałało, z wyjątkiem części przewijanej (tylko chrome zdawało się respektować 'przepełnienie: auto' kiedy jest używane wewnątrz' td') –

To jest stosunkowo proste z CSS, przeglądarka krzyżowa i nie potrzebujesz tabel. Spróbuję połączyć link z próbką znaczników, ale wychodzę z miasta w poniedziałek wieczorem przez tydzień, więc nie wiem, czy będę w stanie to zrobić do tego czasu. – Rob

co z THIS?
działa z konquerorem (KHTML), chrome (webkit) i firefox (gecko). jak ostatnio, prawdopodobnie będzie to barf w IE6.

<html><body style="margin: 0; padding: 0;"> 
    <div style="position: absolute; background: #faa; 
       height: 100px; top: 0px; width: 100%;">header</div> 
    <div style="position: absolute; background: #afa; 
       top: 100px; bottom: 100px; left: 0; width: 100px;">left</div> 
    <div style="position: absolute; background: #afa; 
       top: 100px; bottom: 100px; right: 0; width: 100px;">right</div> 
    <div style="position: absolute; background: #faa; 
       height: 100px; bottom: 0px; width: 100%;">footer</div> 
    <div style="position: absolute; background: #aaf; 
       bottom:100px; left: 100px;top: 100px;right: 100px; overflow: auto;"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt tempor 
velit quis volutpat. Nulla pharetra pulvinar arcu sed lacinia. Nulla ultrices aliquet sem, 
vitae commodo elit condimentum ut. Nulla consectetur facilisis nibh, et tempus purus 
pellentesque nec. Ut eu nibh ut arcu mattis luctus. Cras at interdum quam. Pellentesque 
imperdiet mi vitae felis sollicitudin iaculis. Maecenas accumsan tortor neque, at posuere 
felis. Quisque ultricies mi quis dolor pellentesque elementum. Maecenas quis nunc tortor. 
Cras eu velit faucibus nulla volutpat mollis. Aliquam fermentum lobortis diam ut pharetra. 
Duis mattis posuere fringilla. Morbi consectetur mauris vel libero pellentesque varius. 
Aenean leo enim, placerat a feugiat nec, ultrices et nulla. Etiam tincidunt urna id justo 
molestie faucibus. Cras neque enim, semper et sodales eu, volutpat nec urna. Vestibulum 
interdum arcu et ante egestas ut lacinia dui semper. Cras ligula lacus, aliquet nec dapibus 
ac, commodo vitae libero. In gravida venenatis sapien a convallis.</p> 


    <p>Nulla ac risus eu velit pulvinar pretium. Etiam porttitor viverra sollicitudin. 
Donec lectus mi, posuere quis luctus facilisis, lacinia non ante. Sed sed mi neque. Etiam 
neque risus, bibendum et tincidunt vel, pharetra nec risus. In hac habitasse platea 
dictumst. Nam sollicitudin condimentum lorem, quis dignissim turpis sagittis nec. 
Pellentesque diam nunc, rhoncus quis lobortis id, lacinia quis lorem. Maecenas tempor metus 
nec velit facilisis in rhoncus lectus varius. Integer mollis, odio ut pharetra varius, elit 
nulla pellentesque neque, a egestas est justo dapibus neque. Vivamus a mauris massa, sit 
amet commodo orci. Aliquam nec iaculis sapien. Suspendisse ornare, tortor eget mattis 
tempus, nulla ligula fermentum elit, vitae euismod odio metus ac risus. Etiam iaculis 
dignissim consectetur. Nunc molestie lorem ac neque pulvinar vitae eleifend justo 
facilisis.</p> 

    <p>Duis a sem turpis, et cursus arcu. Suspendisse potenti. Sed eu risus orci, eget 
bibendum justo. Praesent dapibus porttitor mauris, ac sollicitudin eros pretium quis. 
Curabitur mi eros, aliquam et ultrices et, adipiscing ut mauris. Nunc pretium malesuada nisi 
laoreet consectetur. Phasellus mi arcu, rutrum in blandit in, consectetur non risus. 
Vestibulum enim lacus, aliquam eu ultrices a, tempor ut turpis. Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Curabitur rhoncus faucibus sapien, quis vulputate eros tempus 
consequat. Vivamus id metus massa. Vivamus aliquet enim quis sem viverra eu molestie elit 
cursus.</p> 

    <p>Mauris at lorem massa. Aliquam risus ligula, vestibulum et placerat condimentum, 
pellentesque sit amet justo. Cras tempor sollicitudin ultrices. Aliquam sed elit sapien. 
Praesent consectetur molestie vehicula. Pellentesque quis lectus et nunc accumsan feugiat. 
Ut rhoncus aliquet libero sed rhoncus. Fusce egestas nunc eu elit vestibulum placerat. Class 
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
Phasellus vitae nisi ante, id fermentum justo.</p> 

    <p>Donec iaculis magna nec elit fringilla imperdiet. Proin mauris sem, pellentesque sed 
ultrices ac, luctus ac elit. Donec blandit, orci ac volutpat luctus, turpis sem malesuada 
tellus, eget porta magna nisi vitae quam. In vitae scelerisque urna. Proin ante odio, 
ultrices lobortis scelerisque at, dictum non justo. Pellentesque tincidunt congue leo 
malesuada ullamcorper. Quisque dapibus, massa dignissim gravida blandit, augue felis 
vehicula urna, et ullamcorper turpis orci sit amet nibh. Ut vitae consequat nibh. 
Pellentesque turpis justo, ultrices ac porta in, pretium quis quam. Donec purus nisi, 
dignissim vitae hendrerit vel, hendrerit ac sapien. Fusce facilisis purus a libero elementum 
ultrices. Nunc in libero congue ipsum tempor suscipit. Pellentesque pharetra pretium 
volutpat. Nam sapien arcu, viverra vitae euismod sit amet, mollis nec arcu. Phasellus at 
elit metus, sit amet tempus turpis. Phasellus mattis justo ut est varius facilisis ut et 
leo. Phasellus congue cursus est eget luctus. In eleifend diam at enim ultricies a lacinia 
mauris molestie. Nunc porttitor bibendum vulputate. Pellentesque quis risus vel mi 
pellentesque imperdiet vitae ac nunc.</p> 

    </div> 
    </body></html>

Źródło

2010-03-29 05:16:41

Ohh, dobry! Myśl o absolutnym pozycjonowaniu dla ustawienia rozmiaru elementu, który przekroczył mój umysł podczas pisania mojego, ale nie myślałem o nim jako o rozwiązaniu problemu - bardzo miło! –

Idealny! Wiedziałem, że musi być rozsądny sposób, aby to zrobić ... –

Myślę, że jest to trochę dziwne. Mimo to, zrobiłem na to strzał, a być może dotarłem tak daleko, jak to tylko możliwe, ale może użyłem innej metody, która mogłaby być przydatna. Jestem bardzo zainteresowany, aby sprawdzić, czy Rob ma lepszy sposób.Moja metoda działa z jednym problemem: zawartość jest przewijana, ale nie widać pasków przewijania. Nie mogę wymyślić sposobu, aby to naprawić. W każdym razie, oto co wymyśliłem: http://www.happyspork.com/layout_test.html

Źródło

2010-03-29 01:14:02

Jeśli ktoś jest zainteresowany mam opracowany układ, który wykorzystuje css naśladować zachowanie dynamiczne table [użyciem div s]. Działa w przeglądarce Chrome, Firefox i IE> 7.

DEMO, mieć go na zmianę rozmiaru okna

W obecnej wszystkie pięć elementy rosną jak ich odpowiednie zawartość zrobić jednak, jeśli naprawdę chcesz lewej i prawej strony ustalona tylko zastosować width regułę .east i .west.

Posiadasz z nim fiddle.

Kod:

<div class="view" style="height:100%; width:100%"> 
    <div class="north"> 
     n 
    </div> 

    <div class="middle"> 
     <div class="west"> 
      w 
     </div> 

     <div class="centre"> 
      c 
     </div> 

     <div class="east"> 
      e 
     </div> 
    </div> 

    <div class="south"> 
     s 
    </div> 
</div>

html, body { 
    height : 100%; 
    margin : 0; 
} 

.view, 
.view > .middle { 
    display : table; 
} 

.view > .north, 
.view > .south { 
    height : 1px; 
    display : table-row; 
} 
.view > .north { vertical-align : top; } 
.view > .south { vertical-align : bottom; } 

.view > .middle > div { 
    display : table-cell; 
} 
.view > .west, 
.view > .east { 
    width : 1px; 
} 

/*div { border : 1px solid black; }*/

Proste markup, bez JS i dynamiczny układ. Odkomentuj linię css border, aby zobaczyć, co się dzieje.
W dolnej części pytania widzę, że próbowałeś używać tabel, ale z problemami. Umieszczanie max-height na centre lub middle może być tym, czego potrzebujesz (dla rzeczy na pasku przewijania). Może to może ci pomóc.

Źródło

2014-01-21 06:40:33 Hashbrown

Układ CSS, który wypełnia dostępne miejsce

Odpowiedz

Powiązane problemy