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

相关问题