Question

我为我的学校项目创建了一个导航栏（我正在进行基本设计，然后我们正在添加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>

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

谢谢！

Answer 1

您需要使用height属性。您可以将height设置为100％（此父级的高度，因此<body>），但它看起来很奇怪，因为它将渲染高度+填充+边框+边距。
您需要使用具有高度的border-box属性。它允许您定义填充和/或边框（或默认情况下没有）是否在height和width属性中计数。您还需要杀死margin-top和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;
}

HTML导航栏扩展到底部

1 个答案: