gpt4 book ai didi

html - 使用 CSS 和 html 使一个 Div 显示在整个浏览器中

转载 作者:太空宇宙 更新时间:2023-11-03 23:36:13 26 4
gpt4 key购买 nike

这个问题以前在这里问过,是的。但似乎没有一个答案对我和我想做的事情有用。

我需要一个 div 来显示整个浏览器。到目前为止,我有这个。

HTML

<body>
<div id="header">My Website</div>
<div id="games">Video Games</div>
</body>

CSS

#header {
height: 80px;
background-color: black;
color: white;
width: 100%;
top: 0;
left: 0;
position: absolute;
}

#games {
height: 40px;
border: 1px solid black;
background-color: grey;
}

因此,top:0、left:0position:absolute 是让我的 div 横跨整个页面的原因。有什么问题?

我的#games div 隐藏在我的#header div 后面。我对 htmlcss 比较陌生,当我开始学习 div 时,它们会彼此紧挨着显示,或者在彼此的下方和上方显示。

当我取出 position:absolute 时,#games div 下降到 #header div 下面,但随后 header div 只去了到页面左侧和右侧的边缘,以及顶部。我希望它一直延伸到边缘,在 div 和浏览器端之间没有空间,并且让我的 #games div 自然显示在下方。

请注意,我知道我可以调整 #games div 的上边距,但我想知道是否有办法让它自然地位于 #header div< 下方.

我该怎么做才能使我的#games div 不会自然地隐藏在#header div 后面,而是位于正下方?

最佳答案

我的建议是这样做DEMO :

body {
margin: 0;
}

#header {
height: 80px;
background-color: black;
color: white;
}

#games {
height: 40px;
border: 1px solid black;
background-color: grey;
}

关于html - 使用 CSS 和 html 使一个 Div 显示在整个浏览器中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24006644/

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