CSS o dwie kolumny układ

Question

Nigdy nie myślałem, że pisanie prostego dwa układ kolumn jest tak skomplikowana, za pomocą CSS .... haha ​​

Co chcę zrobić jest następujący:

1. Kiedy wysokość zawartości div przekracza wysokość rozmiaru ekranu, pasek przewijania istnieje tylko w div zawartości. Użytkownicy mogą tylko przewijać zawartości div ale sidebar zachowuje statyczne

2. Dwie kolumny powinny mieć taką samą wysokość

   Mój układ jest:

< -------- ------- container ------------------->

< ----------------- --header ------------------>

< ----- pasek boczny -------> < --------- treść --->

< --------------- --- stopka ------------------->

< --- Koniec pojemnika --------------- ---------->

Oto mój plik css: http://137.189.145.40/c2dm/css/main.css

Dziękuję/

Answer 1

#WorldContainer 
{ 
    width: 1000px; 
    margin: auto; 
    overflow: hidden; 
} 

.ContentColumn 
{ 
    float: left; 
    width: 500px; 
    overflow: auto; 
} 

<div id="WorldContainer"> 
    <div class="ContentColumn"> 
     Content goes here! 
    </div> 
    <div class="ContentColumn"> 
     Content goes here! 
    </div> 
</div> 

To da ci stronę, na której główny div nie może przewinąć, ale dwie kolumny div mogą. Będą obok siebie. Twoje pytanie nie było dokładnie jasne, więc mam nadzieję, że właśnie o to prosiłeś.

EDYCJA: W odpowiedzi na pokazanie przykładowej strony.

Twój problem jest bardzo prosty.

Wszyscy twoi divy mają regułę wysokości height: 100%; Kiedy używasz procentowej wysokości, robisz to jako procent kontenera, w którym się znajduje, tj. Jego kontener macierzysty. NIE jest to procentowa wysokość całego okna.

Każdy pojemnik określa procentową wysokość, więc wynik wynosi 0. Podaj zewnętrznemu elementowi div stałą wysokość, a problem zostanie rozwiązany.

dodatkowe Edit:

Jeśli obawiasz się upewniając się, że div oddalonych zawsze ciągnie do dołu okna to jest to rozwiązanie css za pomocą pozycjonowania bezwzględnego:

#OutermostDiv 
{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 

Stosując to podejście nadal powoduje obliczoną wysokość, nawet jeśli zewnętrzny div nie ma sztywnej zakodowanej wysokości. Umożliwi to użycie wysokości procentu na wewnętrznych elementach div i zachowanie zewnętrznego elementu div, który rozciąga się od góry do dołu widocznego okna.

Answer 2

trzeba by ustawić elementu kontenera do overflow:hidden; , a twoja zawartość div overflow:scroll; (i ewentualnie overflow-x:hidden;, aby ukryć poziomy pasek przewijania). Problem polega na tym, że jeśli zawartość paska bocznego będzie miała tę samą wysokość, trzeba będzie mieć dwa paski przewijania - jeden dla zawartości i jeden dla paska bocznego.

Prawdopodobnie można rozwiązać ten problem, używając innego elementu kontenera wokół tylko paska bocznego, o zawartości &, i ustawiając na nim overflow: scrollbar; overflox-x:hidden; zamiast paska bocznego/zawartości.

Answer 3

Możesz również użyć display:table i display:table-cell, aby utworzyć kolumny, jeśli napotkasz trudności z float. Oto CSS:

#container 
{ 
width:960px; 
margin:0; 
padding:0; 
display:table; 
} 
#sidebar 
{ 
width:300px; 
display:table-cell; 
} 
#content 
{ 
width:660px; 
display:table-cell; 
} 

i HTML jest:

<div id="container"> 

<div id="sidebar"> 
<!-- Sidebar Content Here --> 
</div> 

<div id="content"> 
<!-- Content Here --> 
</div> 

</div> 

Nadzieja to rozwiąże problem. Ale display:table nie działa w niektórych starych przeglądarkach.