Question

是否有可能让一个相对元素复制div左边的边距并将其用作顶部的边距？基本上我有一个元素应该与浏览器的顶部和左侧相等。

目前我有这段代码：

HTML：

<div id="container">
    <div id="sidebar">
    </div>
    <div id="content">
    </div>
</div>

CSS：

div { 
    min-height: 2000px;
}

#container { 
    width: 100%;
    position: absolute;
    top: 14.25%;
}

#sidebar {
    width: 8.875%;
    left: 5.25%;
    position: fixed;
    background: lightyellow;
}

#content {
    width: 71.75%;
    position: relative;
    left: 14.25%;
    background: lightpink;
}

正如您所看到的，我已将#content的边距指定为14.25％，并且我希望这与用于上边距的距离相同，但是再次指定14.25％仍不起作用。

JSfiddle：http://jsfiddle.net/pa8qsd55/1/

感谢任何帮助。

Answer 1

让我向您介绍vw和vh！如果你想从固定元素的顶部获得一定百分比（如15％），则意味着如果我们将视口高度划分为100个部分，则顶部的15个部分是我们要查找的值。因此，如果您将#container的顶部设置为15vh并将#sidebar设置为15vh，则它将始终与顶部和左侧保持相同的距离。这是您更新的fiddle。

#container { 
    width: 100%;
    position: absolute;
    top: 15vh;
}

#sidebar {
    width: 8.875%;
    left: 15vh;
    position: fixed;
    background: lightyellow;
}

注意：提防browser support！

Answer 2

如果您对@Ramtin提供的解决方案的浏览器支持是一个问题，并且您愿意使用脚本;您可以尝试使用jQuery设置所需的属性，如下所示：

var left = $('#content').css('left');
$('#container').css('top',left);

将相对元素的位置与左上方相同

2 个答案: