레이아웃을 깨지 않고 CSS Div 너비 비율 및 패딩

레이아웃을 깨지 않고 CSS Div 너비 비율 및 패딩

---

이것에 대한 간단한 수정이 있을지 모르지만 그것은 지금 오랫동안 나를 괴롭 혔습니다 ...

상황을 설명하겠습니다. 모든 것을 인라인으로 유지하는 페이지의 모든 콘텐츠 (머리글 및 바닥 글 포함)를 보유하는 ID 'container'를 가진 div가 있으며 간단한 'margin : 0 auto;'하나만 수행 할 수 있습니다. 배수 대신. 따라서 #container의 너비를 80 %로 설정했다고 가정 해 보겠습니다. 이제 동일한 너비 (80 %)의 다른 div를 내부에 넣고 10px의 패딩이있는 'header'ID를 제공하면 페이지가 패딩 양을 추가하기 때문에 레이아웃이 "끊어 질"것입니다. 넓이. 그렇다면 #header div에 대해 낮은 비율과 같은 방법을 사용하지 않고 인바운드 상태를 유지하려면 어떻게해야합니까? 기본적으로 유동적으로 만들고 싶습니다.

다음은 내가 말하는 내용에 대한 아이디어를 제공하는 몇 가지 예제 코드입니다.

CSS

#container {
    position:relative;
    width:80%;
    height:auto;
}
#header {
    position:relative;
    width:80%;
    height:50px;
    padding:10px;
}

HTML

<div id="container">
    <div id="header">Header contents</div>
</div>

누구든지 나를 영원히 괴롭히는이 문제로 나를 도울 수 있습니까?

---

당신이 원하는 경우 #header패딩 10px와 컨테이너와 같은 폭으로, 당신은 그 폭 선언을 남길 수 있습니다. 이는 div가 기본적으로 블록 수준 요소이기 때문에 암시 적으로 전체 부모의 너비를 차지하게합니다.

그런 다음 너비를 정의하지 않았으므로 10px의 패딩이 요소의 너비를 추가하는 대신 요소 내부에 올바르게 적용됩니다.

#container {
    position: relative;
    width: 80%;
}

#header {
    position: relative;
    height: 50px;
    padding: 10px;
}

여기에서 실제 동작을 볼 수 있습니다 .

백분율 너비와 픽셀 패딩 / 여백을 사용할 때 핵심 은 동일한 요소에 정의하지 않는 것입니다 (크기를 정확하게 제어하려는 경우). 백분율 너비를 부모에 적용한 다음 픽셀 패딩 / 여백을 display: block너비가 설정되지 않은 자식에 적용합니다.

---

최신 정보

이를 처리하는 또 다른 옵션은 상자 크기 조정 CSS 규칙 을 사용하는 것 입니다 .

#container { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    /* Since this element now uses border-box sizing, the 10px of horizontal
       padding will be drawn inside the 80% width */
    width: 80%;
    padding: 0 10px;
}

다음은 상자 크기 조정이 작동 하는 방식에 대한 게시물 입니다.

---

CSS calc () 함수를 사용하여 컨테이너 너비의 백분율에서 패딩 너비를 뺄 수도 있습니다 .

예 :

width: calc((100%) - (32px))

Just be sure to make the subtracted width equal to the total padding, not just one half. If you pad both sides of the inner div with 16px, then you should subtract 32px from the final width, assuming that the example below is what you want to achieve.

.outer {
  width: 200px;
  height: 120px;
  background-color: black;
}

.inner {
  height: 40px;
  top: 30px;
  position: relative;
  padding: 16px;
  background-color: teal;
}

#inner-1 {
  width: 100%;
}

#inner-2 {
  width: calc((100%) - (32px));
}

<div class="outer" id="outer-1">
  <div class="inner" id="inner-1"> width of 100% </div>
</div>

<br>
<br>

<div class="outer" id="outer-2">
  <div class="inner" id="inner-2"> width of 100% - 16px </div>
</div>

---

Try removing the position from header and add overflow to container:

#container {
    position:relative;
    width:80%;
    height:auto;
    overflow:auto;
}
#header {
    width:80%;
    height:50px;
    padding:10px;
}

ReferenceURL : https://stackoverflow.com/questions/3538875/css-div-width-percentage-and-padding-without-breaking-layout