Вопросы Теги

CSS: действительно ли возможно получить отделение, которое 100% высотой, меньше верхнее и нижнее поле?

Я могу получить отделение 100% высотой, как это: 



  
    T5
    

    
    

    
  
  
    

      
100% Height Div

      
Lorem ipsum ...

Это похоже на это:

alt text

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

Но действительно ли возможно получить отделение с высотой "почти 100%-й" высоты? Если я хочу поля наверху и нижнюю часть, я могу сделать это?

Я хочу, чтобы это было похоже на это:

alt text

Я могу сделать это с Javascript+CSS. Я могу сделать это только с CSS?

Ответ:
Да, это возможно с абсолютным расположением. 

  #container {
     width: 380px;
     background-color: #DDD;
     border: 2px solid #666;
     position: absolute;
     top: 20px;    /* margin from top */
     bottom: 20px; /* margin from bottom */
     left: 50%;    /* start left side in middle of window */
     margin-left: -190px; /* then, reverse indent */
     overflow: auto; /* scrollbar as necessary */
  }

Результат:

alt text

Благодаря keithjgrant для ответа. См. весь код по http://jsbin.com/otobi.

6
задан Glorfindel 5 July 2019 в 01:04
поделиться

5 ответов

Попробуйте абсолютное позиционирование: 

#container {
    position: absolute;
    top: 20px;
    bottom: 20px;
}

Это может быть странно в IE6 (а что нет?), Но есть много уловок, которые можно попробовать, если вы погуглить. Некоторые включают добавление правила clear: и , или перенос вашего блока с абсолютным позиционированием внутрь другого блока.

overflow: auto должен заставить полосу прокрутки вести себя так, как вы ее изображаете.

редактировать: В качестве альтернативы вы можете добавить 20px отступ к div-оболочке, затем установить для вашего контейнера значение height: 100% без полей, и он должен заполняться до заполнения его оболочки. .

4
ответ дан 17 December 2019 в 07:02
поделиться

Не уверен, что я что-то пропустил, но почему бы не добавить margin-top: 20px; margin-bottom: от 20 пикселей до #container , если вам нужны поля?

0
ответ дан 17 December 2019 в 07:02
поделиться

Это не совсем точно, как CSS, но вы можете просто добавить тег BR за пределами контейнера вверху и внизу и настроить минимальную маржу 100% на 90- 95%.

0
ответ дан 17 December 2019 в 07:02
поделиться

Вы можете использовать второй div внутри с padding для реализации фактического "внешнего" padding:

<div style="height: 100%; width: 500px; margin: 0 auto; background: #CCC; border: solid #999; border-width: 0px 2px;">
 <div style="padding: 20px 0px;">
  Content here
 </div>
</div>

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

edit: На самом деле, вам придется использовать min-height для внешнего div, чтобы фон работал, когда ваша страница больше 100% размера экрана. Это, например, работает нормально:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title>Test</title>
 <style type="text/css">
   html
   { height: 100%; padding: 0; margin: 0; background: #FFF; }
   body
   { min-height: 100%; margin: auto; width: 500px;
     background: #CCC; border: solid #999; border-width: 0 2px; }
   div#main
   { padding: 20px 15px; }
 </style>
</head>

<body>
<div id="main">
 <h1>100% Height Div</h1>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
  parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
  pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
  pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
  rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
 <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
  Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo
  ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
  dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
  varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
  augue.</p> 
</div>
</body>
</html>
0
ответ дан 17 December 2019 в 07:02
поделиться

Два варианта:

1) Вы можете использовать что-то вроде 

#theDiv {
    top: 16px;
    bottom: 20px;
}

, но это будет работать только в браузерах, соответствующих стандартам, и IE> = 7, поскольку IE 6 не будет правильно отображать ваш div при использовании обоих вверх и внизу .

2) Вы можете изменить модель блока , чтобы включить границы сверху и снизу в пределах заданной высоты . Используйте что-то вроде 

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box; /* IE >= 8 */
}

, чтобы вы могли подделать верх и низ , используя 

#theDiv {
    border-top: 16px;
    border-bottom: 20px;
}

, и перевести IE 6 и 7 в режим причуд (поместив что-то, например, комментарий HTML, перед DOCTYPE) для использования модели рамки рамки .

Если вы хотите поддерживать IE 6, вам придется использовать # 2. Таким образом, в IE 6 вы можете использовать режим quirks только тогда, когда вы этого хотите (единственный другой вариант для поддержки этого в IE 6 - это использование выражений CSS, но они очень интенсивны для ЦП, поскольку механизм сценариев J (ava) в IE должен пересчитывать эти ширину и высоту при каждом изменении размера).

0
ответ дан 17 December 2019 в 07:02
поделиться