Sabit genişlikli iki sütun, sağa doğru dinamik genişlikle

Question

sağa, tarayıcı genişliğinin% 100'lük bir bölümünün olması gereken bir içerik uygulamaya çalışıyorum ve bunun içinde sol boyutta bir div ile birlikte olması gerekir 200px genişliğinde ve doğru olduğunda tarayıcı genişliğine bağlı olarak dinamik genişliğe sahip bir div'a sahip olmalıyım. Örnek .. tarayıcı = 900px -> sol div 200px sağ div 700px. Ve div her iki i .. sarıcı div bu 2 div yüksekliği en büyük alacaktır onları koymak ne kadar bilgi olarak dinamik yüksekliğe sahip ..

Şimdiye kadar ben bu html böyle birşey yaptığını

<section id="wrapper"> 
    <div id="list"> 
    </div> 
    <div id="grid"> 
    </div> 
</section> 

css

#wrapper { 
    width: 100%; 
    min-width: 1000px; 
    margin: 0 auto; 
    padding: 40px 0; 
    overflow: hidden; 
} 

Şimdi ben #list ve #grid div'leri css gerekir. Umarım bunun için etkili bir çözüm vardır çünkü daha sonra #grid div içinde yapmak için aynı şeylere sahip olacağım :)

Önceden teşekkürler Daniel!

Answer 1

CSS ile yapabilirsiniz. Hile bir yüzgeç (sol div) ve bir yüzer olmayan div (doğru olan) kullanmaktır. Ayrıca sol (yüzer) div, minimum bir yüksekliğe sahip olmalıdır, aksi takdirde sol (boşluksuz) div solda herhangi bir içerik yoksa sol sütunun yerini alacaktır.

DÜZENLEME:

overflow: hidden; 
display: block; 

overflow: hidden bir sütun olarak davranmasına div hakkını yapar aksi içeriği sol div etrafında akacağını: Sağ <div> ayrıca aşağıdaki kurallara sahip olmalıdır.

varsayılan genişliği (tarayıcı penceresinin tam genişliğini alacağını söylediğinizden beri)% 0 olduğundan ve ayrıca kenar boşluklarını kaldırabildiğinden, #wrapper'un genişliğe ihtiyaç duymadığını unutmayın.

İşte bir örnek (HTML5 tarayıcılarının iyiliği için için <section> değiştirdim ama aynı şekilde çalışır).

Tüm öğeleri ayırt etmek için arka plan renkleri yerleştirdim. http://fiddle.jshell.net/pmv3s/1/show/light/

CSS:

http://jsfiddle.net/pmv3s/1/

İşte tam ekran versiyonu

#wrapper { 
    padding: 40px 0; 
    overflow: hidden; 
    background-color: red; 
    min-height: 5px; 
} 
#list { 
    float: left; 
    width: 200px; 
    background-color: green; 
    overflow: hidden; 
    min-height: 100px; 
} 
#grid { 
    display: block; 
    float: none; 
    background-color: blue; 
    min-height: 100px; 
    overflow: hidden;  
} 

sadece bir set yüksekliği ile bir yüzer kutusu oluşturur

Answer 2

Burada jQuery kullanan bir çözüm var, çünkü sorununuza tam bir CSS çözümü olduğunu düşünmüyorum (ama yanılıyor olabilirim).

http://fiddle.jshell.net/L32uj/