使容器尊重网格但填充剩余空间[重复]

Question

我在尝试创建如下图所示的布局时遇到了一些麻烦。左右两列应分别占主容器max-width的2/3和1/3（使用margin: auto;居中），但页面剩余宽度应由背景图片或颜色填充列。

有没有办法用 css 完成这个？

Answer 1

这有点棘手。

问题是避免背景图像从页面主体中裁剪出来，而简单的颜色填充更容易。 尝试将:after 和:before 伪元素与position:absolute; 一起使用，并在其中放置背景规则。

然后你需要强制以所有分辨率适应所有页面，所以试试这些规则：

#left-column{
  float:left;
  width: 66.66%;
  height:200px;
  position:relative;
}
#left-column:before{
  position:absolute;
  /* for this example I used a free-copyright image from pixabay.com */
  background:url(https://pixabay.com/static/uploads/photo/2016/05/01/00/57/barn-1364280_960_720.jpg) no-repeat;
  background-size: 100% 100%;
  top:0;
  right:0;
  width:100%;
  padding-left:100%;
  height:100%;
  content:'';
  display:block;
}
#right-column{
  height:200px;
  float:left;
  width:33.33%;
  position:relative;
}
#right-column:after{
  position:absolute;
  background:green;
  top:0;
  left:0;
  width:10000px;
  height:100%;
  content:'';
  display:block;
}

要显示列内的内容，请给它们position:relative; z-index:1;。

然后你需要在 body 中添加以下规则以避免背景创建水平滚动条

body{
  overflow-x:hidden;
}

要在工作示例中查看它，请转到 here。 .

如果您喜欢更准确的解决方案，我认为您必须使用 javascript

Answer 2

你可以用大宽度的伪元素来模拟这个：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

p {
  margin-bottom: 16px;
}

.wrapper {
  overflow-x: hidden;
  min-height: 100vh;
}

.container {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  max-width: 800px;
  height: 700px;
  margin: 0 auto;
}

.cols {
  min-height: 300px;
  display: flex;
}

.left {
  background: linear-gradient(to right, #F9B80E, #E3342E);
  flex: 0 0 66.6%;
  position: relative;
}

.left:before {
  content: '';
  background: linear-gradient(to right, #FFED21, #F9B80E);
  position: absolute;
  right: 100%;
  width: 1000px;
  top: 0;
  bottom: 0;
}

.right {
  background: #E5E5E4;
  position: relative;
  padding: 20px;
}

.right:after {
  content: '';
  background: #E5E5E4;
  position: absolute;
  left: 100%;
  width: 1000px;
  top: 0;
  bottom: 0;
}

<div class="wrapper">
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quam. Dolore unde repudiandae deleniti, explicabo voluptatum, consequatur soluta architecto cumque! Modi sit doloremque veniam dignissimos porro nulla, exercitationem illum possimus!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quam. Dolore unde repudiandae deleniti, explicabo voluptatum, consequatur soluta architecto cumque! Modi sit doloremque veniam dignissimos porro nulla, exercitationem illum possimus!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quam. Dolore unde repudiandae deleniti, explicabo voluptatum, consequatur soluta architecto cumque! Modi sit doloremque veniam dignissimos porro nulla, exercitationem illum possimus!</p>
    <div class="cols">
      <div class="left"></div>
      <div class="right">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat esse, corporis, quis accusantium, adipisci sequi animi cupiditate distinctio blanditiis consequuntur illo molestias velit dolorem qui sit voluptas. Labore cupiditate, quis.</p>
      </div>
    </div>
  </div>
</div>