gpt4 book ai didi

html - 第一个 2 div 为空

转载 作者:行者123 更新时间:2023-11-28 03:03:34 25 4
gpt4 key购买 nike

所以我试图进入 HTML 等并且只是玩弄并解决了这个问题:我想要做的是创建一个标题 div,其大小为 5% 高度和 100% 宽度以及左侧的 div剩下的 95% 的高度。

本应在左侧的 div 工作得很好,但如果我不在其中添加任何元素,上面的 div 就是空的,当我添加元素时,div 只是获取元素的高度.

我希望两个 Div 都具有它们应该具有的大小:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testing</title>
<style type="text/css">
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0 auto;
}

#header
{
height 10%;
width: 100%;
background-color: green;

}

#menu
{

height: 100%;
width: 10%;
background-color: royalblue;

}

a
{
width: 500px;
}
</style>
</head>
<body>

<div id="header">
Hey
</div>

<div id="menu">

</div>
</body>
</html>

最佳答案

您的方法是正确的,但是您的 CSS 规则 height: 10%(缺少 :)中存在拼写错误,这会破坏您的 CSS 渲染。

它基本上有效。关键概念是 height: 100%; 用于 htmlbody 元素,你做对了(大多数人不第一次得到它)。

或者,您也可以使用视口(viewport)百分比长度 vh,参见:https://developer.mozilla.org/en-US/docs/Web/CSS/length

html, body {
height: 100%;
}
body {
margin: 0;
}
#header {
height: 10%; /* compare to your original snippet */
width: 100%;
background-color: green;
}
#menu {
height: 90%;
width: 10%;
background-color: royalblue;
}
<div id="header">
Hey
</div>
<div id="menu">
Hay
</div>

关于html - 第一个 2 div 为空,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33597814/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com