CSS에서 width = 100 %-100px를 어떻게 할 수 있습니까?
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"> </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; }
물론 들여 쓰기에 따라 "상단"및 "적절한"값을 수정할 수 있습니다. 출처
모든 공간을 확인했을 때만 작동했습니다. 그래서, 이런 식으로 작동하지 않았다 : width: calc(100%- 20px)또는 calc(100%-20px)완벽하게 함께 일했다 width: calc(100% - 20px).
당신은 할 수 있습니다 :
margin-right: 50px;
margin-left: 50px;
편집 : 내 솔루션이 잘못되었습니다. Aric TenEyck이 게시 한 솔루션은 너비가 100 % 인 div를 사용한 다음 여백을 사용하여 다른 div를 중첩하는 것이 더 정확 해 보입니다.
Padding on the outer div will get the desired effect.
<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>
There are 2 techniques which can come in handy for this common scenario. Each have their drawbacks but can both be useful at times.
box-sizing: border-box includes padding and border width in the width of an item. For example, if you set the width of a div with 20px 20px padding and 1px border to 100px, the actual width would be 142px but with border-box, both padding and margin are inside the 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;
}
Here's an excellent article on it: http://css-tricks.com/box-sizing/ and here's a fiddle http://jsfiddle.net/L3Rvw/
And then there's position: absolute
.padded{
position: absolute;
top: 50px;
right: 50px;
left: 50px;
bottom: 50px;
background-color: #aefebc;
}
Neither are perfect of course, box-sizing doesn't exactly fit the question as the element is actually 100% width, rather than 100% - 100px (however a child div would be). And absolute positioning definitely can't be used in every situation, but is usually okay as long as the parent height is set.
CSS can not be used to animation, or any style modification on events.
The only way is to use a javascript function, which will return the width of a given element, then, subtract 100px to it, and set the new width size.
Assuming you are using jQuery, you could do something like that:
oldWidth = $('#yourElem').width();
$('#yourElem').width(oldWidth-100);
And with native javascript:
oldWidth = document.getElementById('yourElem').clientWidth;
document.getElementById('yourElem').style.width = oldWidth-100+'px';
We assume that you have a css style set with 100%;
Are you using standards mode? This solution depends on it I think.
If you're trying to make 2 columns you could do something like this:
<div id="outer">
<div id="left">
sidebar
</div>
<div id="main">
lorem ispsum etc...
</div>
</div>
Then use CSS to style it:
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;
}
If you don't want 2 columns you can probably remove <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>
You can look into using LESS, which is a JavaScript file that pre-processes your CSS so you can include logic and variables into your CSS. So for your example, in LESS you would write width: 100% - 100px; to achieve exactly what you wanted :)
You can't.
You can, however, use margins to effect the same result.
This works:
margin-right:100px;
width:auto;
The short answer is you DON'T do this in CSS. Internet Explorer has support for something called CSS Expressions, but this isn't standard and is definitely not supported by other browsers like FireFox for instance.
You'd be better off doing this in JavaScript.
참고URL : https://stackoverflow.com/questions/899107/how-can-i-do-width-100-100px-in-css
'programing tip' 카테고리의 다른 글
| 안드로이드 연락처 목록을 호출하는 방법? (0) | 2020.06.29 |
|---|---|
| Gradle은 하나의 모듈 만 빌드 (0) | 2020.06.29 |
| 기본 클래스 org.gradle.wrapper.GradleWrapperMain을 찾거나로드 할 수 없습니다. (0) | 2020.06.29 |
| Keytool 애플리케이션은 어디에 있습니까? (0) | 2020.06.29 |
| 기능적 프로그래밍 언어와 명령형 프로그래밍 언어의 차이점은 무엇입니까? (0) | 2020.06.29 |