如何解决元素高度与其他元素高度相同,但更宽且绝对定位
这是一个。 我有以下代码将div作为背景的一部分。如果用户的屏幕分辨率= 1024px,则不会显示滚动。 问题是我需要#background div与#content高度相同。 有什么方法可以仅使用CSS来实现?<body>
<style>
body {
margin:0px;
background: yellow;
}
#background {
overflow: hidden;
position: absolute;
z-index: -1;
width: 100%;
height: 100%; /* ??? */
}
#background > div {
background: blue;
margin: auto;
width: 1108px;
height: 100%;
z-index: -1;
}
#content {
background: red;
width: 1004px;
margin: auto;
}
</style>
<div id=\"background\"><div><!-- this will not affect page scrolling if its width id greater than browsers window --></div></div>
<div id=\"content\">
lorem ipsum dolor sit amet<br />
[...]
</div>
</body>
编辑:
感谢您的投票和评论。我发现自己回答。您所需要的只是用ѭ1包起来
编辑2:
或者只给position: relative
到<body>
。
解决方法
好的,我介绍了
id=\"parent\"
div并制作了jsFiddle,然后在#background
div中添加了top:0
,bottom:0
hack以将高度调整为#parent
div。
我还在示例小提琴中更改了宽度,因此可以看到它起作用:
<body>
<style>
body {
margin:0px;
background: yellow;
}
#parent{
position:relative;
}
#background {
background-color:black;
overflow: hidden;
position: absolute;
z-index: -1;
top:0;
bottom:0;
}
#background > div {
margin: auto;
width: 1108px;
height: 100%;
}
#content {
background: red;
width: 1004px;
margin: auto;
}
</style>
<div id=\"parent\">
<div id=\"background\">
<div><!-- this will not affect page scrolling if its width id greater than browsers window -->
</div>
</div>
<div id=\"content\">
lorem ipsum dolor sit amet<br />
[...]
</div>
</div>
</body>
这就是您要达到的目标吗?
,Quote OP:问题是我需要#background div与#content高度相同。
如果您希望#background始终与#content高度相同,只需将#content div放在#background div内即可。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。