개체의 높이에 테두리를 삽입하는 방법이 있습니까?

저는 웹 사이트를 사용하는 기계를 제어하는 프로젝트를 진행하고 있으며 현재 CSS 스타일 시트를 만들고 있습니다.개체의 높이에 테두리를 삽입하는 방법이 있습니까?

<html> 
    <head> 
     <title>Machine overview V1</title> 
     <meta charset="utf-8"/> 
</head> 
<body> 
    <header> 
<h1>Machine overview</h1> 
</header> 
    <section> 
</section> 
    <footer> 
</footer> 
</body> 
</html>

지금은 그런 말을 할 수 있습니다 : 지금 당장이 스크립트를 가지고

header{height:15%;width:100%;} 
section{height:80%;width:100%;} 
footer{height:5%;width:100%;}

을하지만 이러한 특성 중 하나에

border:1px solid black;

를 추가 할 때이 망쳐 놨어요 높이 (%),
페이지의 전체 레이아웃이 기본적으로 엉망입니다.
다른 해상도를 사용하여 잘보아야하므로 높이를 npx로 설정할 수 없습니다.
개체의 높이에 테두리를 삽입하는 방법이 있습니까?
은

출처

2013-03-03 Jeroen Vorsselman

당신은 당신은 항상 마지막으로 접두어가 1 점을 추가하는 듯합니다 box-sizing:border-box;

.borderInside { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    border:1px solid red; 
}

출처

2013-03-03 12:21:50 deadlock

에 컨테이너를 설정할 ... 당신이 상자 그림자를 인세 수 좋아한다. 현재 버전의 Chrome 및 Safari는 접두사없이 상자 크기를 지원합니다. 또한 접두사를 지원하며 마지막에 작성하는 것을 사용합니다 (이 경우 접두어로 붙입니다). – Ana

개체의 높이에 테두리를 삽입하는 방법이 있습니까?

답변

관련 문제