Perché questo layout pieno altezza CSS non viene visualizzato correttamente?

Question

Aggiornamento: Assegnare una taglia di 50 a chiunque possa aiutarmi a raggiungere this design.

---

Così ho cercato negli ultimi 2-3 ore per risolvere questo problema, ma non riesco a farlo. Forse qualcuno con esperienza CSS o jQuery può aiutarmi. Sto provando a accomplish this. Questo è my result. Il problema è che quando ridimensiono la finestra del browser, il contenuto della colonna B viene troncato e c'è uno spazio bianco in più a sinistra della colonna A. Here's a screenshot of what I mean per risparmiare tempo.

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--> 

Answer 1

Ho fatto alcuni aggiustamenti semplici per tu e per quanto posso dire che funziona come per l'immagine che hai allegato nella tua domanda. Vedi http://joshdavenport.co.uk/staging/swd/.

Le differenze sono:

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

    min-width: 960px; 
} 

Questa regolazione min-width permette al design per adattarsi stretto a sinistra quando la riduzione delle dimensioni della pagina.

#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; 

}

Il width qui garantire questo elemento rimane la stessa larghezza tutto il tempo e la padding assicura rimane lontano dalla zona sinistra. Probabilmente vorrai modificarlo.

Answer 2

io non sembrano replicare la stessa uscita, però, a me sembra che il problema sia in quei valori di larghezza di entrambi gli oggetti della classe content.You hai due oggetti di dimensioni relativamente grandi, i valori specifici sono il 40% e il 60% della dimensione della tua finestra., ma all'interno di questi hai valori di larghezza assoluta (365px e 665px). la risoluzione dell'hotshot è 1.076px × 784px, ciò significa che la colonna di destra, la #public .right, è tagliata a circa 600 + - px di larghezza, tuttavia si sta mettendo una larghezza di 665px al suo interno. Che quasi certamente trabocca il tuo oggetto di avvolgimento. Quindi creare spazio valido per il testo in fuga. Per il tuo problema di testo traboccante vorrei cercare il problema lì.

Ora, per lo spazio in più sul lato sinistro del tuo #public .left, questo si verifica probabilmente perché stai fluttuando il suo contenuto sul lato destro.

Ma come ho detto, non posso duplicare lo stesso risultato. Quindi se armeggiare con quello non risolve il problema, non esitate a chiedere di più.

EDIT: al vostro problema lato destro, anche se sostenete 1030px larghezza ind tua

min-width: 1050;

tuo

.right pubblico

ottiene da quella al massimo 630, ma nel senso che si stanno cercando di adattarsi 665px

Questo codice dovrebbe risolvere il tuo problema

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

Answer 3

Qui io s come potrei tentare di implementarlo. Sto impostando le altezze sinistra e destra usando jQuery. Ho anche ottimizzato un po 'il markup per usare gli ID invece delle classi per elementi come sinistra e destra, quindi il selettore jQuery sarà più veloce.

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:

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

    } 

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