left_nav（200px）+ #Content（526px）= ContentWrapper（726px）。

Question

我对网站的基本布局（我是初学者）有以下代码：

#Content {

    background-color:black;
    float:left;
    padding:10px; 
}

我无法弄清楚如何使“内容”的黑色部分适合页眉，页脚和导航之间的空白区域。它应该只填充该区域并在所有浏览器上工作。我怎么能只使用HTML和CSS呢？

Answer 1

试试这个http://jsfiddle.net/gvyL2ohc/2/

只需将此添加到您的css

即可

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

Answer 2

我已经浏览了您的jsfiddle链接，发现您需要在 #Content div

中添加 width：200px 或更多

Answer 3

考虑到您使用的是固定布局而没有响应或流畅的代码应该适合您。我在你的标记中做了一些改变

我添加了一个div mainWrapper，它将包装你的所有容器（页眉，页脚，ContentWrapper）。这个mainWrapper的固定宽度为726px，这个宽度将被所有子容器占用（页眉，页脚， ContentWrapper）。
我已将左侧导航和内容div包装在一个包装器ContentWrapper中，该包装器具有600px的固定高度，然后使用jquery我将左侧导航和内容设置为相同的高度。
在ContentWrapper中你有两个框#Left_Nav和#Content我已经将ContentWrapper的总宽度（726px ref point no.1）划分为它们之间

left_nav（200px）+ #Content（526px）= ContentWrapper（726px）。

注意：如果你的布局没有修复，这将不起作用，我们必须使用一些不同的方法来完成它。

＆＃13;

@Stateless
public class ReceptionService {
    public String welcome() {
        return "Hello, Developer! No XML, No Configuration, and it works!!!";
    }
}

＆＃13;

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

＆＃13;

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

＆＃13;

仅使用HTML和CSS安装带有2个div的div

3 个答案:

left_nav（200px）+ #Content（526px）= ContentWrapper（726px）。