Div 너비 100% - 고정 픽셀 수
테이블이나 자바스크립트를 사용하지 않고 어떻게 다음 구조를 달성할 수 있습니까?흰색 테두리는 div의 가장자리를 나타내며 질문과 관련이 없습니다.
중간에 있는 영역의 크기는 다양하겠지만 정확한 픽셀 값을 가질 것이고 전체 구조는 그 값에 따라 확장되어야 합니다.이를 단순화하기 위해 "100% - npx" 너비를 상위-중간 및 하위-중간 div로 설정하는 방법이 필요합니다.
깨끗한 크로스 브라우저 솔루션을 사용해 주시면 감사하겠습니다만, 가능하지 않을 경우 CSS 해킹으로 충분합니다.
여기 보너스가 있습니다.또 다른 구조로 고민하다 결국 표나 자바스크립트를 사용하게 됩니다.약간 다르지만 새로운 문제가 발생합니다.저는 주로 jQuery 기반 윈도우 설정 시스템에서 사용해 왔지만, 레이아웃은 스크립트에서 제외하고 한 요소(가운데 요소)의 크기만 제어하고 싶습니다.
방금 우연히 발견한 새로운 방법: css:
.calculated-width {
width: -webkit-calc(100% - 100px);
width: -moz-calc(100% - 100px);
width: calc(100% - 100px);
}
출처: css 폭 100% 빼기 100px
중첩된 요소와 패딩을 사용하여 도구 모음의 왼쪽과 오른쪽 가장자리를 얻을 수 있습니다.의 div는 소는입니다.auto, 사용 한 widthswidth를 합니다.그런 다음 요소에 패딩을 추가할 수 있지만 요소는 여전히 사용 가능한 너비 이내로 유지됩니다.
다음은 이미지를 왼쪽 및 오른쪽 둥근 모서리로 배치하고 그 사이에 반복되는 중앙 이미지를 배치하는 데 사용할 수 있는 예입니다.
HTML:
<div class="Header">
<div>
<div>This is the dynamic center area</div>
</div>
</div>
CSS:
.Header {
background: url(left.gif) no-repeat;
padding-left: 30px;
}
.Header div {
background: url(right.gif) top right no-repeat;
padding-right: 30px;
}
.Header div div {
background: url(center.gif) repeat-x;
padding: 0;
height: 30px;
}
Guffa의 답변은 여러 상황에서 효과가 있지만, 경우에 따라 왼쪽 및/또는 오른쪽 패딩 조각이 중심 점의 상위 부분이 되는 것을 원하지 않을 수 있습니다.이러한 경우 중앙에 블록 형식 컨텍스트를 사용하고 패딩 div를 왼쪽과 오른쪽으로 플로팅할 수 있습니다.여기 코드가 있습니다.
HTML:
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
CSS:
.container {
width: 100px;
height: 20px;
}
.left, .right {
width: 20px;
height: 100%;
float: left;
background: black;
}
.right {
float: right;
}
.center {
overflow: auto;
height: 100%;
background: blue;
}
저는 이 요소 계층 구조가 중첩된 div와 비교했을 때 더 자연스럽고 페이지에 있는 것을 더 잘 나타낸다고 생각합니다.이로 인해 테두리, 패딩 및 여백을 모든 요소에 정상적으로 적용할 수 있습니다(즉, 이 '자연스러움'은 스타일을 넘어 다양한 영향을 미칩니다).
이것은 '기본적으로 너비의 100% 채우기' 속성을 공유하는 div 및 기타 요소에서만 작동합니다.입력, 테이블 및 기타 항목은 컨테이너 div로 포장하고 이 품질을 복원하기 위해 CSS를 조금 더 추가해야 합니다.만약 당신이 그 상황에 처한다면, 저에게 연락을 주시면 제가 css를 파내겠습니다.
jsfidle here: jsfiddle.net/RgdeQ
맛있게 드세요!
플렉스박스 레이아웃을 사용할 수 있습니다.각각 동적 너비 또는 높이를 가져야 하는 요소를 설정해야 합니다.
동적 너비:
HTML
<div class="container">
<div class="fixed-width">
1
</div>
<div class="flexible-width">
2
</div>
<div class="fixed-width">
3
</div>
</div>
CSS
.container {
display: flex;
}
.fixed-width {
width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}
출력:
.container {
display: flex;
width: 100%;
color: #fff;
font-family: Roboto;
}
.fixed-width {
background: #9BCB3C;
width: 200px; /* Fixed width */
text-align: center;
}
.flexible-width {
background: #88BEF5;
flex: 1; /* Stretch to occupy remaining width */
text-align: center;
}<div class="container">
<div class="fixed-width">
1
</div>
<div class="flexible-width">
2
</div>
<div class="fixed-width">
3
</div>
</div>동적 높이:
HTML
<div class="container">
<div class="fixed-height">
1
</div>
<div class="flexible-height">
2
</div>
<div class="fixed-height">
3
</div>
</div>
CSS
.container {
display: flex;
}
.fixed-height {
height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}
출력:
.container {
display: flex;
flex-direction: column;
height: 100vh;
color: #fff;
font-family: Roboto;
}
.fixed-height {
background: #9BCB3C;
height: 50px; /* Fixed height or flex-basis: 100px */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.flexible-height {
background: #88BEF5;
flex: 1; /* Stretch to occupy remaining width */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}<div class="container">
<div class="fixed-height">
1
</div>
<div class="flexible-height">
2
</div>
<div class="fixed-height">
3
</div>
</div>일반적인 방법은 중첩된 요소인 Guffa에 설명된 것과 같습니다.이것에 필요한 후크를 얻기 위해 추가 마크업을 추가해야 하는 것은 조금 슬프지만, 실제로 래퍼 디브는 여기에 있거나 아무도 해치지 않을 것입니다.
페이지 마크업을 제어할 수 없는 경우와 같이 추가 요소 없이 수행해야 하는 경우 박스 크기 조정을 사용할 수 있습니다. 박스 크기 조정은 상당히 적절하지만 완전하지는 않고 간단한 브라우저 지원만 제공합니다.스크립팅에 의존하는 것보다 더 재미있을 것 같습니다.
내가 바보같이 구는 것일지도 모르지만, 테이블이 여기서 분명한 해결책이 아닐까요?
<div class="parent">
<div class="fixed">
<div class="stretchToFit">
</div>
.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}
크롬에서 알아낸 또 다른 방법은 훨씬 더 간단하지만, 남자는 해킹입니다!
.fixed{
float: left
}
.stretchToFit{
display: table-cell;
width: 1%;
}
테이블 셀이 하는 것처럼 이것만으로도 줄의 나머지 부분을 수평으로 채워야 합니다.그러나 상위 항목의 100%를 초과하는 이상한 문제가 발생하여 너비를 백분율 값으로 설정하면 수정됩니다.
Flex-box를 사용하면 매우 쉽게 이를 달성할 수 있습니다.
머리글, 중간 컨테이너 및 바닥글과 같은 세 가지 요소가 있는 경우.그리고 Header와 Footer에 고정된 높이를 부여하고자 합니다.그러면 우리는 다음과 같이 쓸 수 있습니다.
React/RN(기본값은 플렉스로 'display', 열로 'flexDirection')의 경우 아래와 같이 웹 CSS에서 디스플레이로 'flex', 플렉스-direction: 'column'을 포함하는 본문 컨테이너를 지정해야 합니다.
container-containing-these-elements: {
display: flex,
flex-direction: column
}
header: {
height: 40,
},
middle-container: {
flex: 1, // this will take the rest of the space available.
},
footer: {
height: 100,
}
래핑 디비가 100%이고 픽셀 양에 패딩을 사용했다면 어떨까요? 패딩 #이 동적이어야 한다면 이벤트가 발생할 때 jQuery를 사용하여 패딩 양을 쉽게 수정할 수 있습니다.
저도 비슷한 문제가 있었습니다. 왼쪽에 하나의 이미지가 있고 오른쪽에 반복되는 이미지가 있는 배너를 화면 상단에 가로놓기를 원했습니다.저는 결국 이렇게 해결했습니다.
CSS:
.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}
.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}
열쇠는 올바른 태그였습니다.저는 기본적으로 왼쪽에서 오른쪽으로 131pxin에서 0pxin까지 반복하기를 원한다고 명시하고 있습니다.
일부 컨텍스트에서는 여백 설정을 활용하여 "100% 너비에서 N픽셀을 뺀 값"을 효과적으로 지정할 수 있습니다.이 질문에 대한 수락된 답변을 참조하십시오.
언급URL : https://stackoverflow.com/questions/651317/div-width-100-minus-fixed-amount-of-pixels
'programing' 카테고리의 다른 글
| Oracle Text 인덱싱 속도를 높이거나 인덱서가 낮은 로드 시간에만 작동하도록 합니다. (0) | 2023.08.02 |
|---|---|
| Python 코드를 PEP8 호환으로 변환하는 도구 (0) | 2023.08.02 |
| 한 번에 여러 프레임의 부트스트랩 회전각 (0) | 2023.08.02 |
| 도커: apt-utils 설치 문제 발생 (0) | 2023.07.28 |
| 문자로 분할하지 않고 목록에 문자열 삽입 (0) | 2023.07.28 |