div 너비 100 %-고정 픽셀 수

테이블이나 JavaScript를 사용하지 않고 다음과 같은 구조를 달성하려면 어떻게해야합니까? 흰색 테두리는 div의 가장자리를 나타내며 질문과 관련이 없습니다.

가운데 영역의 크기는 다양하지만 정확한 픽셀 값을 가지며 전체 구조는 해당 값에 따라 확장되어야합니다. 단순화하기 위해 "100 %-n px"너비를 상단 중간 및 하단 중간 div로 설정하는 방법이 필요합니다.

깨끗한 크로스 브라우저 솔루션에 감사하지만 가능하지 않은 경우 CSS 해킹이 가능합니다.

여기 보너스가 있습니다. 내가 고투하고 또 다른 구조는 테이블이나 JavaScript를 사용하여 끝납니다. 약간 다르지만 새로운 문제가 발생합니다. jQuery 기반 윈도우 시스템에서 주로 사용했지만 레이아웃을 스크립트에서 제외하고 한 요소 (중간 요소)의 크기 만 제어하고 싶습니다.

중첩 된 요소와 패딩을 사용하여 도구 모음에서 왼쪽 및 오른쪽 가장자리를 얻을 수 있습니다. div요소 의 기본 너비는입니다. auto즉, 사용 가능한 너비를 사용합니다. 그런 다음 요소에 패딩을 추가 할 수 있으며 여전히 사용 가능한 너비 내에 유지됩니다.

다음은 이미지를 왼쪽 및 오른쪽 둥근 모서리로 배치하고 이미지 사이에 반복되는 중앙 이미지로 사용할 수있는 예입니다.

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

방금 우연히 발견 한 새로운 방법 : csscalc() :

.calculated-width {
    width: -webkit-calc(100% - 100px);
    width:    -moz-calc(100% - 100px);
    width:         calc(100% - 100px);
}​

출처 : CSS 너비 100 %-100px

Guffa의 답변은 여러 상황에서 작동하지만 경우에 따라 왼쪽 및 / 또는 오른쪽 패딩이 가운데 div의 부모가되는 것을 원하지 않을 수 있습니다. 이 경우 가운데에 블록 서식 컨텍스트를 사용하고 패딩 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를 파낼 것입니다.

여기 jsfiddle : jsfiddle.net/RgdeQ

즐겨!

Flexbox 레이아웃 을 사용할 수 있습니다 . flex: 1동적 너비 또는 높이가 필요한 요소를 flex-direction: row and column각각 설정해야합니다 .

동적 폭 :

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가 있거나 다른 사람을 해치지 않을 것입니다.

추가 요소없이 (예 : 페이지 마크 업을 제어 할 수없는 경우) 수행해야하는 경우 box-sizing을 사용할 수 있습니다 . 스크립팅에 의존하는 것보다 더 재미있을 것입니다.

어쩌면 내가 바보 일지 모르지만 여기에 확실한 해결책이 아닌가?

<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, MiddleContainer 및 Footer와 같은 세 가지 요소가있는 경우 그리고 우리는 머리글과 바닥 글에 일정한 높이를주고 싶습니다. 다음과 같이 쓸 수 있습니다 :

React / RN의 경우 (기본값은 flex로 '디스플레이'이고 열로 'flexDirection'입니다) 웹 CSS에서는이를 포함하는 본문 컨테이너 또는 컨테이너를 표시로 지정해야합니다 : 'flex', 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,
    }

래핑 div가 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;
}

열쇠는 올바른 태그였습니다. 기본적으로 왼쪽에서 131px에서 오른쪽에서 0px로 반복하도록 지정하고 있습니다.

일부 상황에서는 여백 설정을 활용하여 "100 % 너비-N 픽셀"을 효과적으로 지정할 수 있습니다. 이 질문에 대한 답변을 참조하십시오 .