如上面的布局结构.
若我想在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....
我一般是这么做的。
<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
看看源码,这样学到比较快。
//非常喜欢这个问答社区 ^_^
100vw. 可惜兼容性比较差比calc还低点估计.