如何使div填充剩余的水平空间？

解决方案来自display属性.

基本上你需要使两个div像表格单元格一样.因此,不必使用float:left,您必须display:table-cell在两个div 上使用,并且还需要设置动态宽度div width:auto;.应将两个div放入具有该display:table属性的100%宽度容器中.

这是css:

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

和HTML:

重要信息:对于Internet Explorer,您需要在动态宽度div上指定float属性,否则不会填充空格.

我希望这能解决你的问题.如果你愿意,你可以在我的博客上阅读我写的关于此的完整文章.

现在,您应该使用该flexbox方法(可能适用于具有浏览器前缀的所有浏览器).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

由于这是一个相当受欢迎的问题,我倾向于使用BFC分享一个很好的解决方案.
下面的示例Codepen 这里.

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

在这种情况下,overflow: auto触发上下文行为并使正确的元素仅扩展到可用的剩余宽度,如果.left消失,它将自然地扩展到全宽.对于许多UI布局来说,这是一个非常有用和干净的技巧,但最初可能很难理解"它为何起作用".

这似乎可以实现您的目标.

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}

  

    left
  
  

    right
  

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}

    


    

        
Left
    
    

        
Hello, World!
    

    
    



    

        

            left
        
        



right