Question

我有以下代码：

<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00">
    <div style="position: relative; left: 300px; top: 45px; height: 100%; width: 100%; background-color: #FF0000;"></div>
</div>

截图：

enter image description here

为什么div被推到观看区域之外并因此显示滚动条。如果您向右上角检查，则当红色div移动时，黑色区域是扩展名。

如何编辑它以使红色div具有顶部和左侧位置但不会超出页面宽度和高度？

Answer 1

要真正回答问题的“原因”：

你得到滚动条的原因是绝对内部的相对定位div设置为100％宽度和高度，但ALSO被移位（在这种情况下，由顶部和左侧）

因此假设父容器的宽度/高度为100％并取代它，导致它太大。

通过添加overflow:hidden，您似乎可以解决此问题，但过去的任何内容都将被裁剪，而不是实际适合您设置的尺寸。

另一种方法是......

top: 10%;
left: 10%;
width:90%;
height:90%;

您可以轻松地将顶部和左侧替换为该方向的填充/边距。

Answer 2

您可以使用CSS3的calc（）函数将第二个div的高度和宽度设置为与第一个相同，减去左侧和顶部偏移。这也允许您在文本中使用position: absolute，将其与右侧对齐：

<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00">
    <div style="position: relative; left: 300px; top: 45px; height: calc(100% - 45px); width: calc(100% - 300px); background-color: #FF0000;">
        <span style="position: absolute; right: 0; top: 50%;">TESTING THIS OUT</span>
    </div>
</div>

检查工作JSFiddle。我还添加了CSS reset以消除浏览器可能添加的正文边距。如果要在HTML文件中使用此重置，请在<style>标记内创建<head>标记，其中的代码显示在JSFiddle的CSS部分中。如果您不想使用整个重置，则唯一真正相关的部分是body { margin: 0px; }，因此您还可以将style="margin: 0px;"添加到body标记。

在另一个DIV中添加DIV会显示滚动条

2 个答案: