如何让HTML中的div元素可见？CSS样式问题求助

1. 修复容器高度不生效的问题 #

你的.container和.border设置了height:100%，但它们的父元素（html、body）默认没有定义高度，导致百分比高度无法生效。需要给html和body添加基础样式：

html, body {
  height: 100%;
  margin: 0; /* 清除浏览器默认外边距，避免页面出现间隙 */
}

2. 确保内容可见 #

.content是白色背景，里面的<p>ihc</p>默认是黑色文字，本应显示，但之前高度问题导致.content没有实际高度，所以看不到。修复高度后，可明确设置文字颜色保证可见性：

.content p {
  color: #000; /* 避免继承父元素的白色，确保文字在白色背景上清晰 */
  margin: 0; /* 清除p标签默认外边距 */
}

3. 调整布局避免footer遮挡 #

当前footer会占据页面空间，导致容器无法完全占满视口。可将body设为弹性布局，让容器自动填充剩余空间：

body {
  display: flex;
  flex-direction: column;
}
.container {
  flex: 1; /* 让容器占满body的剩余空间 */
}

完整修改后的代码 #

HTML部分（无需修改） #

<!DOCTYPE html>
<Html Lang="en">

<Head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
    <title>Minecraft</title>
</head>

<body>
    <div class="container">
        <div class="border">
            <div class="content">
                <P>ihc</P>
            </div>
        </div>
    </div>
    <center>
        <footer>
            <p style="font-size: 1%;">&copy; Copyright 2022</p>
        </footer>
    </center>
    <script src="script.js"></script>
</body>

</html>

CSS部分 #

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

h1 {
    margin: 16px;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    font-family: EuclidCircularA-Regular;
}

p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: auto 16px;
    font-style: normal;
    font-family: EuclidCircularA-Regular;
}

.container {
    flex: 1;
    width: 100%;
}

.border {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    width: 100%;
    height: 100%;
    /* 可选：让内容在黑框内居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.content {
    width: 90%;
    height: 90%;
    background-color: rgb(255,255,255);
    /* 可选：让文字在白色内容区居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.content p {
    color: #000;
    margin: 0;
}

效果说明 #

• 黑色边框会占满除footer外的整个页面，白色内容区占黑框的90%
• <p>ihc</p>会清晰显示在白色内容区的中心
• footer固定在页面底部，不会遮挡容器内容

内容的提问来源于stack exchange，提问作者Mecode2