html - 为什么我的背景色没有显示在窗口顶部？

我正在尝试在页面顶部放置一个橙色栏。为什么没有显示颜色？
顶栏的高度应为34像素。

这是我的jsfiddle：http://jsfiddle.net/huskydawgs/z9j9rsz2/19/

这是我的代码：

<div class="topbar">
</div>

<div class="wrapper-data">
    <div class="data_row">
        <div class="data_cell1_rt-20-80"><img alt="Seattle" src="http://www.alltooflat.com/pranks/myths/penny/spaceneedle_big_3.jpg" height="150" width="144"></div>

        <div class="data_cell2_rt-20-80">&nbsp;</div>

        <div class="data_cell3_rt-20-80">
            <p>
                Seattle a coastal seaport city and the seat of King County, in the U.S. state of Washington. With an estimated 652,405 residents as of 2013, Seattle is the largest city in the Pacific Northwest region of North America and the fastest-growing major city in the United States.[5] The Seattle metropolitan area of around 3.6 million inhabitants is the 14th largest metropolitan area in the United States.[6] The city is situated on a narrow isthmus between Puget Sound (an inlet of the Pacific Ocean) and Lake Washington, about 100 miles (160 km) south of the Canada–United States border. A major gateway for trade with Asia, Seattle is the 8th largest port in the United States and 9th largest in North America in terms of container handlin</p>
        </div>
    </div>
</div>

这是我的CSS：

#topbar {
    width: 100%;
    background: #f66511;
    height: 34px;
    line-height: 1;
}

.wrapper-data {
    position:relative;
    width:100%;
    border: none;
    margin: 40px 0 0 0;
    overflow: hidden;
}

    .data_row {
        height:100%;
        min-height:100%;
        white-space:nowrap;
        display:table;
        width: 100%;
    }

/* Landing Data - Left Content - 2 col  */
    .data_cell1_lt-20-80 {
        width:74%;
        white-space:normal;
        display:table-cell;
        vertical-align:top;
    }

    .data_cell2_lt-20-80 {
        width:6%;
        display:table-cell;
        white-space:normal;
    }

    .data_cell3_lt-20-80 {
        width:20%;
        display:table-cell;
        white-space:normal;
    }

        .data_cell3_lt-20-80 img {
        display:block;
        margin:0 auto;
        }
        .data_cell3_lt-20-80 p {
        text-align:left;
        }

/* Landing Data - Right Content - 2 col */
    .data_cell1_rt-20-80 {
        width:20%;
        white-space:normal;
        display:table-cell;
    }

    .data_cell2_rt-20-80 {
        width:6%;
        display:table-cell;
        white-space:normal;
    }

    .data_cell3_rt-20-80 {
        width:74%;
        display:table-cell;
        white-space:normal;
        vertical-align:top;
    }

最佳答案

您正在使用#topbar，它引用一个ID，但是您正在HTML中设置class = "topbar"。您需要将div更改为使用id = "topbar"，或将CSS更改为使用.topbar而不是#topbar。

关于html - 为什么我的背景色没有显示在窗口顶部？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25653699/