CSS의 한 요소에서 백분율 및 픽셀 기반 크기를 어떻게 처리합니까?

특히 DIV에서 100 %의 총 너비가 필요하지만 10 픽셀의 패딩과 1 픽셀의 경계가 필요한 상황을 언급하고 있습니다. (그리고 브라우저를 자동으로 그 너비로 설정하지 마십시오. 예를 들어 왼쪽으로 떠있었습니다.)CSS의 한 요소에서 백분율 및 픽셀 기반 크기를 어떻게 처리합니까?

JavaScript를 사용하지 않고 이것을 수행하는 간단한 방법이 있습니까?

출처

2009-06-20 James Skidmore

아니요, 현재 주요 브라우저에서 작동하는 하나의 요소에서이를 설정할 방법이 없습니다.

2 중첩 된 div을 사용할 수 있습니다. 외곽의 100% 너비를 div으로 설정하고 안쪽 여백과 테두리를 div에 설정합니다.

출처

2009-06-20 22:10:38 molf

그래, 나는 단지 하나만 가지고는 불가능하다고 생각했지만, 나는 확실히하고 싶었다. 중첩 된 DIV를 사용하겠습니다. 감사! –

CSS3에서만 가능합니다.

출처

2009-06-20 22:12:05

나는 "CSS3에서만 * 가능 *"이라고 생각합니다 : http://www.w3.org/TR/css3-values/#calc – mercator

다음 해결책은 어떻게됩니까?

<?xml version='1.0' encoding='UTF-8'?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
    <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Content with Menu</title>   
    <style type="text/css"> 
     .content .outer{ 
     width:100%; 
     border:1px solid black; 
     background-color:green; 
     } 
     .content .inner{ 
     margin-left:10px; 
     margin-right:10px; 
     background-color:red; 
     } 
    </style>   
    </head> 
    <body>  
    <div class="content"> 
     <div class="outer"> 
     <div class="inner"> 
      <p>Hi!</p> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

업데이트 OK, 당신은 단지 하나 개의 요소가 무엇에 관해 얘기하는지 달성하지 않습니다.

출처

2009-06-20 22:12:07 merkuro

box-sizing: border-box을 사용하는 경우 width: 100%; border: 1px solid black; padding: 10px;을 설정하면 너비, 테두리, 여백 및 채우기의 합계가 너비에 지정된 값이됩니다. Source

EDIT : 브라우저 지원이 약간 제한적입니다. FF 3.5와 Safari 4는 IE8이나 Chrome에 대해서는 잘 모릅니다.

출처

2009-06-20 22:36:46 Kerrick

CSS3에서만 작동합니다. –

Chrome과 Safari는 모두 Webkit이므로 일반적으로 말하자면 CSS는 동의어입니다. –

CSS의 한 요소에서 백분율 및 픽셀 기반 크기를 어떻게 처리합니까?

답변

관련 문제