div가 본문 높이의 100 %를 차지하고 고정 높이 머리글 및 바닥 글을 뺀 값을 가져옵니다.

Programing

div가 본문 높이의 100 %를 차지하고 고정 높이 머리글 및 바닥 글을 뺀 값을 가져옵니다.

lottogame 2020. 10. 27. 07:47

div가 본문 높이의 100 %를 차지하고 고정 높이 머리글 및 바닥 글을 뺀 값을 가져옵니다.

이 질문에 이미 답변이 있습니다.

CSS 단일 열 레이아웃 중앙 고정 너비 100 % 높이 w 머리글 및 바닥 글 5 답변

내 연구에서 이것은 절대적으로 고전적인 CSS 질문으로 보이지만 확실한 답을 찾을 수 없으므로 StackOverflow입니다.

고정 높이 머리글 및 바닥 글이 차지하는 높이를 빼고 본문 높이의 100 %를 차지하도록 콘텐츠 div를 설정하려면 어떻게해야합니까?

<body>
  <header>title etc</header>
  <div id="content">body content</div>
  <footer>copyright etc</footer>
</body>

//CSS
html, body { 
  height: 100%;
}
header { 
  height: 50px;
}
footer { 
  height: 50px;
}
#content { 
  height: 100% of the body height, minus header & footer
}

순수한 CSS를 사용하고 브라우저에서 방탄이되는 대답을 원합니다.

당신은 (단지 변경하지 경우 모더 나이저 스크립트가있는 경우이 버전은 IE8을 모든 최신 브라우저에서 작동 할 것이다 header과 footer에 div들) :

깡깡이

html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

#wrapper {
  padding: 50px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#content {
  min-height: 100%;
  background-color: green;
}

header {
  margin-top: -50px;
  height: 50px;
  background-color: red;
}

footer {
  margin-bottom: -50px;
  height: 50px;
  background-color: red;
}

p {
  margin: 0;
  padding: 0 0 1em 0;
}

<div id="wrapper">
  <header>dfs</header>
  <div id="content">
  </div>
  <footer>sdf</footer>
</div>

콘텐츠 스크롤 : Fiddle

크로스 브라우저 솔루션이 아닌 calc(expression)한이를 달성하기 위해을 (를) 활용할 수 있습니다 .

html, body { 
 height: 100%;
}
header {        
 height: 50px;
 background-color: tomato
}

#content { 
 height: -moz-calc(100% - 100px); /* Firefox */
 height: -webkit-calc(100% - 100px); /* Chrome, Safari */
 height: calc(100% - 100px); /* IE9+ and future browsers */
 background-color: yellow 
}
footer { 
 height: 50px;
 background-color: grey;
}

JsFiddle의 예

당신에 대해 더 알고 싶다면 이 사이트 calc(expression)를 방문하는 것이 좋습니다.

이 질문에 대한 답을 찾으려고 할 때 여전히 최고의 Google 결과로 나타났습니다. 내 프로젝트에서 이전 브라우저를 지원할 필요가 없었고 flex-box 에서 더 좋고 간단한 솔루션을 찾은 것 같습니다 . 아래 CSS 스 니펫 만 있으면됩니다.

또한 화면 높이가 너무 작은 경우 메인 콘텐츠를 스크롤 가능하게 만드는 방법도 보여주었습니다.

html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
header {
  min-height: 60px;
}
main {
  flex-grow: 1;
  overflow: auto;
}
footer {
  min-height: 30px;
}

<body style="margin: 0px; font-family: Helvetica; font-size: 18px;">
  <header style="background-color: lightsteelblue; padding: 2px;">Hello</header>
  <main style="overflow: auto; background-color: lightgrey; padding: 2px;">
    <article style="height: 400px;">
      Goodbye
    </article>
  </main>
  <footer style="background-color: lightsteelblue; padding: 2px;">I don't know why you say, "Goodbye"; I say, "Hello."</footer>
</body>

이 작업을 수행하는 새롭고 현대적인 방법은 뷰포트의 수직 높이에서 머리글과 바닥 글의 높이를 모두 빼서 수직 높이를 계산하는 것입니다.

//CSS
header { 
  height: 50px;
}
footer { 
  height: 50px;
}
#content { 
  height: calc(100vh - 50px - 50px);
}

css 속성 Box Sizing을 사용할 수 있습니다 .

#content { 
    height: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    padding-top: 50px;
    margin-top: -50px;
    padding-bottom: 50px;
    margin-bottom: -50px;
}

JsFiddle을 참조하십시오 .

머리글과 바닥 글을 계산하는 것은 나쁘다 :( 디자인은 단순하고 설명이 필요하다. 평이하다. 계산은 그저 ... 쉽지 않다. 인간에게는 쉽지 않고 기계에서는 약간 어렵다.

당신이 찾고있는 것은 성배 디자인 의 일부입니다 .

다음 은 플렉스 디스플레이를 사용한 구현입니다. 바닥 글 및 머리글 외에 사이드 바가 포함됩니다. 즐겨:

<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset=utf-8 />
    <title>Holy Grail</title>
    <!-- Reset browser defaults -->
    <link rel="stylesheet" href="reset.css">
  </head>
  <body style="display: flex; height: 100%; flex-direction: column">
    <div>HEADER<br/>------------
    </div>
    <!-- No need for 'flex-direction: row' because it's the default value -->
    <div style="display: flex; flex: 1">
      <div>NAV|</div>
      <div style="flex: 1; overflow: auto">
        CONTENT - START<br/>
        <script>
        for (var i=0 ; i<1000 ; ++i) {
          document.write(" Very long content!");
        }
        </script>
        <br/>CONTENT - END
      </div>
      <div>|SIDE</div>
    </div>
    <div>------------<br/>FOOTER</div>
  </body>
</html>

이 질문에 대한 답변은 꽤 잘되었지만 자바 스크립트 솔루션을 자유롭게 추가 할 수 있습니다. id를 '확장'하려는 요소를 제공하면 footerspacerdiv이 자바 스크립트 스 니펫은 페이지가 브라우저 창의 전체 높이를 차지할 때까지 해당 div를 확장합니다.

페이지가 브라우저 창의 전체 높이보다 작을 때 document.body.scrollHeight가 document.body.clientHeight와 같다는 관찰을 기반으로 작동합니다. while 루프 footerspacerdiv는 document.body.scrollHeight가 document.body.clientHeight보다 클 때까지 높이를 증가시킵니다 . 이 시점 footerspacerdiv에서은 실제로 1 픽셀이 너무 높고 브라우저에 세로 스크롤 막대가 표시됩니다. 따라서 스크립트의 마지막 줄은 footerspacerdiv페이지 높이가 브라우저 창의 높이와 정확히 일치하도록 높이를 1 픽셀 줄입니다 .

footerspacerdiv페이지의 '바닥 글'바로 위에 배치 하면이 스크립트를 사용하여 페이지 하단으로 '바닥 글을 아래로 밀어', 짧은 페이지에서 바닥 글이 브라우저 창의 하단과 수평이되도록 할 수 있습니다.

<script>    
//expand footerspacer div so that footer goes to bottom of page on short pages        
  var objSpacerDiv=document.getElementById('footerspacer');          
  var bresize=0;   

  while(document.body.scrollHeight<=document.body.clientHeight) {
    objSpacerDiv.style.height=(objSpacerDiv.clientHeight+1)+"px";
    bresize=1;
  }             
  if(bresize) { objSpacerDiv.style.height=(objSpacerDiv.clientHeight-1)+"px"; }               
 </script>

다음은 음수 여백 또는 calc. 아래 스 니펫을 실행하여 최종 결과를 확인하세요.

설명

머리글과 바닥 글에 고정 높이를 30px지정하고 각각 상단과 하단에 절대적으로 배치합니다. : 아래에 떨어지는에서 콘텐츠를 방지하기 위해, 우리는 두 개의 클래스 사용 below-header및 above-footer패드에 위에서 아래 사업부를 30px.

모든 콘텐츠는 position: relativediv 로 래핑되어 머리글과 바닥 글이 창이 아닌 콘텐츠 의 맨 위 / 아래에 있습니다.

우리는 클래스를 사용 fit-to-parent하고 min-fit-to-parent페이지에서 내용 채우기를 만들 수 있습니다. 이렇게하면 최소한 창만큼 낮지 만 내용이 창보다 길면 숨겨지는 끈적한 바닥 글이 생깁니다.

머리글과 바닥 글 내에서 display: table및 display: table-cell스타일을 사용 하여 페이지의 축소 포장 품질을 방해하지 않고 머리글과 바닥 글에 세로 여백을 제공합니다. (실제 패딩을 제공하면 페이지의 전체 높이가보다 커질 수 있으며 100%, 이로 인해 실제로 필요하지 않을 때 스크롤 막대가 표시됩니다.)

.fit-parent {
    height: 100%;
    margin: 0;
    padding: 0;
}
.min-fit-parent {
    min-height: 100%;
    margin: 0;
    padding: 0;
}
.below-header {
    padding-top: 30px;
}
.above-footer {
    padding-bottom: 30px;
}
.header {
    position: absolute;
    top: 0;
    height: 30px;
    width: 100%;
}
.footer {
    position: absolute;
    bottom: 0;
    height: 30px;
    width: 100%;
}

/* helper classes */

.padding-lr-small {
    padding: 0 5px;
}
.relative {
    position: relative;
}
.auto-scroll {
  overflow: auto;
}
/* these two classes work together to create vertical centering */
.valign-outer {
    display: table;
}
.valign-inner {
    display: table-cell;
    vertical-align: middle;
}

<html class='fit-parent'>
  <body class='fit-parent'>
<div class='min-fit-parent auto-scroll relative' style='background-color: lightblue'>
<div class='header valign-outer' style='background-color: black; color: white;'>
        <div class='valign-inner padding-lr-small'>
            My webpage
        </div>
    </div>
    <div class='fit-parent above-footer below-header'>
        <div class='fit-parent' id='main-inner'>
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
        </div>
    </div>
    <div class='footer valign-outer' style='background-color: white'>
        <div class='valign-inner padding-lr-small'>
            &copy; 2005 Old Web Design
        </div>
    </div>
</div>
    </body>
  </html>

참고 URL : https://stackoverflow.com/questions/15021573/get-div-to-take-up-100-body-height-minus-fixed-height-header-and-footer

'Programing' 카테고리의 다른 글

입력을 읽은 후 cin.clear () 및 cin.ignore ()를 호출하는 이유는 무엇입니까? (0)	2020.10.27
Where does the iOS Simulator save screen shots? (0)	2020.10.27
Chrome 디버거 확장이있는 Visual Studio Code의 "확인되지 않은 중단 점" (0)	2020.10.27
JVM 메모리를 어떻게 늘릴 수 있습니까? (0)	2020.10.27
Python에서 가장 좋은 것은 urllib2, PycURL 또는 mechanize? (0)	2020.10.27

현재글div가 본문 높이의 100 %를 차지하고 고정 높이 머리글 및 바닥 글을 뺀 값을 가져옵니다.

복권의 역사, 로또 정보와 IT 기술 등을 다루는 블로그입니다.

무비순위, 놀거리, 축제, 극장순위, 자바, JQuery, java, 여행, Javascript, 관광, 연극, 볼거리, 행사, Spring3, 가족나들이, 뮤지컬, 공연, c++, c#, spring,

Today :
Yesterday :

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

lottogame

div가 본문 높이의 100 %를 차지하고 고정 높이 머리글 및 바닥 글을 뺀 값을 가져옵니다.

div가 본문 높이의 100 %를 차지하고 고정 높이 머리글 및 바닥 글을 뺀 값을 가져옵니다.

'Programing' 카테고리의 다른 글

'Programing'의 다른글

티스토리툴바

div가 본문 높이의 100 %를 차지하고 고정 높이 머리글 및 바닥 글을 뺀 값을 가져옵니다.

div가 본문 높이의 100 %를 차지하고 고정 높이 머리글 및 바닥 글을 뺀 값을 가져옵니다.

'Programing' 카테고리의 다른 글

'Programing'의 다른글

관련글

티스토리툴바