Question

我正在为我的高中网页设计课程设计一个网站，我遇到一个似乎没有任何高度的div，我的高度设置为500px，但当我检查时chrome中的元素表示它的高度为0px。我在这里做错了什么？

CSS

@font-face {
font-family: liberator;
src: url('Liberator.otf');
font-family: MavenPro
src: url('MavenPro.otf');
}

body {
background-image: url('images/light_toast.png');
}

#all {
width: 900px;
margin: 0 auto;
overflow: hidden;
}

#banner {
height: 300px;
width: inherit;
background-image: url('images/gaben-cover.png');
}

#navigation {
background-color: #383838;
width: 900px;
}

#navigation ul {
list-style-type: none;
display: table;
width: 100%;
padding: 0px;
margin: 0px;
font-family: Liberator;
font-size: 30px;
}

#navigation li {
display: table-cell;
}

#navigation a {
text-decoration: none;
display: block;
color: #A3A3A3;
padding-bottom: 7px;
}

#navigation a:hover {
color: #383838;
background-color: #A3A3A3;

#content {
width: auto;
height: 500px;
background-color: #262626;
}

HTML

<div id = "all">

    <div id = "banner">
    </div>

    <div id = "navigation">
        <ul>
            <li><a href = "#">HOME</a></li>
            <li><a href = "#">HISTORY</a></li>
            <li><a href = "#">FUN FACTS</a></li>
            <li><a href = "#">DIY</a></li>
        </ul>
    </div>

    <div id = "content">
    </div>

    <div id = "footer">
    </div>

</div>

我知道肯定会有一些我做错了，但我是HTML / CSS的新手，所以我不知道它可能是什么。救命啊！

Answer 1

您错过了结束}

#navigation a:hover {
  color: #383838;
  background-color: #A3A3A3;

#content {

）

Answer 2

只需在<!DOCTYPE html>代码前添加html。

Answer 3

您只需在}之前添加#content：）

问题出在你的语法上。查看#navigation a:hover，您需要关闭此选择器。

Answer 4

将overflow: auto;添加到#content

#content {
width: auto;
height: 500px;
background-color: #262626;
overflow: auto;
}

并关闭css

#navigation a:hover {
color: #383838;
background-color: #A3A3A3;
}

Answer 5

你的问题让我抓狂，因为很简单，你无法发现错误！

你只是忘了为#navigation a：hover关闭花括号，所以它不会读取#content

#navigation a:hover {
color: #383838;
background-color: #A3A3A3;
**}**    /*this } was missing*/

#content {
width: auto;
height: 500px;
background-color: #262626;
}

<div>没有显示高度</div>

5 个答案: