Сделайте так, чтобы Div заполнял всю ширину, но с боковой панелью - не зависит от содержимого

#html #css #responsive-design

#HTML #css #адаптивный дизайн

Вопрос:

Хорошо, я даже не уверен, возможно ли это, но вот мой вопрос.

У меня есть два раздела, <div id="article"> <div id="sidebar"> и я хотел бы, чтобы они были в адаптивном макете с двумя столбцами. Однако #sidebar я хотел бы сохранить фиксированную ширину.

В настоящее время у меня следующая настройка:

 <html>
  <div id="container">
    <div id="article">
      <h1>Hello World</h1>
    </div>
    <div id="sidebar">
    </div>
  </div>
</html>

—

 #article {
  width: auto;
  float: left;
  padding: 0;
  margin: 0 300px 0 0;
}

#sidebar {
  float: right;
  width: 300px;
  margin: 0 0 0 -300px;
  padding: 0;
}

В принципе это работает, однако #article div не всегда заполняет пространство, если в нем недостаточно содержимого. Есть ли способ заполнить div содержимым, чтобы он расширялся на всю ширину? Я хотел, чтобы горизонтальная линейка проходила по всей странице, но она шла только по ширине самого длинного заголовка, который у меня есть.

Примитивный пример: http://imgur.com/Z7qwcNk

Ответ №1:

ДЕМОНСТРАЦИЯ

css

 html, body {
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
}
#container {
    height: 100%; /* to occupy full width and height */
    width: 100%;
}
#article {
    height: 100%;
    width: calc(100% - 300px); /* will adjust the width of sidebar */
    float: left;
    background: green;
}
#sidebar {
    float: right;
    width: 300px;
    height: 100%;
    background: red;
}

HTML

 <div id="container">
    <div id="article">
         <h1>Hello World tes test test test test tes tete test test tes testve</h1>

    </div>
    <div id="sidebar"></div>
</div>

1. является ли calc() css3? и должен ли я делать что-то особенное для старых браузеров? Я удивлен, что никогда раньше этого не видел!

2. Подробнее о calc здесь: css-tricks.com/a-couple-of-use-cases-for-calc а поддержка браузеров — IE9 и выше, chrome 19 и выше, mozilla поддерживает это. На сегодняшний день все современные браузеры поддерживают это. Для более старого браузера вы также можете использовать префиксы, такие как -webkit-calc(), -moz-calc()

3. Спасибо!! Это сработало чудесно. Трюк, который я узнал, заключался в том, что пробелы по обе стороны от и — очень необходимы

Ответ №2:

Взгляните на эту СКРИПКУ. Это не даст вам фиксированной ширины, но даст вам пропорциональную ширину. Я думаю, что это будет вашим лучшим выбором, сохраняя при этом его отзывчивость. Вы также можете использовать width: calc(100% — ваша фиксированная ширина в пикселях). Однако это не будет работать в ie8 и ниже, если вам нужно поддерживать этот браузер.

 #container {
  width: 100%;
   background-color: yellow;
   overflow:hidden;
    height: 700px;
 }

 #article {
   width: 70%;
   display:inline-block;
  background-color: red;
  float: left;
 }

 #sidebar {
    background-color: blue;
   float: right;
   width: 30%;
 }