Javascript 如何扩展child<；部门>；100%的车身宽度？_Javascript_Html_Css

Javascript 如何扩展child<；部门>；100%的车身宽度？

javascript html css

Javascript 如何扩展child<；部门>；100%的车身宽度？,javascript,html,css,Javascript,Html,Css,我有这样的想法： <body> <div style="width:700px; margin:0 auto;"> <div class="inner-div"></div> </div> </body> 有没有办法将类为“inner div”的子div扩展到100%的主体宽度这使得内部div从左到右伸展： div.inner-div { position: absolute;

我有这样的想法：

<body>
    <div style="width:700px; margin:0 auto;">
        <div class="inner-div"></div>
    </div>
</body>

有没有办法将类为“inner div”的子div扩展到100%的主体宽度

这使得

内部div从左到右伸展：
div.inner-div {
  position: absolute;
  left: 0;
  width: 100%;
}

我尚未对此进行测试，但它可能会起作用：
您需要jQuery来完成此任务
//I'm using a resize event in case the body with changes. At least i think that will work.
window.onresize = function(event) {
    var bWidth = $("body").width():
    $(".inner-div").width(bWidth);
}

如果将宽度100%指定给内部div，它将适合外部div的宽度。
这是一个如何使用css的小示例，因此在javascript中设置属性也是一样的：。不仅仅使用css。由于您为父级设置了700px，因此子级将继承此值。
但是你可以用javascript来实现这一点。以下是jquery：
$(window).bind("load resize", function(){
  $('.inner-div').width($('body').width());
});

即使调整窗口大小，它也能工作。
要在纯CSS中工作，所有父元素必须是位置：静态
（或不带“位置”属性，因为默认为“静态”）
然后你可以使用Stefan的代码
div.inner-div {
  position: absolute;
  left: 0;
  width: 100%;
}

（纠正了Ricola3D的小提琴：）
让我稍微纠正一下
您还需要以像素/em为拉伸元素指定一些“min width”值，并且（这不是必需的，但也是很好的做法）也为body元素指定一个min width
i、 e:
如果没有设置最小宽度，并且您的HTML/CSS不是为响应站点构建的，那么在调整浏览器窗口大小时，您可以在内部DIV元素处看到错误。属性“宽度：100%”使图元始终拉伸到100%的浏览器窗口大小。因此，如果浏览器视口小于内容并显示滚动条，则内部DIV将保持实际的浏览器视口大小，从而导致在滚动网站时外观似乎已损坏
您可以在这里尝试：
尝试将示例中“.inner”DIV处的“min width”值从1000px更改为100%，调整窗口大小并滚动到一侧，然后您就会看到它。
这是一篇旧文章，但我在这里找到了更好的解决方案：
因此，在这种情况下，它将是

。内部div{
宽度：100vw；
左边距：计算（-50vw+50%）；
}
这有什么意义吗？为什么您希望内部div可能比外部div更大？我的页面上有水平居中导航，子导航也水平居中，宽度相同。我把第二个导航放在一个div中，我想用100%的体宽展开。我尝试了这个方法，效果很好，但没有向左展开。没有@ChrisMoschini这是因为您在示例中向容器添加了position:relative。移除它，内部div将从左向右拉伸。这是事实，但许多登陆这里寻找此解决方案的人将使用引导，例如，在他们试图拉伸的子标记上方至少有一个（如果不是多个）位置相对偏移父项。是的。有点明显，但是CSS稍微少一点（1个字符）-将calc改为50%-50vw，而不是从负数开始。如果你不能忍受任何浏览器中的水平滚动条，请考虑宽度：Calc（100VW-10PX）
body {
  min-width: 1000px;
}

.outer {
  width: 1000px;
  height: 200px;
  margin: auto;
}

.inner {
  position: absolute;
  min-width: 1000px;
  height: 100px;
  left: 0;
  right: 0;
}