有如下 布局, 如果想在1200像素下的子元素获取满屏的宽要如何实现?

阿飞i
  • 628

图片描述

如上面的布局结构.

若我想在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....

回复
阅读 2.2k
2 个回答
✓ 已被采纳

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

起风了
  • 527

我一般是这么做的。

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏