CSS不会修改html页面

我有以下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>

我想得到的是一个水平分为两部分的页面，顶部是一种颜色，第二部分是另一种颜色。我试过了，但对我的页面没有效果

---

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

我认为你应该将home2页面定义为

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

---

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

父母也是如此。如果根据父元素中的HtmleElement.style.display使用百分比高度或无高度，则其父元素需要具有固定高度。一直到html元素，您可以将其设置为100%高度，然后它就可以工作了。html{高度：100%}

无论如何，这是一种愚蠢的做事方式，所以我建议你用稍微现代一点的方式来代替；vh vw单位为视口高度、视口宽度。一个vh单位为视口高度的1%。因此，您可以将50%替换为50vh，这将更接近您的期望

.top-div {
    height: 50vh;
}

试试这个：

html,body {
    height: 100%;
}

html，正文{ 身高：100%； } .上分区{ 身高：50%； 宽度：100%； 背景色：009900； 保证金：自动； 文本对齐：居中； } 1.底部div{ 身高：50%； 宽度：100%； 背景色：990000； 保证金：自动； 文本对齐：居中； 颜色：FFFFFF； } 家里人好 一些文本 其他文本

---

正如@C Travel所说，您不能使用嵌套CSS，这意味着您不能将类放入类中。您可以通过稍微简化代码来实现目标。签出下面的工作示例：

CSS:

HTML:

---

对于普通的css，您不能使用嵌套的css…例如home2 page.top div。

html,body {
    height: 100%;
}

<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>

<div class="top-div">

    <p>hello from home</p>
    <p>some text</p>

</div>

<div class="bottom-div">

    <p>other text</p>

</div>