gpt4 book ai didi

html - 如何使用 CSS 调整 100% 浏览器高度和宽度?

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

我想让我的网站适合浏览器,我尝试了这个,当我尝试 "width=100%height=100% “对于 body 的 css 它确实没问题,当我用容器的 div 尝试它时它有点消失意味着看不到背景颜色

这是 html:

<html>
<head>
<title>Untitled</title>
<link href="css/stylesheet1.css" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/x-icon" href="images/favicon.ico" /></head>
</head>
<body>
<div id="container">
<div id="header">
<div class="logo">
<div id="logo">Logo</span></div>
</div><!--Logo-->
<div class="search-bar">Search BAr</div>
</div>
</div>
</body>
</html>

这是CSS

body{
width:100%;
height:100%;
margin: 0;
background:#CCC;
}
#container{
width:100%;
height:100%;
margin:0 auto;
background:#000;
}
#header{
width:100%;
height:12%;
float:left;
background:#F00;
}
.logo{
width:50%;
height:100%;
float:left;
background:#0F0;
}
.search-bar{
width:50%;
height:100%;
float:left;
color:#FFF;
font-family: 'century gothic';
text-align:center;
margin-top:20px;
}
#logo
{
width:100%;
height:100%;
float:left;
font-size:48px;
color:#FFF;
font-family: 'century gothic';
text-align:center;
margin-top:20px;
}

我有麻烦了请帮帮我

最佳答案

如果你想在 % 中应用 height,父元素应该明确设置高度。

因此,如果您简单地设置 height 属性,则父标记 html 没有设置任何高度,因此它将采用 0 高度。

更新:Solved Fiddle

关于html - 如何使用 CSS 调整 100% 浏览器高度和宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22743002/

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