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

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 s должны быть использованы. Лучше всего здесь сделать свой навигационный ящик float:left и оставить значение по умолчанию display.

Answer 3

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

Answer 4

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

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

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