Bu CSS Tam Yükseklik Düzeni neden düzgün görüntülenmiyor?

Question

Güncelleştirme: this design'u elde etmeme yardım edebilecek 50 kişiye bir ödül verdim.

---

Bu yüzden bunu düzeltmek için 2-3 saatliğine çalışıyorum ama bunu yapamıyorum. Belki CSS veya jquery deneyimi olan birisi bana yardımcı olabilir. accomplish this'u deniyorum. Bu my result. Sorun şu ki, tarayıcı penceresini yeniden boyutlandırdığımda, B sütunu içeriği kesiliyor ve size zaman kazandırmak için A sütununun sol tarafında ekstra beyaz boşluk var. Here's a screenshot of what I mean.

CSS:

#public { 
    width:100%; 
} 
#publiC#container { 
    position:absolute; 
    width:100%; 
    height:100%; 
    left:0; 
    top:0; 
    min-width:1050px; 
} 
#public .left { 
    float:left; 
    width:40%; 
    height:100%; 
    background-color:#fff; 
} 
#public .left .content { 
    float:right; 
    width:365px; 
    margin-top:20px; 
    text-align:center; 
} 
#public .left .platforms { 
    margin-top:40px; 
} 
#public .left .aila { 
    display:block; 
    margin-top:25px; 
} 
#public .left .copy { 
    margin-top:20px; 
    color:#171515; 
    font:bold 12px Arial, Verdana; 
} 
#public .right { 
    float:right; 
    width:60%; 
    height:100%; 
    overflow:hidden; 
} 
#public .right .content { 
    float:left; 
    width:665px; 
    min-height:704px; 
    margin-top:20px; 
    background:url(images/public-right-shadow.png) no-repeat left top; 
} 

HTML:

<div id="public"> 
    <div id="container"> 
    <div class="left"> 
     <div class="content"> 
     <img src="images/logo2.png" alt="" class="logo" /> 
     <img src="images/supported-platforms.png" class="platforms" /> 
     <div class="copy">&copy; all right reserved 2012</div> 
     </div> 
    </div><!--.left--> 
    <div class="right"> 
     <div class="content"> 
     Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. 
     </div> 
    </div><!--.right--> 
    </div><!--#container--> 
</div><!--#public--> 

ben Senin sorunun bu genişlik değerleri gibi görünüyor bana, ancak, aynı çıktıyı çoğaltmak görünmemektedir

Answer 1

Siz ve sizlere, sorunuza eklediğiniz görüntüye göre çalıştığını söyleyebilirim. Bakınız http://joshdavenport.co.uk/staging/swd/.

farklar şunlardır:

#publiC#container { 
    position:absolute; 
    width:100%; 
    height:100%; 
    left:0; 
    top:0; 

    min-width: 960px; 
} 

Bu min-width ayar sayfasının boyutunu küçültmeyi yaparken tasarım sola sıkı uyum sağlar.

#public .right .content { 
    /* change padding value to whatever feels right */ 
    padding-right: 10px; 
    float:left; 
    /* this loses the fixed size though */ 
    min-height:704px; 
    margin-top:20px; 
    background:url(images/public-right-shadow.png) no-repeat left top; 

    width: 510px; 
    padding: 10px 40px; 

} burada width bu eleman sağlamak

tüm zamanların aynı genişliğe kalır ve padding uzak sol alandan kalır sağlar. Muhtemelen bunu düzeltmek isteyeceksiniz.

Answer 2

Hem içerik sınıfı nesneleriniz.Önemli iki nesneye sahipsiniz, özel değerler pencerenizin boyutunun% 40 ve% 60'ını oluşturur. Ancak bunların içinde mutlak genişlik değerlerine (365px ve 665px) sahipsiniz. Ancak sen it.Which içeride 665px genişliği neredeyse kesindir wraping nesnesi taşmalarından koyuyoruz, genişliğin px - enshot kararın bu senin sağ sütun, #public .right, yaklaşık 600 + kesilerek demektir , 1,076px × 784px olduğunu. Kaçak metin için geçerli bir alan yaratmak için. Taşan metin probleminiz için orada problemi arardım. Sen sağ tarafına içeriğini yüzen çünkü

Şimdi bu .left Kişisel #public sol tarafında ekstra alan için muhtemelen oluşur.

Ama dediğim gibi ben bu doesnt ile müdahalesi Kişisel sorunu çözerseniz aynı outcome.So, daha sormaya çekinmeyin çoğaltmak olamaz.

DÜZENLEME: Eğer

min-width ind 1030px genişlik destekleyen olsa bile Kişisel Sağ Yan sorunu için , 1050;

Sizin

kamu .right

max 630 de bundan alır, ama o Sen Bu kod Kişisel sorunu çözecektir 665px

uyacak şekilde çalışıyoruz

Answer 3

İşte ben Bunu nasıl uygulamaya çalışabilirim. JQuery'yi kullanarak sol ve sağ yükseklikleri ayarlıyorum. Ayrıca sol ve sağ gibi elemanlar için sınıflar yerine ID'leri kullanmak için işaretlemeyi biraz değiştirdim, böylece jQuery seçicisi daha hızlı olacak.

CSS:

/* apply a natural box layout model to all elements */ 
    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 

    html, 
    body 
    { 
     width:100%; 
     height:100%; 
     margin:0; 
     padding:0; 
    } 
    #public 
    { 
     width:100%; 
     height:100%; 
    } 

    #publiC#container 
    { 
     min-width:1050px; 
    } 

    #publiC#left 
    { 
     float:left; 
     width:40%; 
    } 

    #publiC#left .content 
    { 
     margin-top:20px; 
     width:365px; 
     float:right; 
    } 

    #publiC#left #logo img 
    { 
     max-width:100%; 
     background-color:#e5e5e5; 
    } 

    #publiC#left #platforms 
    { 
     background-color:#888; 
     height:30px; 
    } 

    #publiC#right 
    { 
     float:left; 
     width:60%; 
     background-image:url(images/bg_public.jpg); 
    } 

    #publiC#right .content 
    { 
     height:100%; 
     padding:20px; 
     background:url(images/public-right-shadow.png) no-repeat left top; 
    } 

HTML:

<div id="public"> 
    <div id="container"> 
    <div id="left"> 
     <div class="content"> 
     <div id="logo"><img src="images/logo2.png" alt="" /></div> 
     <div id="platforms"><img src="images/supported-platforms.png" /></div> 
     <div id="copy">&copy; all right reserved 2012</div> 
     </div> 
    </div><!--.left--> 
    <div id="right"> 
     <div class="content"> 
     Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. 
     </div> 
    </div><!--.right--> 
    </div><!--#container--> 
</div><!--#public--> 

jQuery: Ben bazı basit ayarlamalar yaptık

$(document).ready(function(){ 
    var WindowResize = function(){ 
     var WindowHeight = $(window).height(); 
     $('#left, #right').css('height', WindowHeight); 

    } 

    WindowResize(); 
    $(window).bind('resize', WindowResize); 
});