CSS에서 width = 100 %-100px를 어떻게 할 수 있습니까?

153

CSS에서 어떻게 이런 식으로 할 수 있습니까?

width: 100% - 100px;

나는 이것이 매우 간단하다고 생각하지만 그것을 보여주는 예제를 찾기는 약간 어렵습니다.

html css

— fmsf
소스

1

링크 된 질문 stackoverflow.com/questions/11093943/… 는 흥미롭지 만 완벽하게 호환되지 않는 대답을 제공합니다. 아마도 이것도 살펴보고 싶을 것입니다.

— 11684

5

이 질문을하는 사람이라면 차드는 현대 브라우저에서 지원 width: calc(100% - 100px);한다고 답했습니다. 몇 가지 답을 적어주십시오. 나는 질문자가 그의 질문을 업데이트하기를 바랍니다. :)

— Anders M.

278

최신 브라우저는 이제 다음을 지원합니다.

width: calc(100% - 100px);

지원되는 브라우저 버전 체크 아웃 목록을 보려면 calc ()를 CSS 단위 값으로 사용할 수 있습니까?

jQuery 폴 백이 있습니다. CSS 너비 : calc (100 % -100px); jquery를 사용하는 대안

— 차드
소스

13

calc(100% - 6px)예를 들어 사용했을 때 calc(94%)다음과 같이 표시되는 것을 알았습니다. 다음과 같이 이스케이프해야합니다width: calc(~"100% - 6px");

— nsilva

12

-(또는 +) 문자 주위에 공백이 있어야합니다 . 이것은 작동합니다 : calc(100% - 100px); 그리고 이것은하지 않습니다 :calc(100%-100px);

— 자유 낙하

요소의 패딩을 자동으로 2 배 빼는 옵션이 없다는 것이 약간 놀랍습니다. 일반적으로 꽤 일반적인 유스 케이스입니다. 예를 들어, 나는 끝내야하고 padding: 0.25em; width: calc(100% - 2 * 0.25em - 2em);, 0.25em수정해야한다면 지금 두 곳에서 변경해야 할 것 입니다.

— cnst

많은 감사 그래서, 또한 같은 그것은 또한 작동 것을주의 할 것 : (100 % + 100 픽셀)

— 빅토르 Mellgren

99

당신이 둥지 사업부 수 margin-left: 50px;와 margin-right: 50px;, 안쪽 <div>과를 width: 100%;?

— 아릭 텐 에크
소스

4

너비 : calc (100 %-100px); 이것은 정답입니다.

— Sushan

17

당신은 이것을 시도 할 수 있습니다 ...

<!--First Solution-->
width: calc(100% - 100px);
<!--Second Solution-->
width: calc(100vh - 100px);

스 니펫 확장

폭스 바겐 : 뷰포트 너비

vh : 뷰포트 높이

— 바리 수크
소스

첫 번째 해결책은 맞습니다. 용기가 창문이 아니므로 100vh가 100 %와 같지 않을 수 있습니다.

— Ben Taliadoros

1

calc(100% - 6px)예를 들어 사용했을 때 calc(94%)다음과 같이 표시되는 것을 알았습니다. 다음과 같이 이스케이프 처리해야합니다width: calc(~"100% - 6px");

— nsilva

4

내 코드 및 IE6에서 작동합니다.

<style>
#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px;}
#sidebar { float:left; width:100px; height:500px; background:#cf9;}
#content { margin-left:100px; height:500px; background:#ffa;}

</style>

<div id="container">
  <div id="header">header</div>
  <div id="mainContent">
    <div id="sidebar">left</div>
    <div id="content">right 100% - 100px</div>
  <span style="display:none"></span></div>
</div>

여기에 이미지 설명을 입력하십시오

— 파운드
소스

6

그 Javascript는 무엇입니까?

— Faiz

3

콘텐츠 div의 컨테이너가 100 %-100px가되어야합니다.

#container {
   width: 100%
}
#content {
   margin-right:100px;
   width:100%;
}

<div id="container">
  <div id="content">
      Your content here
  </div>
</div>

</div>콘텐츠 div가 넘치면 마지막 직전에 지우기 div를 추가해야 할 수도 있습니다 .

<div style="clear:both; height:1px; line-height:0">&nbsp;</div>

— Aleemb
소스

1

작동하지 않습니다. 컨텐츠 너비는 100 %입니다. jsfiddle.net/cuezK/1

— gilly3

2

본문 여백을 0으로 설정하고 외부 컨테이너의 너비를 100 %로 설정하고 왼쪽 / 오른쪽 여백이 50px 인 내부 컨테이너를 사용하면 효과가있는 것 같습니다.

<style>
body {
    margin: 0;
    padding: 0;
}

.full-width
{
    width: 100%;
}

.innerContainer
{
    margin: 0px 50px 0px 50px;
}
</style>

<body>
  <div class="full-width" style="background-color: #ff0000;">
    <div class="innerContainer" style="background-color: #00ff00;">
      content here
    </div>
  </div>
</body>

— 티 반포 손
소스

2

부트 스트랩 패널로 작업하면서 헤더 패널에 "삭제"링크를 배치하는 방법을 찾고 있었는데 긴 이웃 요소로 인해 가려지지 않습니다. 그리고 해결책은 다음과 같습니다.

html :

<div class="with-right-link">
    <a class="left-link" href="#">Long link header Long link header</a>
    <a class="right-link" href="#">Delete</a>
</div>

CSS :

.with-right-link { position: relative; width: 275px; }
a.left-link { display: inline-block; margin-right: 100px; }
a.right-link { position: absolute; top: 0; right: 0; }

물론 들여 쓰기에 따라 "상단"및 "적절한"값을 수정할 수 있습니다. 출처

— 아르투르 로그인
소스

2

모든 공간을 확인했을 때만 작동했습니다. 그래서, 이런 식으로 작동하지 않았다 : width: calc(100%- 20px)또는 calc(100%-20px)완벽하게 함께 일했다 width: calc(100% - 20px).

— 알리 나 베이비 체바
소스

1

당신은 할 수 있습니다 :

margin-right: 50px;
margin-left: 50px;

편집 : 내 솔루션이 잘못되었습니다. Aric TenEyck이 게시 한 솔루션은 너비가 100 % 인 div를 사용한 다음 여백을 사용하여 다른 div를 중첩하는 것이 더 정확한 것 같습니다.

— 티나 오 루지
소스

3

이렇게하면 총 너비가 100 % + 100px가되지 않습니까?

— Adam Crume

: O (미안합니다 내가 내 게시물을 삭제하거나 내가 그것을두고해야하며 아래의 표는 아래로 밀어 수 있습니다.?

— 티나 Orooji

1

다운 투표는 일반적으로 게시물을 정리하여 부정적인 투표로 잃어버린 담당자 점수를 다시 얻을 수 있도록 권장하는 것입니다. 해결책이 잘못되었다는 것을 알고 있다면, 투표권 유무에 관계없이 삭제하거나 업데이트하여 올바른 것으로 만들 수 있습니다.

— aleemb

@AdamCrume-아뇨. 또한 지정한 경우에만 해당됩니다 width:100%. 명시 적으로 지정 하거나 절대 위치 지정 width을 사용하여이를 무시하지 않는 한 div는 컨테이너를 자동으로 채 웁니다 float. div에 여백을 추가하면 컨테이너가 여백으로 지정된 양보다 적은 컨테이너를 채울 수 있습니다.

— gilly3 2016 년

@aleemb-이 경우 downvotes는이 대답이 완벽하게 정확하기 때문에 CSS를 이해하지 못하는 사용자에 의한 것입니다.

— gilly3 2016 년

1

외부 div의 패딩은 원하는 효과를 얻습니다.

<html>
<head>
<style>
    #outer{
        padding: 0 50px;
        border:1px solid black; /*for visualization*/
    }

    #inner{
        border:1px solid red; /*for visualization*/
    }
</style>
</head>
<body>
<div id="outer">
    <div id="inner">
        100px smaller than outer
    </div>
</div>
</body>
</html>

— 조쉬 부시
소스

1

이 일반적인 시나리오에 유용한 두 가지 기술이 있습니다. 각각의 단점이 있지만 때때로 유용 할 수 있습니다.

상자 크기 : 테두리 상자 에는 항목 너비에 패딩 및 테두리 너비가 포함됩니다. 예를 들어 20px 20px 패딩과 1px 테두리를 가진 div의 너비를 100px로 설정하면 실제 너비는 142px이지만 border-box를 사용하면 padding과 margin은 100px 안에 있습니다.

.bb{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;     
    width: 100%;
    height:200px;
    padding: 50px;
}

여기에 훌륭한 기사가 있습니다 : http://css-tricks.com/box-sizing/ 여기에 바이올린이 있습니다. http://jsfiddle.net/L3Rvw/

그리고 위치가 있습니다 : 절대

.padded{
    position: absolute;
    top: 50px;
    right: 50px;
    left: 50px;
    bottom: 50px;
    background-color: #aefebc;
}

http://jsfiddle.net/Mw9CT/1/

물론 완벽하지는 않습니다. 상자 크기는 요소가 실제로 100 %-100 픽셀이 아니라 100 % 너비이므로 (자식 div가 될 것이므로) 질문에 정확히 맞지 않습니다. 모든 상황에서 절대 위치를 사용할 수는 없지만 부모 높이가 설정되어있는 한 일반적으로 좋습니다.

— 데이브
소스

0

CSS는 이벤트에 대한 애니메이션 또는 스타일 수정에 사용할 수 없습니다.

유일한 방법은 주어진 요소의 너비를 반환 한 다음 100px을 빼고 새로운 너비 크기를 설정하는 자바 스크립트 함수를 사용하는 것입니다.

jQuery를 사용한다고 가정하면 다음과 같이 할 수 있습니다.

oldWidth = $('#yourElem').width();
$('#yourElem').width(oldWidth-100);

그리고 네이티브 자바 스크립트로 :

oldWidth = document.getElementById('yourElem').clientWidth;
document.getElementById('yourElem').style.width = oldWidth-100+'px';

CSS 스타일이 100 %로 설정되어 있다고 가정합니다.

— 보리스 게리
소스

0

표준 모드를 사용하고 있습니까? 이 솔루션은 내가 생각하는 그것에 달려 있습니다.

2 열을 만들려고하면 다음과 같이 할 수 있습니다.

<div id="outer">
    <div id="left">
        sidebar
    </div>
    <div id="main">
        lorem ispsum etc... 
    </div>
</div>

그런 다음 CSS를 사용하여 스타일을 지정하십시오.

div#outer
{
    width:100%;
    height: 500px;
}

div#left
{
    width: 100px;
    height: 100%;
    float:left;
    background: green;
}

div#main
{
   width: auto;
   margin-left: 100px; /* same as div#left width */
   height: 100%;
   background:red;
}

2 열을 원하지 않으면 아마도 제거 할 수 있습니다 <div id="left">

— 핸슨
소스

0

<div style="width: 200px; border: 1px solid red;">
    <br>
    <div style="margin: 0px 50px 0px 50px; border: 1px solid blue;">
        <br>
    </div>
    <br>
</div>

— RC.
소스

0

CSS를 사전 처리하는 JavaScript 파일 인 LESS 를 사용하여 논리와 변수를 CSS에 포함시킬 수 있습니다. 따라서 귀하의 예를 들어, LESS에서는 width: 100% - 100px;원하는 것을 정확하게 달성하도록 작성 합니다. :)

— 존
소스

-1

당신은 할 수 없습니다.

그러나 여백을 사용하여 동일한 결과에 영향을 줄 수 있습니다.

— Traingamer
소스

-1

이것은 작동합니다 :

margin-right:100px;
width:auto;

— 사용자
소스

1

답변에 설명을 추가해 주시겠습니까?

— Michał Perłakowski

나는 시도했다 : calc (100 % -100px) 결과는 모든 플랫폼 / 브라우저에서 일관되지 않으며, 실제로 단순화하고 margin-right : 100px; 폭 : 자동; 그리고 그것은 효과가 있었다

— user1552559

calc는 CSS3 구성 요소 이며이 CSS는 CSS3를 지원하는 브라우저에서 작동합니다.

— Sushan

-2

짧은 대답은 CSS에서 이것을하지 마십시오. Internet Explorer는 CSS Expressions를 지원하지만 이것은 표준이 아니며 FireFox와 같은 다른 브라우저에서는 지원되지 않습니다.

JavaScript로이 작업을 수행하는 것이 좋습니다.

— 프라 빈 앙얀
소스

네, 자바 스크립트로 유지해야한다고 생각합니다. 코드를 굴절시키고 있고 그 tks를하고있는 자바 스크립트를 제거하고 싶었습니다.

— fmsf

1

제발 당신은 자바 스크립트에서이 작업을 수행하지 않도록 할 수 있습니다. HTML + CSS는 까다로울 수 있으며 솔루션은 분명하지 않지만 필요한 거의 모든 작업을 수행 할 수 있습니다. 정적 레이아웃에 JavaScript를 사용하는 것은 거의 항상 나쁜 생각입니다.

— Nicole