Question

我一直在尝试开发一个简单的页面，以便尝试HTML / CSS，并尝试使用CSS在页面左侧绘制彩色列。这就是我试图让它发挥作用的方式：

#leftcolumn {
   margin-top: 0px;
   margin-bottom: 0px;
   top: 0px;
   left: 0px;
   width: 60px;
   height: 100%;
   background-color: #276E55;
   float: left;
}

这就是我在HTML文件上写的内容：

<body>
   <div class="leftcolumn"></div>
   <!--rest of the code here-->
</body>

我假设因为我将列设置为向左浮动，所以后面的任何内容都会自动转到右侧的空间。此外，我设置了顶部和底部边距，因为文档有一个边距可以防止文本到达页面的末端。

我假设我对此做错了什么，但我真的不知道我在这里错过了什么。

Answer 1

height始终基于父级高度，在这种情况下未指定。您必须使用固定高度才能使内容可见。您还在使用class但引用id（#）。请改用.leftcolum。

由于您未使用left，因此不需要top和position。

<强>更新要实际将div缩放到100％高度，我需要指定具有一定高度的父级。您可以通过将html和body缩放到100％来实现。

html, body{
    height:100%;
}

这是小提琴：http://jsfiddle.net/56b77g7t/1/

Answer 2

CSS表示法错误...使用。而不是＃...并将高度更改为像素..请参阅下面的演示。

.leftcolumn {
   margin-top: 0px;
   margin-bottom: 0px;
   top: 0px;
   left: 0px;
   width: 60px;
   height: 900px;
   background-color: #276E55;
   float: left;
}

点击此处查看演示： http://jsfiddle.net/fyee5nm8/1/

Answer 3

你正在使用类，但你的CSS正在使用id（＃）尝试更改＃为点（。）

使用css绘制一个简单的列

3 个答案: