如何制作整個屏幕寬度的div？

Question

如果div A包含在另一個500px寬的div（B）內，那么div A仍是整個屏幕的寬度嗎？ 我想“突破”該500px的div。

Answer 1

給定您的問題，您可以在div A中使用position:absolute 。它將找到最接近的父對象（具有固定，絕對或相對位置的父對象）。 但是，您需要使距離最近的元素具有100％的寬度，並且緊貼左側。

<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;
}

Answer 2

在子div上使用position: absolute ，將父項保持在position: static 。

Answer 3

您可以嘗試確定div A的位置：絕對；

Answer 4

這取決於您想要的外觀。 使用CSS：

overflow:hidden;

將使div大於包含的div但隱藏在其后面，

否則，如果希望將其顯示在包含div的頂部，則可以像其他給出的答案一樣使用“位置” css。

Answer 5

您可以在div標簽中添加類或ID。 此CSS既適用於

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

Answer 6

jsfiddle為您服務： http ： //jsfiddle.net/HRT2M/

.b
{
Position:fixed;
}

在div b上應該可以為您工作

馬丁

Answer 7

您可以使用最小寬度將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>

Answer 8

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

這可行。

如何制作整個屏幕寬度的div？

問題描述

8 個解決方案

解決方案1
4 已采納 2012-05-07 07:46:18

解決方案2
1 2012-05-07 07:46:15

解決方案3
0 2012-05-07 07:46:16

解決方案4
0 2012-05-07 07:48:14

解決方案5
0 2012-05-07 07:48:40

解決方案6
0 2012-05-07 07:49:22

解決方案7
0 2012-05-07 07:58:54

解決方案8
0 2012-05-07 08:34:57

如何制作整個屏幕寬度的div？

問題描述

8 個解決方案

解決方案1 4 已采納 2012-05-07 07:46:18

解決方案2 1 2012-05-07 07:46:15

解決方案3 0 2012-05-07 07:46:16

解決方案4 0 2012-05-07 07:48:14

解決方案5 0 2012-05-07 07:48:40

解決方案6 0 2012-05-07 07:49:22

解決方案7 0 2012-05-07 07:58:54

解決方案8 0 2012-05-07 08:34:57

解決方案1
4 已采納 2012-05-07 07:46:18

解決方案2
1 2012-05-07 07:46:15

解決方案3
0 2012-05-07 07:46:16

解決方案4
0 2012-05-07 07:48:14

解決方案5
0 2012-05-07 07:48:40

解決方案6
0 2012-05-07 07:49:22

解決方案7
0 2012-05-07 07:58:54

解決方案8
0 2012-05-07 08:34:57