CSS背景顏色沒有顯示出來？

Question

我做了兩個班，其中一個是主要的，另一個是兒童div。 在主div我給出100％背景顏色的寬度：紅色和兒童div我給出寬度100％和背景藍色和邊緣頂部100px。 但在瀏覽器中紅色不顯示。 如果我在主div中使用float，那么顏色出現在瀏覽器中，但主類已經有100％的寬度，所以我們不應該在其中給出float元素。

<style>

.main {width:100%; background-color:#FF0000}

.child { width:100%; margin-top:100px; background:#0000FF}

</style>

</head>

<body>

<div class="main">   
    <div class="child">asfda</div>
</div>

Answer 1

看小提琴：

小提琴： http ： //jsfiddle.net/uT7Vv/

演示： http ： //jsfiddle.net/uT7Vv/embedded/result/

Answer 2

您的孩子div在您的主Div上重疊

需要在主div中給出高度。試試這個

<style>

.main {width:100%; background-color:#FF0000;height:50px;}

.child { width:100%; margin-top:100px; background:#0000FF}

</style>

</head>

<body>

<div class="main">

<div class="child">asfda</div>
</div>

Answer 3

你的利潤正在崩潰。 您可以通過在父元素上使用padding來修復此問題：

.main {
    background-color: red;
    padding-top: 100px;
    width: 100%;
}

.child {
    background-color: blue;
    width: 100%;
}

這是一個演示。

CSS背景顏色沒有顯示出來？

問題描述

3 個解決方案

解決方案1
2 已采納 2012-03-17 16:26:02

解決方案2
0 2016-01-08 08:47:13

解決方案3
0 2012-03-17 16:27:14

CSS背景顏色沒有顯示出來？

問題描述

3 個解決方案

解決方案1 2 已采納 2012-03-17 16:26:02

解決方案2 0 2016-01-08 08:47:13

解決方案3 0 2012-03-17 16:27:14

解決方案1
2 已采納 2012-03-17 16:26:02

解決方案2
0 2016-01-08 08:47:13

解決方案3
0 2012-03-17 16:27:14