0

我为我的学校项目创建了一个导航栏（我正在做基本设计，然后我们正在添加 mysql 数据库），并且导航栏效果很好，但它没有延伸到页面底部，它只是一个小盒子现在。

这是我的风格脚本

style type='text/css'>
#navigation {
 display:block;
 width:150px;
 float:left;
 margin-left:7px;
 margin-right6px;
 margin:5px;
 border-style:solid;
}
#navhead {
 text-align:center;
 margin-left:7px;
 margin-right:6px;
}
#links {
 display:block;
 width:60px;
}
</style>

我是否遗漏了任何“延伸到框架底部”的属性？

谢谢！

4

1 回答 1

1

您需要使用该height属性。您可以将 设置height为 100%（这个父级的高度，所以<body>），但它看起来很奇怪，因为它会渲染高度 + 填充 + 边框 + 边距。
您需要使用border-box具有高度的属性。它允许您定义填充和/或边框（或默认情况下没有）是否计入heightandwidth属性。您还需要杀死margin-topand margin-bottom。在这些更改之后，您的 CSS 应该如下所示： 

#navigation {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    display: block;
    width: 150px;
    height: 100%;
    float: left;
    margin-left: 7px;
    margin-right: 5px;
    border-style: solid;
}
于 2012-11-07T18:53:53.413 回答