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

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

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

Widget

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

403
css height pixels

11 ответов

Я понимаю, что это старый пост, но, учитывая, что он не был предложен, стоит упомянуть, что если вы пишете для 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);
753

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

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

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

66

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

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

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

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

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

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

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

список css:

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

заголовок css:

height: 17px;
float: left;
width: 100%;
8
  1. используйте отрицательные поля на элементе, который вы хотели бы минус пикселей. (необходимый элемент)
  2. сделать overflow:hidden; на содержащий элемент
  3. переключатель 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;
5

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

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

на нашем элементе окна мы добавили поле 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>
2

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

для 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>

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

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

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

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

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

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

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

1

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

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

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

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

   flex:1 1 auto;
1

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

0