сократите отделение с дополнением или краем

То, что я пытаюсь сделать, следующее.

У меня есть отделение с фиксированной высотой, позволяет, просто говорят 100px .
То, что я хочу, является отделением в этом отделении на 100 пкс с высотой 100% , но тогда 10px короче наверху и основание.
Таким образом, результатом будет отделение обертки с 100px высота и отделение в этом отделении обертки, которое начинает 10px от вершины и концов 10px от основания (т.е. height:80px ).
Проблема состоит в том, что я получаю отделение, у которого есть общая высота 120px .

Note: only html CSS solutions
Note2: the div inside the wrapper has a height of 100%

CSS и HTML

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

#t{
  height:100px;
  width:5px;
  background: blue;
}

#e{
  height:100%;
  width: 5px;
  padding-top:10px;
  padding-bottom: 10px;
  background: yellow;
}

#s{
  height:100%;
  width: 5px;
  background: gray;
}
<div id="t">
  <div id="e">
    <div id="s">
    </div>
  </div>
</div>
</div> </div>

Here's the JSfiddle I've been playing with http://jsfiddle.net/MWUsM/2/

3
nl ja de
когда вы делаете внутреннее отделение position:absolute; top:10px; bottom:10px; вместо height:100% это должно работать.
добавлено автор Sven Bieder, источник

1 ответы

You're looking for the CSS box-sizing property border-box

The box-model specifies the rendered width/height of the element as specified width/height + padding + border, and to subtract the padding and border properties from this sum, the CSS3 specification adds box-sizing

Updated example

Chris Coyier has a nice and detailed article

Для взаимной поддержки браузера это предложило, чтобы вы добавили префиксы следующим образом:

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
7
добавлено
Хороший пункт - включенный в связанную статью, но я буду все равно
добавлено автор jacktheripper, источник
Don' t забывают принимать его ответ
добавлено автор Peter Wooster, источник
Работы как очарование, большое спасибо I' ll принимают его, когда я могу
добавлено автор Rick Hoving, источник
Поскольку дополнение к вашему ответу, который я должен также включать -moz-box-sizing: коробка границы; и - калибровка коробки WebKit: коробка границы;
добавлено автор Rick Hoving, источник
Или можно просто использовать модель коробки как здесь jsfiddle.net/MWUsM/10
добавлено автор demee, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)