CSS에서 width = 100 %-100px를 어떻게 할 수 있습니까? CSS에서 어떻게 이런 식으로 할 수 있습니까? width:

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

width: 100% - 100px;

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

답변

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

width: calc(100% - 100px);

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

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

답변

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

답변

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

<!--First Solution-->
width: calc(100% - 100px);
<!--Second Solution-->
width: calc(100vh - 100px);
스 니펫 확장

폭스 바겐 : 뷰포트 너비

vh : 뷰포트 높이

답변

내 코드 및 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>

답변

콘텐츠 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>

답변

본문 여백을 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>

답변

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

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; }

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