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

Question

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

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

У меня есть отделение с фиксированной высотой, позволяет, просто говорят 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

#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

добавлено 09 Январь 2013 в 01:13 автор Rick Hoving отредактировано 26 Июнь 2015 в 05:59

Просмотры: 2

источник

nl ja de

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

добавлено 09 Январь 2013 в 01:18, автор Sven Bieder, источник

1 ответы

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

автор jacktheripper · Answer 1 · 2013-01-09T01:16Z

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;