CSS: установка ширины/высоты в процентах минус пиксели

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

У меня есть контейнер <div>, для которого я не хочу устанавливать высоту (потому что он будет варьироваться в зависимости от того, где на сайте он находится), и внутри него есть заголовок <div>, а затем неупорядоченный список элементов все с CSS для них.

Это выглядит примерно так:

Widget

Я хочу, чтобы неупорядоченный список занимал оставшуюся комнату в контейнере <div>, зная, что заголовок <div> имеет высоту 18px. Я просто не знаю, как указать высоту списка как "результат 100% минус 18px ".

Я видел этот вопрос, заданный в паре других контекстов на SO, но я подумал, что стоит спросить еще раз для моего конкретного случая. Кто-нибудь есть какие-либо советы в этой ситуации?

ОТВЕТЫ

Ответ 1

Я понимаю, что это старый пост, но учитывая, что не было предложено, стоит упомянуть, что если вы пишете для CSS3-совместимых браузеров, вы можете использовать calc:

height: calc(100% - 18px);

Стоит отметить, что не все браузеры в настоящее время поддерживают стандартную функцию CSS3 calc(), поэтому может потребоваться реализация определенных функций браузера, таких как:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

Ответ 2

Для немного другого подхода вы можете использовать что-то вроде этого в списке:

position: absolute;
top: 18px;
bottom: 0px;
width: 100%;

Это работает до тех пор, пока родительский контейнер имеет position: relative;

Ответ 3

Я использую Jquery для этого

function setSizes() {
   var containerHeight = $("#listContainer").height();
   $("#myList").height(containerHeight - 18);
}

затем я привязываю размер окна, чтобы его пересчитать, когда изменяется размер окна браузера (если размер контейнера изменен с изменением размера окна)

$(window).resize(function() { setSizes(); });

Ответ 4

Не определяйте высоту как процент, просто установите top=0 и bottom=0, например:

#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}

Ответ 5

Предполагая высоту заголовка 17px

Список css:

height: 100%;
padding-top: 17px;

Заголовок css:

height: 17px;
float: left;
width: 100%;

Ответ 6

  • Используйте отрицательные поля для элемента, который вы хотите отключить. (желаемый элемент)
  • Сделайте overflow:hidden; на содержащем элементе
  • Переключитесь на overflow:auto; на нужный элемент.

Это сработало для меня!

Ответ 7

Попробуйте размер окна. Для списка:

height: 100%;
/* Presuming 10px header height */
padding-top: 10px;
/* Firefox */
-moz-box-sizing: border-box;
/* WebKit */
-webkit-box-sizing: border-box;
/* Standard */
box-sizing: border-box;

Для заголовка:

position: absolute;
left: 0;
top: 0;
height: 10px;

Конечно, родительский контейнер должен иметь что-то вроде:

position: relative;

Ответ 8

Я попробовал некоторые другие ответы, и никто из них не работал так, как я хотел. Наша ситуация была очень похожа, когда у нас был заголовок окна, и окно было изменено с изображениями в корпусе окна. Мы хотели заблокировать соотношение сторон для изменения размера без необходимости добавления в вычисления для учета фиксированного размера заголовка и по-прежнему иметь изображение, заполняющее тело окна.

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

В нашем элементе окна мы добавили маркер 20px, который способствует позиционированию относительно других элементов на экране, но не способствует "размеру" окна. Окно-заголовок затем позиционируется абсолютно (что удаляет его из потока других элементов, поэтому он не приведет к смещению других элементов, таких как неупорядоченный список), а верхняя часть - -20px, которая помещает заголовок внутри поля окна. Наконец, наш элемент ul добавляется в окно, а высота может быть установлена ​​на 100%, что приведет к заполнению тела окна (за исключением поля).

*,*:before,*:after
{
  box-sizing: border-box;
}

.window
{
  position: relative;
  top: 20px;
  left: 50px;
  margin-top: 20px;
  width: 150px;
  height: 150px;
}

.window-header
{
  position: absolute;
  top: -20px;
  height: 20px;
  border: 2px solid black;
  width: 100%;
}

ul
{
  border: 5px dashed gray;
  height: 100%;
}
<div class="window">
  <div class="window-header">Hey this is a header</div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

Ответ 9

Спасибо, я решил с вашей помощью, немного подстроил его, так как я хочу ширину 100% ширины на 100% (меньше высоты нижней панели) и без прокрутки по телу (без зависания/скрытия полос прокрутки).

Для CSS:

 html{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 body{
  position:relative;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 div.adjusted{
  position:absolute;width:auto;height:auto;left:0px;right:0px;top:0px;bottom:36px;margin:0px;border:0px;padding:0px;
 }
 div.the_bottom_bar{
  width:100%;height:31px;margin:0px;border:0px;padding:0px;
}

Для HTML:

<body>
<div class="adjusted">
 // My elements that go on dynamic size area
 <div class="the_bottom_bar">
  // My elements that goes on bottom bar (fixed heigh of 31 pixels)
 </div>  
</div>

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

Это отличие состоит в том, что один из элементов динамической области добавляет дополнительное нижнее отверстие, которое я не знаю, как избавиться от... это видео-тег (HTML5), обратите внимание, что я помещаю этот тег видео с помощью это css (поэтому нет причин для его создания нижнего отверстия, но это так):

 video{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

Цель: иметь видео, которое берет 100% от броузера (и динамически изменяет размеры при изменении размера браузера, но без изменения соотношения сторон), меньше нижнего пространства, которое я использую для div с некоторыми текстами, кнопками и т.д. (и валидаторы w3c и css, конечно).

EDIT: я нашел причину, видеотег похож на текст, а не элемент блока, поэтому я исправил его с помощью этого css:

 video{
  display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

Обратите внимание на display:block; на теге видео.

Ответ 10

Еще один способ достижения той же цели: гибкие коробки. Сделайте контейнер гибким блоком столбца, и тогда вы будете иметь полную свободу, позволяя некоторым элементам иметь фиксированный размер (поведение по умолчанию) или заполнять/уменьшать пространство контейнера (с помощью flex-grow: 1 и flex- термоусадочные: 1).

#wrap {        
  display:flex;
  flex-direction:column;
}
.extendOrShrink {
  flex-shrink:1;
  flex-grow:1;
  overflow:auto;
}

Смотрите https://jsfiddle.net/2Lmodwxk/ (попробуйте расширить или уменьшить окно, чтобы заметить эффект)

Примечание: вы также можете использовать сокращенное свойство:

   flex:1 1 auto;

Ответ 11

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