CSS3에서 div 50px를 100% 미만으로 만드는 것이 가능합니까?

CSS3에서 div 50px를 100% 미만으로 만드는 것이 가능합니까?

이 질문에는 이미 다음과 같은 답이 있습니다.

CSS div 높이를 100% 빼기 nPx로 설정하는 방법 (11개 답변)

마감됨8년 전에.

다음과 같은 작업이 가능합니까?div순수 CSS에서 100% 미만인 50px?나는 그것을 원합니다.<div>100%보다 50%만 적을 수 있습니다.자바스크립트는 필요 없습니다.

네, 가능합니다.IE를 사용하지 않는 경우expression()를 사용하여 CSS3에서 이를 수행할 수 있습니다.

div {
    width: 100%;
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);
}

데모: http://jsfiddle.net/thirtydot/Nw3yd/66/

이것은 여러분의 삶을 훨씬 더 편하게 해줄 것입니다.현재 3가지 주요 브라우저에서 지원됩니다.Firefox, Google Chrome(WebKit) 및 IE9: http://caniuse.com/calc

MDN: https://developer.mozilla.org/en/CSS/-moz-calc

DIV는 자동으로 상위 너비를 가져갑니다.따라서 정의할 필요가 없습니다.width일반적으로 다음과 같이 간단히 작성합니다.

div{
    margin-right:50px;
}

이 바이올린을 확인합니다.

또 다른 대안은 절대적인 포지셔닝입니다.

div {
    position: absolute;
    left: 0;
    right: 50px;
}

만지작거리다

하지만 샌디프의 솔루션은 당신이 주로 사용해야 하는 솔루션입니다.과도한 사용을 방지float이렇게 하면 요소가 자연스럽게 용기에 채워지는 것을 방지할 수 있습니다.

내 솔루션은 유무에 관계없이 작동합니다.float: left.

HTML:

<div></div>

CSS:

div {
    height: 20px;
    background: black;
    float: left;
    width: 100%;
    padding-right: 50px;
    box-sizing: border-box;
    background-clip: content-box; 
}​

데모

호환성:
Firefox 3.6, Safari 5, Chrome 6, Opera 10, IE 9

jsFiddle

디스플레이 사용block그리고.margin.display:block정의된 것과 결합되지 않은 경우height/width부모를 채우려고 할 겁니다

header {
    width:100%;
    background:#d0d0d0;
    height:100%;
}
h1 {
    display:block;
    border:#000 solid 1px;
    margin:0 50px 0 0;
    height:100px;
}
<header>
    <h1></h1>
</header>

네, 우리는 만드는 것으로 그것을 할 수 있습니다.

#custom_div{
 width:100%;
 margin-right:50px;
 }

감사해요.

언급URL : https://stackoverflow.com/questions/11093943/is-it-possible-to-make-a-div-50px-less-than-100-in-css3