CSS3에서 div를 50px로 100 % 미만으로 만들 수 있습니까?

CSS3에서 div를 50px로 100 % 미만으로 만들 수 있습니까? [복제]

---

이 질문에는 이미 답변이 있습니다.

• CSS div 높이를 100 % 빼고 nPx 11 답변 을 설정하는 방법

div순수 CSS에서 50px를 100 % 미만 으로 만들 수 있습니까? <div>100 % 미만의 50px 만 원합니다 . JavaScript를 원하지 않습니다.

---

그래 넌 할수있어. IE를 사용하지 않고 expression()CSS3에서을 사용하여 수행 할 수 있습니다 calc().

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

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

이것은 당신의 인생을 훨씬 쉽게 만들어 줄 것입니다. 현재 Firefox, 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;
}

깡깡이

그러나 Sandeep의 솔루션은 일반적으로 사용해야합니다. 과도하게 사용하지 마십시오 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