Ширина Div 100% минус фиксированное количество пикселей
https://stackoverflow.com/questions/651317
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Как я могу добиться следующей структуры без использования таблиц или JavaScript?Белые границы представляют собой края divs и не имеют отношения к данному вопросу.
Размер области в середине будет меняться, но она будет иметь точные значения пикселей, и вся структура должна масштабироваться в соответствии с этими значениями.Чтобы упростить это, мне бы понадобился способ установить ширину "100% - n пикселей" для верхнего среднего и нижнего среднего divs.
Я был бы признателен за чистое кроссбраузерное решение, но в случае, если это невозможно, подойдут CSS-хаки.
Вот тебе и бонус.Еще одна структура, с которой я боролся и в конечном итоге использовал таблицы или JavaScript.Это немного отличается, но создает новые проблемы.В основном я использовал его в оконной системе на основе jQuery, но я бы хотел оставить макет вне скрипта и контролировать размер только одного элемента (среднего).
Решение
Вы можете использовать вложенные элементы и отступы, чтобы получить левый и правый край на панели инструментов. Ширина по умолчанию для элемента 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;
}
Другие советы
Новый способ, на который я только что наткнулся: css calc() :
.calculated-width {
width: -webkit-calc(100% - 100px);
width: -moz-calc(100% - 100px);
width: calc(100% - 100px);
}
Источник: css ширина 100% минус 100 пикселей
Хотя ответ Гуффы работает во многих ситуациях, в некоторых случаях вы можете не захотеть, чтобы левая и / или правая части заполнения были родительскими для центрального 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, чтобы восстановить это качество.Если вам не повезло оказаться в такой ситуации, свяжитесь со мной, и я откопаю css.
jsfiddle здесь: jsfiddle.net/RgdeQ
Наслаждайтесь!
Вы можете воспользоваться Гибкий ящик планировка.Вам нужно установить 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>Обычный способ сделать это, как описано Guffa, вложенные элементы. Немного грустно добавлять дополнительную разметку, чтобы получить нужные вам крючки, но на практике div-обертка здесь или там никому не повредит.
Если вы должны сделать это без лишних элементов (например, когда у вас нет контроля над разметкой страницы), вы можете использовать box-sizing , которая имеет довольно приличную, но не полную или простую поддержку браузера. Хотя, скорее, веселее, чем полагаться на сценарии.
Может быть, я тупой, но разве здесь нет очевидного решения?
<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% своего родителя, хотя установка ширины в процентное значение исправляет это.
Мы можем добиться этого, используя flex-box очень легко.
Если у нас есть три элемента, такие как Header, MiddleContainer и Footer. И мы хотим дать некоторую фиксированную высоту для верхнего и нижнего колонтитула тогда мы можем написать так:
Для React / RN (значения по умолчанию: «display» как flex и «flexDirection» как столбец), в веб-CSS необходимо указать контейнер тела или контейнер, содержащий их, как display: «flex», flex-direction: столбец, как показано ниже:
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,
}
что если ваш div для обтекания был равен 100% и вы использовали заполнение для количества пикселей, то если заполнение # должно быть динамическим, вы можете легко использовать jQuery для изменения количества заполнения, когда ваши события запускаются.
У меня была похожая проблема, когда я хотел разместить баннер в верхней части экрана с одним изображением слева и повторяющимся изображением справа до края экрана.В итоге я решил это следующим образом:
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;
}
Ключом был правильный ярлык.Я в основном указываю, что я хочу, чтобы это повторялось с 131 пикселя слева до 0 пикселей справа.
В некоторых контекстах вы можете использовать настройки полей, чтобы эффективно указать & ширину, минус N пикселей " ;. Смотрите принятый ответ на этот вопрос .
