브라우저와 크기가 같은 CSS div 브라우저 크기가 30px 이하인

브라우저의 너비가 30px 이하인 동일한 크기의 div가 흰색 테두리가있는 아이디어를주기 위해 필요합니다. . 이러한 div의 크기가 조정될 때마다 브라우저가 그에 따라 조정됩니다. 테두리를 사용하지 않았습니다 : 15px 흰색은 스크롤 막대를 만들 것이므로 원하지 않습니다.브라우저와 크기가 같은 CSS div 브라우저 크기가 30px 이하인

나는 이것을 시도했지만 스크롤 막대도 만듭니다.

<body> 
    <div id="background-wrapper"> 
     <div id="main-wrapper"> 
      <!-- <img src="bla bla" /> --> 
     </div> 
    </div> 
</body> 

#background-wrapper{ 
    background-color:#FFF; 
    position:absolute; 
    width:100%; 
    height:100%; 
    background-color:#FFF; 
} 

#main-wrapper{ 
    background-color:#F00; 
    position:relative; 
    float:left; 
    width:100%; 
    height:100%; 
    top:15px; 
    left:13px; 
}

모든 아이디어 ??

출처

2011-07-29 peterK

#background-wrapper 요소를 없애고 대신이 작업을 수행해보십시오.

#main-wrapper { 
    position: absolute; 
    left: 15px; 
    right: 15px; 
    top: 15px; 
    bottom: 15px; 
}

예는 here입니다.

출처

2011-07-29 11:09:49

덕분에 약간의 패딩을 시도 할 수 있습니다. 그것은 간단했다. 그러나 두 번째 해결책은 마진을 가지고 작동하지 않았습니다. – peterK

그래, 두 번째 해결책이 실제로 잘못되었음을 깨달았으므로 곧 제거했습니다. –

이 시도 :

body { 
    background-color: #fff; 
} 

#main-wrapper { 
    margin: 30px; 
}

배경 - 래퍼에 대한 필요가 없습니다.

출처

2011-07-29 11:11:44 JWeary

OP가 실제로 원하는 것을 수행하지는 않습니다 - 내용으로 만 확장되며 브라우저 뷰포트의 크기로 기본 설정되지 않습니다. –

죄송합니다, 당신 말이 맞습니다. 내가 그 질문을 정말로 이해하지 못했다는 것을 알게된다. – JWeary

당신은 당신의 내면의 사업부

<body> 
<div id="background-wrapper"> 
    <div id="main-wrapper"> 
     <!-- <img src="bla bla" /> --> 
    </div> 
</div> 
</body> 

#background-wrapper{ 
background-color:#FFF; 
position:absolute; 
width:100%; 
height:100%; 
background-color:#FFF; 
} 

#main-wrapper{ 
background-color:#F00; 
position:relative; 
float:left; 
width:100%; 
height:100%; 
padding: 30px /*This shouldn't create scrollbars, but provide padding inside your divs*/

}는 일

출처

2011-07-29 11:12:16

브라우저와 크기가 같은 CSS div 브라우저 크기가 30px 이하인

답변

관련 문제