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

У меня есть <div id="content">, который содержит <div id="sub-navigation> и <div id="main container">, которые сами по себе являются встроенными блоками. Я хотел бы, чтобы main container заполнил остальную часть доступной ширины страницы. Это возможно?

Макет страницы

Мне нужно, чтобы columns-strip расширялось или уменьшалось в зависимости от количества и ширины элементов column. Если ширина columns-strip превышает ширину main container, должна появиться горизонтальная полоса прокрутки.

* {
      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;
    }
<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>


html layout css page-layout
person Boris    schedule 19.04.2012    source источник
comment
Не с inline-block и без JavaScript, нет.   -  person Phrogz    schedule 19.04.2012
comment
Итак, я должен плавать sub-navigation и main-container?   -  person Boris    schedule 19.04.2012
comment
Кроме того, вы можете переосмыслить использование points вместо font-size.   -  person steveax    schedule 19.04.2012
comment
@steveax, не уверен, что ты имеешь в виду. Точки не являются желательными единицами размера шрифта? Не могли бы вы объяснить, пожалуйста?   -  person Boris    schedule 19.04.2012
comment
point не имеет смысла на экране и на самом деле рекомендуется только для таблицы стилей печати. Вы получите совершенно разные размеры шрифта, когда точки на экране. Много информации в Интернете, вот один, и другие.   -  person steveax    schedule 19.04.2012
comment
@steveax большое спасибо, я кое-чему научился!   -  person Boris    schedule 19.04.2012

Ответы (4)


arrow_upward
9
arrow_downward

Вы должны удалить стили 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

person Benjamin Udink ten Cate    schedule 19.04.2012
comment
Единственная проблема заключается в том, что если основное содержимое не имеет определения в виде div, оно будет равно 100%, что означает, что оно будет вставлено под вспомогательной навигацией. - person Lazerblade; 19.04.2012
comment
@Lazerblade: что ты имеешь в виду под definition as a div? div будет отображаться под #sub-navigation только в том случае, если его содержимое не позволяет отображать его рядом с ним (например, если вы укажете ширину, вставите большие изображения или нелепый URL-адрес) - person Benjamin Udink ten Cate; 19.04.2012
comment
Создайте скрипт, в котором основной контейнер находится рядом с div поднавигации без указания ширины для основного контейнера, но где основной контейнер заполняет ширину оболочки, не занятую поднавигацией, без использования javacript. - person Lazerblade; 19.04.2012
comment
Я впечатлен. Только одно. Где граница/зазор между столбцами и основным контейнером, как на картинке OP? Внутренний контейнер столбца показывает цвет справа, но он закрыт столбцом. Я впечатлен, не поймите меня неправильно, но в нем есть недостатки. - person Lazerblade; 19.04.2012
comment
Элемент переполняется, потому что содержимое div имеет фиксированную ширину. overflow-y: auto на ``#columns-strip` исправит это, если вы хотите использовать столбцы фиксированной ширины. Вы правы, правая сторона не растягивается, но это можно сделать с помощью жесткого margin-right на #main-container, вам, вероятно, лучше здесь с адаптивным макетом. - person Benjamin Udink ten Cate; 19.04.2012
comment
В качестве альтернативы этому совершенно правильному решению с плавающей запятой вы можете использовать две позиции absolute внутри позиции relative. Тогда есть два способа сделать эту работу (оба подходят для разных целей): один использует margin-left для вашего правого, расширяемого div; другой устанавливает соответствующие значения right и left. - person melkamo; 19.04.2012

arrow_upward
1
arrow_downward

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

person Niet the Dark Absol    schedule 19.04.2012

arrow_upward
0
arrow_downward

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

person Lazerblade    schedule 19.04.2012
comment
Согласовано. Я хочу, чтобы верхний и нижний колонтитулы растягивались до фрейма браузера (минус поля), вспомогательная навигация имеет фиксированную ширину, а содержимое — это то, что осталось между правой стороной вспомогательной навигации и правым краем красного div. Черт, мне нужен поплавок! - person Boris; 19.04.2012

arrow_upward
0
arrow_downward

Вы когда-нибудь слышали о модели flex box!!

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

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

person Muhammad Umer    schedule 29.08.2013