给定一个 div 的宽度是固定的，我如何让另一个 div 以 100% 的大小坐在它旁边 - 第一个的宽度？答案

【问题标题】：Given one div being fixed width, how do I make another div sit beside it with size 100% - the width of the first?给定一个 div 的宽度是固定的，我如何让另一个 div 以 100% 的大小坐在它旁边 - 第一个的宽度？
【发布时间】：2012-11-29 07:05:05
【问题描述】：

我的页面左上角有一个带有徽标的 div，我想在它旁边创建另一个 div，作为带有文本的工具栏。问题是我似乎无法弄清楚如何让那个新的 div 占据剩余空间的全部宽度......它只是试图使用屏幕的整个宽度并且文本显示在徽标的顶部。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
  div#topbar {
    width: 100%;
    position: fixed;
    top:0px;
    left:0px;
    height:133px;
    background-image :url(bkgnd_header_tile.jpg);
    padding: 0px;
    margin: 0px;
  }
  div#logo {
    width: 187px;
    height: 133px;
    position: fixed;
    top:0px;
    left:0px;
    background-image:url('headerlogo_home.jpg');
  }
  div#text {

  }

  body {

  }    
</style>
</head>
<body>
  <div id="topbar">
    <div id="logo"></div>
    <div id="text">
      <span id="campuses">asdf</span>
      <span id="title">Blah</span>
    </div>
  </div>
</body>
</html>

topbar 应该是一个高 133px 宽 100% 的大 div。它用于保存工具栏的图像背景。另一个 div 仅用于左上角的徽标，宽度为 187px。

如何使第三个 div 位于图像右侧？

【问题讨论】：

标签： html

【解决方案1】：

如果我了解您要执行的操作，那么您需要执行以下操作：设置顶栏的宽度。无需设置位置。

#topbar{
 width:100%;
 height:133px;
}

然后您必须将徽标浮动到左侧：

#logo{
 width:187px;
 height:133px;
 float:left;
}

然后将您的文本也设置为向左浮动并将宽度设置为 100%：

#text{
 width:100%;
 height:133px;
 float:left;
}

【讨论】：

实际上，我确实需要设置位置 - 否则栏周围会出现难看的白色边框。但无论如何它确实有效。谢谢
只需将正文上的边距和内边距设置为 0 - 无需设置位置即可处理白色边框。向下滚动时，设置固定位置可能会产生不良影响。

【解决方案2】：

this 会为您工作吗？看起来你只漏掉了几行。

【讨论】：

【解决方案3】：

请记住，这是 CSS3 的东西，规范可能仍会更改，但您可以查看 calc。

[https://developer.mozilla.org/en-US/docs/CSS/calc]

[http://dev.w3.org/csswg/css3-values/#calc-notation]

width: calc(100% - 187px);

【讨论】：