Div ширина 100% минус фиксированное количество пикселей

Как я могу достичь следующей структуры без использования таблиц или JavaScript? Белые границы представляют собой края divs и не имеют отношения к вопросу.



Structure 1



размер области в середине будет меняться, но он будет иметь точные значения пикселей, и вся структура должна масштабироваться в соответствии с этими значениями. Чтобы упростить его, мне нужен способ установить ширину "100% - n px" для верхнего среднего и нижнего среднего дивов.



Я был бы признателен чистое кросс-браузерное решение, но в случае, если это невозможно, CSS-хаки будут делать.



вот бонус. Другая структура, с которой я боролся, и в конечном итоге использует таблицы или JavaScript. Это немного отличается, но вводит новые проблемы. Я в основном использую его в оконной системе на основе jQuery, но я хотел бы сохранить макет из сценария и контролировать только размер одного элемента (средний).



Structure 2

715   10  

10 ответов:

вы можете использовать вложенные элементы и отступы, чтобы получить левый и правый край на панели инструментов. Ширина по умолчанию div элемент auto, что означает, что он использует доступную ширину. Затем вы можете добавить дополнение к элементу, и он по-прежнему остается в пределах доступной ширины.

вот пример, который можно использовать для размещения изображений в виде левого и правого закругленных углов, а также центрального изображения, которое повторяется между ними.

HTML:

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

в CSS:

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}
73  
2015-03-31 01:25:28

новый способ, на который я только что наткнулся: css calc():

.calculated-width {
    width: -webkit-calc(100% - 100px);
    width:    -moz-calc(100% - 100px);
    width:         calc(100% - 100px);
}​

источник: css ширина 100% минус 100px

660  
2016-10-20 14:51:46

хотя ответ Guffa работает во многих ситуациях, в некоторых случаях вы можете не хотеть, чтобы левая и/или правая части заполнения были родителем Центрального div. В этих случаях вы можете использовать контекст форматирования блока по центру и перемещать отступы влево и вправо. Вот код

HTML:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

CSS:

.container {
    width: 100px;
    height: 20px;
}

.left, .right {
    width: 20px;
    height: 100%;
    float: left;
    background: black;   
}

.right {
    float: right;
}

.center {
    overflow: auto;
    height: 100%;
    background: blue;
}

Я чувствую, что эта иерархия элементов более естественна по сравнению с вложенными вложенными дивами и лучше представляет то, что на странице. Из-за этого границы, отступы и поля могут быть применены нормально ко всем элементам (т. е.: эта "естественность" выходит за рамки стиля и имеет последствия).

обратите внимание, что это работает только на divs и других элементах, которые разделяют его свойство "заполнить 100% ширины по умолчанию". Входы, таблицы и, возможно, другие потребуют от вас обернуть их в контейнер div и добавить немного больше css для восстановления этого качества. Если вам не повезло оказаться в такой ситуации, свяжитесь со мной и - Я пороюсь в УСБ.

jsfiddle здесь:jsfiddle.net/RgdeQ

наслаждайтесь!

6  
2012-08-26 13:08:01

обычный способ сделать это, как указано в Guffa, вложенные элементы. Немного грустно добавлять дополнительную разметку, чтобы получить крючки, которые вам нужны для этого, но на практике обертка div здесь или там никому не повредит.

Если вы должны сделать это без дополнительных элементов (напр. если у вас нет контроля над разметкой страницы), вы можете использовать

3  
2017-05-23 15:03:09

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

<div class="parent">
    <div class="fixed">
    <div class="stretchToFit">
</div>

.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}

другой способ, который я выяснил в chrome еще проще, но человек это хак!

.fixed{ 
   float: left
}
.stretchToFit{
   display: table-cell;
   width: 1%;
}

только это должно заполнить остальную часть строки по горизонтали, как это делают ячейки таблицы. Тем не менее, вы получаете некоторые странные проблемы с его переходом на 100% от своего родителя, установив ширину в процентное значение, хотя это исправляет.

3  
2015-09-24 12:27:29

вы можете использовать Flexbox макет. Вам нужно установить flex: 1 на элемент, который должен иметь динамическую ширину или высоту для flex-direction: row and column соответственно.

динамический ширина:

HTML

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-width {
  width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
  flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}

выход:

.container {
  display: flex;
  width: 100%;
  color: #fff;
  font-family: Roboto;
}
.fixed-width {
  background: #9BCB3C;
  width: 200px; /* Fixed width */
  text-align: center;
}
.flexible-width {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
}
<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>

</div>

динамическая высота:

HTML

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-height {
  height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
  flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}

выход:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: #fff;
  font-family: Roboto;
}
.fixed-height {
  background: #9BCB3C;
  height: 50px; /* Fixed height or flex-basis: 100px */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flexible-height {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>

</div>
3  
2015-12-10 15:29:02

Что делать, если ваш оберточный div был 100%, и вы использовали заполнение для количества пикселей, то если заполнение # должно быть динамическим, вы можете легко использовать jQuery для изменения количества заполнений при запуске событий.

2  
2009-03-16 19:16:37

мы можем достигнуть этого используя гибк-коробку очень легко.

Если у нас есть три элемента, как заголовок, MiddleContainer и нижний колонтитул. И мы хотим дать некоторую фиксированную высоту в верхний и Нижний колонтитулы. тогда мы можем написать так:

для реагировать/РН(по умолчанию это "дисплей", как Flex и flexDirection как колонка), в веб-экране, придется определять тело контейнера или контейнера, содержащих их в качестве дисплея: флекс, флекс-направление: 'столбца', как показано ниже:

    container-containing-these-elements: {
     display: flex,
     flex-direction: column
    }
    header: {
     height: 40,
    },
    middle-container: {
     flex: 1, // this will take the rest of the space available.
    },
    footer: {
     height: 100,
    }
1  
2017-09-19 07:29:02

в некоторых контекстах вы можете использовать настройки маржи, чтобы эффективно указать "100% ширина минус N пикселей". См. принятый ответ на этот вопрос.

0  
2017-05-23 15:03:09

У меня была аналогичная проблема, когда я хотел баннер в верхней части экрана, который имел одно изображение слева и повторяющееся изображение справа от края экрана. В конечном итоге я решил это так:

CSS:

.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}

.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}

ключ был правильный тег. Я в основном указываю, что я хочу, чтобы он повторялся с 131px слева до 0px справа.

0  
2011-02-08 06:25:19

Comments

    Ничего не найдено.
Click here to cancel reply.