爲什麼這個CSS Full Height Layout不能正確顯示？

Question

更新： 我正在授予50的獎勵誰可以幫助我實現this design。

---

所以我一直在嘗試過去2-3小時來解決這個問題，但似乎無法做到這一點。也許有CSS或jQuery體驗的人可以幫助我。我正在嘗試accomplish this。這是my result。問題是，當我調整瀏覽器窗口的大小時，B列的內容被截斷，A列左側有一個額外的空白空間，以節省您的時間。

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

我做了一些簡單的調整爲你以及據我所知，它是按照你在問題中附加的圖像來工作的。見http://joshdavenport.co.uk/staging/swd/。

的區別是：

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

    min-width: 960px; 
} 

這min-width調整使您的設計，減少頁面的大小時，適合更嚴格的左側。

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

}

的width這裏確保該元素保持不變寬度的所有的時間和padding確保它保持在左側區域移走。你可能會想調整這一點。

Answer 2

我似乎沒有複製相同的輸出，但是，對我來說，似乎你的問題是在這些寬度值您的內容類對象。您有兩個相對大小的對象，具體值是窗口大小的40％和60％。但在這些對象中，您具有絕對寬度值（365px和665px）。因爲您的scre註冊分辨率爲1,076px×784px， 這意味着您的右欄#public .right被裁減爲寬度的600 + - px左右，但是您將665px的寬度放在其中。但幾乎肯定會溢出您的包裹對象。爲此創造失控文本的有效空間。對於你的溢出文本問題，我會在那裏尋找問題。

現在爲了#public .left左側的額外空間，這可能是因爲您將其內容浮動到右側。

但正如我所說，我不能重複相同的結果。所以，如果修補與此不解決您的問題，請隨時多問。

編輯： 要你右手邊的問題，即使你支持1030px寬度IND你

最小寬度：1050;

你

公共.right

從獲得在最大630，但在你試圖以適應665px

此代碼應該可以解決你的問題

#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

這裏我我可能會試圖實現這一點。我使用jQuery設置左右高度。我還調整了一些標記來使用ID而不是像left和right這樣的元素的類，所以jQuery選擇器會更快。

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); 
});