Возможно ли, чтобы элемент встроенного блока автоматически заполнил доступную ширину?

У меня есть <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>

Ответы

Ответ 1

Вам нужно удалить стили inline-block и поплавить div #sub-navigation. 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

Ответ 2

Это не то, как inline-block предполагается использовать. Лучше всего здесь сделать свой навигационный блок float:left и оставить значение по умолчанию display.

Ответ 3

Если ваш заголовок, нижний колонтитул и обертка имеют определенную ширину, то да, вы можете иметь свой основной контейнер, заполнив доступное пространство. Но если вы не указали ширину в CSS, вам нужно определить, насколько большой ваш основной контейнер CAN может быть основан на визуализированной ширине содержащего элемента (обертки). Единственный способ определить эту ширину после загрузки страницы - с помощью javascript. Если вы хотите, чтобы ваш сайт имел динамическую ширину, но все еще содержал ваш контент (суб-навигацию и основной контейнер), вы должны были либо использовать javascript, либо проценты, а проценты могут стать уродливыми, когда вы начнете смотреть на различные разрешения мониторов, ноутбуков и т.д.

Ответ 4

Когда-либо слышал о модели flex box!!

Сделано именно для этого.

Примечание в модели flexbox все дочерние элементы действуют как модель гибкой коробки, вы не можете отказаться от определенных вещей. Это означает, что если страница имеет навигацию и под ней содержимое div + side div. Вы не можете сделать из нее верхнюю навигацию. Что имеет последствия. Таким образом, решение состоит в том, чтобы иметь все, что нужно только для гибкой коробки в одном div.