div與其他div的100％寬度固定

-5

我想要爲所有現代瀏覽器都做一個CSS佈局，並且很難。我不是一個CSS大師，但希望能指引我朝着正確的方向前進。我試圖得到一個與此one類似的佈局，但其左側的導航高度爲100％，其餘爲100％。見下面的佈局圖像。div與其他div的100％寬度固定

enter image description here

基於上面的鏈接，我都這樣了，但缺少100％的高度上......

.wrapper { 
     width: 100%; 
     border: 3px solid #666; 
     overflow: hidden 
    } 

    .menu-vertical { 
     width: 230px; 
     float: left; 
     padding: 10px; 
     border: 2px solid #f0f 
    } 

    .mainContent { 
     overflow: hidden; 
     border: 2px solid #00f 
    } 
    .banner { 
     background-color: red; 
     height: 50px; 
    } 
    .contentBox { 
     background-color: pink; 
     height: 200px; 
     margin: 20px; 
    } 


<div class="wrapper"> 
    <div class="menu-vertical">side</div> 
    <div class="mainContent"> 
     <div class="banner">banner</div> 
     <div class="contentBox">content</div> 
    </div> 
</div>

任何幫助表示讚賞，謝謝，你

來源

2013-10-21 Thibs

這是在許多變化中多次提出的問題之一。抓住一個現有的例子，看看你能做些什麼，然後尋求更具體的問題的幫助。 – isherwood

@Nathan Lee，我已經更新了我的問題，顯示了目前爲止我所擁有的內容。謝謝 – Thibs

這裏的代碼：

<!DOCTYPE html> 
<html> 

<body> 
    <div style="height:100%;position:absolute; width:10%; margin:0; top:0; left:0; background-color:red;">Content</div> 
<div style="height:10%; position:absolute;width:90%; margin:0; top:0; left:10%;background-color:blue;">Content</div> 
<div style="height:90%;position:absolute; width:90%; margin:0; top:10%; left:10%; background-color:yellow;margin:0 auto;"><div style="background-color:green;width:95%;height:95%;position:relative;top:20px;left:30px;">Content</div></div> 

</body> 


</html>

來源

2013-10-21 13:13:39

試試看，它正是你想要的，只需要改變這些值就可以了...... @Thibs –

謝謝你。非常接近，但綠色部分是裁剪，並有滾動條。綠色部分不應該像我的形象剪輯。這是我之前無法解決的一個問題。 – Thibs

對不起？你能否重新評論你的評論？ @Thibs –

div與其他div的100％寬度固定

回答

相關問題