javascript - 有如下 布局， 如果想在1200像素下的子元素获取满屏的宽要如何实现？

Question

如上面的布局结构.

若我想在D中得到满屏的宽度要如何实现. 不管屏幕有多大的尺寸(实现D两侧空白填入背景色).

想知道有没有其他的做法..

我的做法是这样的,不过要定高是个缺点(不想用js).

D{
    position:absolute;
    width:100%;
    padding-left: calc((100% - 1200px) / 2);
    margin-left: calc((1200px - 100%) / 2);
    box-sizing:border-box;
    background:red;
}

这样D的外层就要定高.. 而一般D里面的内容高时不能确定的. 我又不想用js....

Answer 1

100vw. 可惜兼容性比较差比calc还低点估计.

Answer 2

我一般是这么做的。

<p class="main">
    <p class="wrapper">
       <!-- 这里是内容 -->
    </p>
<p>
<style>
.main{
    background: url(img.png);
    min-width: 1200px;/* 去掉这一行缩小浏览器窗口（宽度），拖动滚动条会看到空白 */
}
.wrapper{
    width: 1200px;
    margin: auto;/*居中显示*/
}
</style>

这种布局非常常见，可能是你写的代码少的原因。一般是用在背景适应大屏（1920x1080）且内容适应笔记本（1366x768）。
看其他网站到处都是这种布局。

想到一种布局效果，看看大的网站有没有这样的布局，然后F12看看源码，这样学到比较快。

//非常喜欢这个问答社区 ^_^