内联块元素是否可以自动填充可用宽度？

Question

我有<div id="content">，其中包含<div id="sub-navigation>和<div id="main container">，它们是内联块。我希望能够使main container填充剩余的可用页面宽度。这可能吗？

我需要columns-strip根据column元素的数量和宽度进行扩展或缩小。如果columns-strip的宽度超过main container的宽度，则应显示水平滚动条。

CSS：

* {
  margin: 0px;
  padding: 0px;
  font-size: 10pt;
  white-space: normal; 
}

#wrapper {
  margin: 0px 20px; 
  background-color: red;
}

#header {
  margin: 25px 10px 10px 10px;
  height: 50px; 
  background-color: purple;
  color: white;
}

#content {
  margin: 10px; 
  padding: 10px; 
  font-size: 0pt; 
  white-space: nowrap; 
  overflow: hidden; 
  background-color: white;
}

#sub-navigation {
  width: 200px; 
  height: 150px; 
  display: inline-block; 
  vertical-align: top; 
  background-color: forestgreen; 
  color: white;
}

#main-container {
  padding: 10px; 
  display: inline-block; 
  overflow: auto; 
  background-color: yellow;
}

#columns-strip {
  padding: 10px; 
  font-size: 0pt; 
  white-space: nowrap; 
  background-color: mediumturquoise;
}

.posts-column {
  margin: 0px; 
  width: 200px; 
  height: 200px; 
  display: inline-block; 
  vertical-align: top; 
  overflow: auto;
}

#footer {
  margin: 10px 10px 25px 10px; 
  height: 50px; 
  background-color: navy;
}

HTML：

<div id="wrapper">
  <div id="header"></div>  
  <div id="content">    
    <div id="sub-navigation"></div>    
    <div id="main-container">
      <div id="columns-strip">    
        <div class="posts-column" style="background-color: lightgray;"></div>
        <div class="posts-column" style="background-color: darkgray;"></div>
        <div class="posts-column" style="background-color: gray;"></div>
      </div>
    </div>
  </div>
  <div id="footer"></div>
</div>

Answer 1

您必须删除inline-block样式并浮动#sub-navigation div。 inline-block不适合您要实现的目标。当您不添加任何显示样式时，div元素将是block的默认值，block元素默认占用所有可用空间。通过浮动您创建的#sub-navigation元素，它只占用其内容所需的空间。

#sub-navigation {
  width: 200px; 
  height: 150px; 
  float : left;
  vertical-align: top; 
  background-color: forestgreen; 
  color: white;
}

#main-container {
  padding: 10px;        
  overflow: auto; 
  background-color: yellow;
}

确保在clear: left

之后添加#main-container元素

Answer 2

这不是inline-block应该如何使用的。这里最好的办法是制作导航框float:left并保留默认的display值。

Answer 3

如果页眉，页脚和包装具有特定的宽度，那么是的，您可以让主容器填充可用空间。但是如果你没有在CSS中指定宽度，那么你需要根据包含元素（包装器）的渲染宽度来确定主容器的大小。在页面加载后确定宽度的唯一方法是使用javascript。如果您希望您的网站具有动态宽度，但仍然将您的内容（子导航和主容器）填满屏幕，则您需要使用javascript或百分比，当您开始查看不同的分辨率时，百分比会变得很难看显示器，笔记本电脑等...

Answer 4

曾经听说过弹性盒模型 !!

这是为了这个。

请注意，在flexbox模型中，所有子元素都充当弹性框模型，您无法选择退出某些内容。这意味着如果页面有导航，并在其下面的内容div + side div。你无法进​​行顶级导航。这有影响。所以解决方案是只需要一个div中需要弹性框的所有东西。