Question

我有这个HTML代码：

<div id="home-page"> hello from home</div>

<div class="home-page top-div">

    some text

</div>


<div class="home-page bottom-div">

    other text

</div>

这是css：

#home-page {
    .top-div {
        height: 50%;
        width: 100%;
        background-color: #009900;
        margin: auto;
        text-align: center;
    }

    .bottom-div {
        height: 50%;
        width: 100%;
        background-color: #990000;
        margin: auto;
        text-align: center;
        color: #FFFFFF;
    }
}

我想得到的是一个水平分为两部分的页面，顶部为一种颜色，第二部分为另一种颜色。我尝试了这个，但它对我的页面没有影响。

有人知道我做错了什么吗？感谢

Answer 1

我认为你应该将＃home2-page定义为

#home2-page{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: block;
}

Answer 2

使用高度百分比取决于父div高度。如果父div中没有设置高度，则高度没有意义。

父母也是如此。如果在父元素中使用百分比高度（或高度取决于HTMLElement.style.display），那么它的父元素需要具有固定高度。一直到html元素，你可以设置为100％的高度（然后它应该工作）。 html{ height: 100% }

无论如何，这是一种愚蠢的做事方式，所以我建议你使用稍微更现代的东西; vh vw单位（视口高度，视口宽度）。一个vh单位是视口高度的1％。因此，您可以将50%替换为50vh，它将更接近您的目标。

.top-div {
    height: 50vh;
}

Answer 3

试试这个：

html,body {
    height: 100%;
}

 html,body {
    height: 100%;
  }

.top-div {
    height: 50%;
    width: 100%;
    background-color: #009900;
    margin: auto;
    text-align: center;
}

.bottom-div {
    height: 50%;
    width: 100%;
    background-color: #990000;
    margin: auto;
    text-align: center;
    color: #FFFFFF;
}

<div id="home2-page"> hello from home</div>

<div class="home2-page top-div">

    some text

</div>


<div class="home2-page bottom-div">

    other text

</div>

Answer 4

就像@C Travel所说，你不能使用嵌套的CSS，这意味着你不能把一个类放在一个类中。您可以通过简化代码来实现目标。查看下面的工作示例：

CSS：

foreach (var beverage in crate)
{
    Console.WriteLine(beverage);
}

HTML：

<style>

.top-div {
    height: 50%;
    width: 100%;
    background-color: #009900;
    margin: auto;
    text-align: center;
    }

.bottom-div {
    height: 50%;
    width: 100%;
    background-color: #990000;
    margin: auto;
    text-align: center;
    color: #FFFFFF;
}

</style>

CSS不会修改html页面

4 个答案: