Javascript 如何制作整个屏幕宽度的div？_Javascript_Html_Css

Javascript 如何制作整个屏幕宽度的div？

javascript html css

Javascript 如何制作整个屏幕宽度的div？,javascript,html,css,Javascript,Html,Css,如果一个div a包含在另一个500像素宽的div（B）中，那么div a怎么仍然是整个屏幕的宽度？我想“突破”那个500px的div。在子div上使用位置：绝对，让父div保持在位置：静态在子div上使用位置：绝对，让父div保持在位置：静态你可以尝试使div A的位置：绝对您可以尝试将div A的位置设置为绝对位置根据您的问题，您可以在div A中使用位置：绝对值。它将找到最近的定位父对象（具有固定、绝对或相对位置的父对象）。但是，您需要使最近的定位图元具有100%的宽度，并紧贴左侧放置

如果一个div a包含在另一个500像素宽的div（B）中，那么div a怎么仍然是整个屏幕的宽度？我想“突破”那个500px的div。

在子div上使用

位置：绝对

，让父div保持在

位置：静态
在子div上使用位置：绝对
，让父div保持在位置：静态
你可以尝试使div A的位置：绝对
 您可以尝试将div A的位置设置为绝对位置
 根据您的问题，您可以在div A中使用位置：绝对值
。它将找到最近的定位父对象（具有固定、绝对或相对位置的父对象）。但是，您需要使最近的定位图元具有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;
}


测试
身体{
位置：相对位置；
}
#b{
宽度：500px；
}
#a{
位置：绝对位置；
排名：0；
左：0；
右：0；
}
根据您的问题，您可以在div A中使用位置：绝对
。它将找到最近的定位父对象（具有固定、绝对或相对位置的父对象）。但是，您需要使最近的定位图元具有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;
}


测试
身体{
位置：相对位置；
}
#b{
宽度：500px；
}
#a{
位置：绝对位置；
排名：0；
左：0；
右：0；
}
这取决于您希望它看起来像什么。使用css：
overflow:hidden;

将使div大于包含的div，但隐藏在其后面
否则，如果您希望它显示在包含div的顶部，您可以像给出的其他答案一样使用“position”css。
这取决于您希望它看起来像什么。使用css：
overflow:hidden;

将使div大于包含的div，但隐藏在其后面
否则，如果您希望它显示在包含div的顶部，您可以像给出的其他答案一样使用“position”css。
您可以向div标记添加类或id。这个css对这两者都有效
#yourdivid .yourdivclass {
     position:absolute;
     left:0;
     right:0;
     overflow:hidden;
}

可以将类或id添加到div标记中。这个css对这两者都有效
#yourdivid .yourdivclass {
     position:absolute;
     left:0;
     right:0;
     overflow:hidden;
}

JSFIDLE为您提供：

在b区应该能让它为你工作
Martyn为您准备：

在b区应该能让它为你工作
Martyn
您可以使用“最小宽度”（min width）强制将分区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>


window.onload=函数（）{
document.getElementById（“b”）.style.width=window.screen.width；
}
您可以使用“最小宽度”（min width）强制将分区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>


window.onload=函数（）{
document.getElementById（“b”）.style.width=window.screen.width；
}


这很有效。


这是可行的。
获取窗口的宽度
并使用js设置css宽度。只要你的物品是用高zindex绝对定位的，它就应该工作得很好。获取窗口的宽度，并用js设置css宽度。只要你的物品以高zindex绝对定位，它就应该在你的小提琴中正常工作，它是.body
而不是body
在你的小提琴中它是.body
而不是body