2周的div HTML和CSS只

我有一個基本的佈局的網站下面的代碼（我順便說一句初學者）的擬合一個div不知道如何使「內容」的黑色部分適合頁眉，頁腳和導航之間的空白區域。它應該只填充該區域並在所有瀏覽器上工作。我怎樣才能使用HTML和CSS？2周的div HTML和CSS只

來源

2015-10-17 Vatsal Mishra

爲什麼你不給固定的寬度和高度與＃內容？ – Alex

check [this]（http://jsfiddle.net/alireza_safian/gvyL2ohc/1/） – Alex

圖像在哪裏發生？ – Rob

試試這個http://jsfiddle.net/gvyL2ohc/2/

只需添加到您的CSS

#Content { 
    background-color: black; 
    height: 620px; 
    padding: 50px; 
}

來源

2015-10-17 13:54:14

完美的作品！你是怎麼想的？我的意思是它是反覆試驗還是別的？ –

我有點剛剛檢查你的代碼，並發現這將是最好的解決方案:) –

但你是怎麼知道確切的數字？另外，你怎麼知道這將適用於每個瀏覽器：s？對於noobish問題抱歉：s –

我已通過您的jsfiddle鏈接了，發現你需要添加寬度：200像素以上＃內容股利

來源

2015-10-17 12:57:29

謝謝，我添加了高度和填充:) –

考慮您正在使用固定的佈局，下面的代碼不響應或液應爲你工作。

我已經加入一個div mainWrapper將包住所有容器（頁眉，頁腳，ContentWrapper）。這是mainWrapper的726px給定的固定寬度此相同的寬度將採取我已經在您的標記作出一些變化由所有是子容器（頁眉，頁腳，ContentWrapper）。
我已經將你的左側導航和內容div包裝在一個封裝器ContentWrapper中，該器具有600px的固定高度，然後用jquery將左側導航和內容設置爲相同高度。
在ContentWrapper你有兩個框#Left_Nav和＃內容我已經在劃分它們之間

left_nav（200像素）+＃內容（526px）= ContentWrapper（726px參考點1號）的總寬度ContentWrapper（726px）。

注意：如果您的佈局不固定，這將不起作用，我們必須使用一些不同的方法來完成它。

var height = $('#ContentWrapper').outerHeight(); 
 
$('#Left_Nav , #Content').height(height)

.mainWrapper { 
 
    width: 726px; 
 
    padding: 10px; 
 
} 
 
#Header { 
 
    background-color: #85D6FF; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 50px 0 50px 0; 
 
} 
 
#Left_Nav { 
 
    line-height: 30px; 
 
    background-color: #FFD9D9; 
 
    width: 200px; 
 
    float: left; 
 
} 
 
#Content { 
 
    background-color: black; 
 
    float: left; 
 
    width: 526px; 
 
} 
 
#Footer { 
 
    background-color: #C8C8C8; 
 
    color: black; 
 
    clear: both; 
 
    text-align: center; 
 
} 
 
.hor { 
 
    float: left; 
 
    text-align: center; 
 
    margin: 20px; 
 
    min-width: 100px; 
 
} 
 
.list_vertical { 
 
    padding: 0px 0 0 30px; 
 
    margin: 0; 
 
    list-style: none; 
 
} 
 
.list_horizontal { 
 
    list-style: none; 
 
} 
 
h3 { 
 
    padding: 0 0 0 30px; 
 
} 
 
.table { 
 
    display: table; 
 
    /* Allow the centering to work */ 
 
    margin: 0 auto; 
 
} 
 
#ContentWrapper { 
 
    height: 600px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 

 
<body bgcolor="#646464"> 
 
    <div class="mainWrapper"> 
 
    <div id="Header">Header</div> 
 
    <div id="ContentWrapper"> 
 
     <div id="Left_Nav"> 
 
     <h3>Navigation</h3> 
 

 
     <ul class="list_vertical"> 
 
      <li>Home</li> 
 
      <li>Link 0</li> 
 
      <li>Link 1</li> 
 
      <li>Link 2</li> 
 
      <li>Link 3</li> 
 
     </ul> 
 
     </div> 
 
     <div id="Content">Content</div> 
 
    </div> 
 
    <div id="Footer"> 
 
     <div class="table">Footer 
 
     <ul class="list_horizontal"> 
 
      <li class="hor">Link 0</li> 
 
      <li class="hor">Link 1</li> 
 
      <li class="hor">Link 2</li> 
 
      <li class="hor">Link 3</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

來源

2015-10-17 13:36:53 imGaurav

非常感謝您的詳細解答，雖然它對我來說有點複雜：s。我會盡快通過:) –

2周的div HTML和CSS只

回答

left_nav（200像素）+＃內容（526px）= ContentWrapper（726px參考點1號）的總寬度ContentWrapper（726px）。

相關問題