Question

这是一个。

我有以下代码将div作为背景的一部分。如果用户的屏幕分辨率= 1024px，则滚动不会显示。

问题是我需要#background div与#content一样高。

有没有办法使用 only 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>

修改

感谢downvotes和评论。我找到了答案。你所需要的就是用<div style="position: relative">

包裹永恒

的 EDIT2：

或只是将position: relative提交给<body>。

Answer 1

好的，我介绍了id="parent" div并将其设为jsFiddle，然后我将top:0，bottom:0 hack添加到#background div以将高度调整为{ {1}} div。

我还改变了示例小提琴中的宽度，因此可以看到工作：

#parent

这是你要达到的目标吗？

Answer 2

引用OP： 问题是我需要#background div与#content一样高。

如果你希望#background始终与#content的高度相同，只需将#content div放在#background div中。

元素高度与其他元素高度相同，同时更宽和绝对定位

2 个答案: