javascript - 如何制作一个宽度为整个屏幕的 div？

Question

如果一个 div A 包含在另一个 500px 宽的 div (B) 中，那么 div A 怎么可能仍然是整个屏幕的宽度？我想“突破”那个 500px 的 div。

score 4 · Accepted Answer

鉴于您的问题，您可以position:absolute在 div A 中使用。它将找到最近的定位父级（具有固定、绝对或相对位置的父级）。但是你需要让最近的定位元素有 100% 的宽度并且紧贴在左边。

这是一个使用 body的演示

<body>
    <div id="b">
        <div id="a">test</div>
    </div>
</body>

body{
    position:relative;
}

#b{
    width:500px;
}

#a{
    position:absolute;
    top:0;
    left:0;
    right:0;
}

score 1 · Accepted Answer

1

在子 div 上使用position: absolute并保持父级在position: static.

于 2012-05-07T07:46:15.427 回答

score 0 · Accepted Answer

0

您可以尝试使 div A 的位置：绝对；

于 2012-05-07T07:46:16.477 回答

score 0 · Accepted Answer

这取决于您希望它看起来像什么。使用CSS：

overflow:hidden;

将使 div 大于包含 div 但隐藏在其后面，

否则，如果您希望它显示在包含 div 的顶部，您可以像给出的其他答案一样使用“位置”css。

score 0 · Accepted Answer

您可以将类或 id 添加到您的 div 标签。这个css适用于两者

#yourdivid .yourdivclass {
     position:absolute;
     left:0;
     right:0;
     overflow:hidden;
}

score 0 · Accepted Answer

jsfiddle 为您服务：http: //jsfiddle.net/HRT2M/

.b
{
Position:fixed;
}

在 div b 上应该让它为你工作

马丁

score 0 · Accepted Answer

您可以使用 min-width 将 div B 强制为特定宽度 -

<div id="a" style="width:500px;display:block;">
  <div id="b" style="min-width:960px;">
  </div>
</div>

您还可以使用 javascript 设置其宽度 -

<script style="text/javascript">
window.onload = function () {
  document.getElementById ("b").style.width = window.screen.width;
}
</script>

score 0 · Accepted Answer

<div id="b" style="width:500px;">
   <div id="a" style="width:100%; position:absolute; overflow:hidden;"><div/>
</div>

这行得通。

javascript - 如何制作一个宽度为整个屏幕的 div？

8 回答 8

Related

Reference