gpt4 book ai didi

html - 如何通过两个不同的定位实现两个重叠 div 的相同高度?

转载 作者:太空宇宙 更新时间:2023-11-04 13:00:20 24 4
gpt4 key购买 nike

index2.html :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index2.css">
</head>
<body>
<div id='menuFrame'>
</div>
<div id='banner'>
&nbsp;
</div>
</body>
</html>

index2.css :

body {
margin: 0px;
padding: 0px;
}
#menuFrame {
content: "";
height: 10%;
width: 100%;
background: rgba(255, 0, 0, 0.4);
position: fixed;
}
#banner {
height: 10%;
width: 100%;
background: rgba(0, 255, 0, 0.4);
}

我想要一个固定的始终在顶部的 div 和一个重叠的可滚动 div。两者的宽度都设置正确,但高度不正确。

也无法理解为什么要显示空的 div 它是不同的: /content: = ""...但我可以接受。


EDIT :当我改变时

height: 10%

height: 50px

对于两个 div,我都得到了我想要的...为什么?

http://jsfiddle.net/axj3yocz/

最佳答案

好的..忘记第一个答案。

因此,在我在 jsfiddle 中测试了您的代码之后,我向两个 div 添加了一个 position:fixed。这个结果是“一个”div,但颜色是混合的。

您可以查看 http://jsfiddle.net/

将其放在 css 文本框上:

    body {
margin: 0px;
padding: 0px;
}
#menuFrame {
content: "";
height: 10%;
width: 100%;
background: rgba(255, 0, 0, 0.4);
position: fixed;
}
#banner {
height: 10%;
width: 100%;
background: rgba(0, 255, 0, 0.4);
position:fixed;
}

这是在 html 区域:

    <div id='menuFrame'>
</div>
<div id='banner'>
&nbsp;
</div>

我不确定这是否是你想要的结果..所以在 jsfiddle 上检查一下

更新:

试试这个:

      body {
margin: 0px;
padding: 0px;
}
#menuFrame {
content: "";
height: 10%;
width: 100%;
background: rgba(255, 0, 0, 0.4);
}
#banner {
height: 10%;
width: 100%;
background: rgba(0, 0, 255, 0.4);
position:fixed;
}

它给出一个混合颜色的 div(两个 div 的颜色)

关于html - 如何通过两个不同的定位实现两个重叠 div 的相同高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25501392/

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