CSS에서 너비 = 100% - 100%를 어떻게 할 수 있습니까?
CSS에서 다음과 같은 작업을 수행하려면 어떻게 해야 합니까?
width: 100% - 100px;
나는 이것이 꽤 간단하다고 생각하지만 그것을 보여주는 예를 찾기가 조금 어렵습니다.
이제 최신 브라우저는 다음을 지원합니다.
width: calc(100% - 100px);
지원되는 브라우저 버전 목록 확인하기: calc()를 CSS 단위 값으로 사용할 수 있습니까?
jQuery 폴백이 있습니다: css width: 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);vw: 뷰포트 너비
vh: 뷰포트 높이
제가 모든 공간을 확인해야만 제게 효과가 나타나기 시작했습니다.그래서 이런 식으로 작동하지 않았습니다.width: calc(100%- 20px)또는calc(100%-20px)그리고 완벽하게 함께 일했습니다.width: calc(100% - 20px).
100% - 100px가 되기를 원하는 컨텐츠 div용 컨테이너가 필요합니다.
#container {
width: 100%
}
#content {
margin-right:100px;
width:100%;
}
<div id="container">
<div id="content">
Your content here
</div>
</div>
마지막 직전에 클리어링 디브를 추가해야 할 수도 있습니다.</div>컨텐츠 디비가 넘쳐나는 경우.
<div style="clear:both; height:1px; line-height:0"> </div>
내 코드는 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>
본체 여백을 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; }
물론 들여쓰기에 따라 "상위" 및 "오른쪽" 값을 수정할 수 있습니다.출처
할 수 있습니까:
margin-right: 50px;
margin-left: 50px;
편집: 내 해결책이 틀렸습니다.Aric TenYeck가 100% 너비의 div를 사용한 다음 여백을 사용하여 다른 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>
이 일반적인 시나리오에서 유용하게 사용할 수 있는 두 가지 기술은 다음과 같습니다.각각의 단점이 있지만 둘 다 유용할 수 있습니다.
box-bound: border-box에는 항목 너비의 패딩 및 테두리 너비가 포함됩니다.예를 들어 20px 20px 패딩과 1px 테두리를 사용하는 div 너비를 100px로 설정하면 실제 너비는 142px가 되지만 테두리 상자를 사용하는 경우 패딩과 여백이 모두 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/ 그리고 여기 fidle http://jsfiddle.net/L3Rvw/ .
그리고 거기에는 절대적인 입장이 있습니다.
.padded{
position: absolute;
top: 50px;
right: 50px;
left: 50px;
bottom: 50px;
background-color: #aefebc;
}
물론 둘 다 완벽하지는 않습니다. 상자 크기 조정은 요소가 실제로 100% - 100px가 아닌 100% 너비이기 때문에 질문에 정확하게 맞지 않습니다(자녀 div는 어떻든).그리고 절대 위치 결정은 모든 상황에서 확실히 사용될 수는 없지만, 보통 부모의 높이가 설정되어 있는 한 괜찮습니다.
표준 모드를 사용하고 있습니까?이 해결책은 그것에 달려 있다고 생각합니다.
두 개의 열을 만들려는 경우 다음과 같은 작업을 수행할 수 있습니다.
<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;
}
두, 두개열원않제으수있다습니거할면하지를 제거할 수 .<div id="left">
<div style="width: 200px; border: 1px solid red;">
<br>
<div style="margin: 0px 50px 0px 50px; border: 1px solid blue;">
<br>
</div>
<br>
</div>
CSS에 논리와 변수를 포함할 수 있도록 CSS를 사전 처리하는 자바스크립트 파일인 LESS를 사용하는 것을 검토할 수 있습니다.그래서 예를 들어, 당신은 LESS로 적을 것입니다.width: 100% - 100px;원했던 달성하기 :) 신이원했당것을정달위해성기하히확 :)
CSS는 애니메이션이나 이벤트의 스타일 수정에 사용할 수 없습니다.
유일한 방법은 자바스크립트 함수를 사용하는 것입니다. 자바스크립트 함수는 주어진 요소의 너비를 반환한 다음, 여기서 100px를 빼고 새로운 너비 크기를 설정합니다.
jQuery를 사용한다고 가정하면 다음과 같은 작업을 수행할 수 있습니다.
oldWidth = $('#yourElem').width();
$('#yourElem').width(oldWidth-100);
네이티브 Javascript를 사용하면 다음과 같습니다.
oldWidth = document.getElementById('yourElem').clientWidth;
document.getElementById('yourElem').style.width = oldWidth-100+'px';
우리는 당신이 100%의 CSS 스타일 세트를 가지고 있다고 가정합니다;
효과:
margin-right:100px;
width:auto;
그럴수는 없어요.
그러나 여백을 사용하여 동일한 결과를 적용할 수 있습니다.
간단한 대답은 CSS에서는 이것을 하지 않는다는 것입니다.Internet Explorer는 CSS Expressions라는 것을 지원하지만 이는 표준이 아니며 FireFox와 같은 다른 브라우저에서 지원되지 않습니다.
자바스크립트로 이것을 하는 것이 더 나을 것입니다.
언급URL : https://stackoverflow.com/questions/899107/how-can-i-do-width-100-100px-in-css
'programing' 카테고리의 다른 글
| 구조물에 빈 포인터 캐스팅 (0) | 2023.08.16 |
|---|---|
| Swift에서 단추 텍스트 밑줄 표시 (0) | 2023.08.16 |
| 라라벨의 Mysql InnoDB 엔진 (0) | 2023.08.16 |
| Application_Start 내에서 현재 애플리케이션 물리적 경로 가져오기 (0) | 2023.08.16 |
| div 요소 내의 텍스트를 대체하려면 어떻게 해야 합니까? (0) | 2023.08.16 |