左边固定宽度div，右边填充剩余宽度div答案

【问题标题】：Fixed width div on left, fill remaining width div on right左边固定宽度div，右边填充剩余宽度div
【发布时间】：2012-09-25 08:29:00
【问题描述】：

我想要一个在左侧具有固定宽度图像的 div 和一个具有背景颜色的可变宽度 div，它应该在我的设备上扩展其宽度 100%。我无法阻止第二个 div 溢出我的固定 div。

当我在可变宽度 div 处添加溢出：隐藏时，它只会跳到照片下方，在下一行。

我怎样才能以正确的方式解决这个问题（即没有hacks或margin-left，因为我需要让网站稍后对媒体查询做出响应，并且我必须为每个设备使用其他分辨率图像更改图像）？

初学者网页设计师试图解决响应式网站的恐惧 -

HTML：

<div class="header"></div>
<div class="header-right"></div>

CSS：

.header{
    float:left;
    background-image: url('img/header.png');
    background-repeat: no-repeat;
    width: 240px;
    height: 100px;
    }

.header-right{
    float:left; 
    overflow:hidden; 
    background-color:#000;
    width: 100%;
    height: 100px;
    }

【问题讨论】：

标签： css css-float overflow fixed-width variable-width

【解决方案1】：

尝试从.header-right 中删除float:left 和width:100% — 右侧的div 然后按要求运行。

.header {
  float: left;
  background: #efefef;
  background-repeat: no-repeat;
  width: 240px;
  height: 100px;
}

.header-right {
  overflow: hidden; 
  background-color: #000;
  height: 100px;
}

<div class="header"></div>
<div class="header-right"></div>

【讨论】：

非常感谢！它适用于 iPhone 和 Android Galaxy S plus！我想我只需要注意并进行正确的媒体查询 min-device-pixel-ratio。希望我能投票，但我太新了。
如果您想颠倒设置并固定右侧的 div 和左侧的可变宽度 div，是否就像将 .header 上的 float:left 更改为浮动一样简单：正确的？我一直在jsfiddle.net/veW2z/14 玩这个，但我似乎无法让它按照我想要的方式运行。
@PaulGear 是的，应该这样做。保持 div 的顺序相同。
知道为什么jsfiddle.net/veW2z/19 没有做正确的事吗？除了向左侧 div 添加一个超出右侧 div 宽度的 margin-right 之外，我找不到让它工作的方法。
我在 .header 和 .header-right 上使用 height: 100% 进行了测试。使用 FireBug 检查时，.header-right 元素似乎填充了整个区域，而不是仅填充剩余区域。这种行为有什么解释吗？

【解决方案2】：

使用css grid，您可以更轻松地实现这一目标

您需要将这些 div 包装在一个包装器中，比如说parent
给.parentdisplay: grid
在.parent 和grid-area 中都提供grid-template-areas children
无需在两个children 中使用float: left 在.parent 中使用grid-template-columns 调整左div 的宽度

.parent {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header-left header-right";
}
.header {
    background-image: url(img/header.png);
    background-color: #ebebeb;
    background-repeat: no-repeat;
    height: 100px;
    grid-area: header-left;
}

.header-right {
    overflow: hidden;
    background-color: #000;
    width: 100%;
    height: 100px;
    grid-area: header-right;
}

<div class="parent">
  <div class="header"></div>
  <div class="header-right"></div>
</div>

css 变得更加高级，并且在高级 css 的帮助下回答，只要它对某人有用:)

【讨论】：