在html中创建停靠面板的最佳方法是什么？

Question

我正在尝试在html中模拟停靠面板。例如，我想将一个div停靠在顶部，另一个div停留在剩余的空间中。如果调整浏览器窗口的大小，也会调整div的大小。

我可以想到许多复杂的方法来实现这一目标。

有一种简单而优雅的方法吗？

Answer 1

根据您提供的有限信息，有多种方法可以做到这一点，差不多太多了。基础知识：

让我们说这是你的div：

<div id="dock">
You can put anything you want here.
</div>

现在，让我们用CSS设置它。

#dock {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
}

“位置：固定;”将确保div在滚动时随着年龄而移动。 “top：0; left：0; right：0;”将底座定位到页面顶部，从右到左一直向前移动。当用户重新调整页面大小时，扩展坞将自动重新调整大小。如果您希望底座位于底部，请将“顶部”更改为“底部”。显然，高度给出了div的高度。这只是在屏幕顶部给你一个矩形，但是用于网站标题，徽标等是一件好事。码头的风格取决于你想用它做什么。如果您想要一个特定的答案，您必须在您的问题中具体。至于你所有的其他内容，嗯，你可以把它放在身体里，这将是好的。