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

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



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



Widget



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

634   11  

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  
2017-06-16 14:31:29

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

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

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

66  
2012-11-02 09:36:21

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

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

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

$(window).resize(function() { setSizes(); });
22  
2010-03-12 20:56:05

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

#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}
14  
2012-08-01 20:16:12

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

список css:

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

заголовок css:

height: 17px;
float: left;
width: 100%;
8  
2010-03-12 21:03:15
  1. используйте отрицательные поля на элементе, который вы хотели бы минус пикселей выкл. (необходимый элемент)
  2. сделать overflow:hidden; на содержащий элемент
  3. переключатель overflow:auto; на нужный элемент.

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

7  
2011-08-30 18:03:48

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

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  
2014-06-30 15:27:09

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

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

на нашем элементе окна мы добавили 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  
2016-04-28 17:00:23

Спасибо, я решил мой с вашей помощью, немного подправив его, так как я хочу 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>

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

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

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

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

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

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

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

1  
2016-05-13 15:10:07

другой способ достижения той же цели: 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  
2018-06-25 01:18:13

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

0  
2010-03-12 21:05:26

Comments

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