CSS div 높이 비율에 문제가 있음

다른 사람들이 같은 문제를 겪고 있음에도 불구하고 나는 여전히 작동하지 못해서 정말 도움이 필요합니다.CSS div 높이 비율에 문제가 있음

저는 현재 html 템플릿으로 방명록을 작성하고 있지만, 백분율 일 경우 내 div에서 설정 한 최소 높이 속성을 사용하지 않는다는 문제점이 있습니다. 모든 해상도와 창 크기에 대해 전체 페이지를 반응 적으로 만들려고했기 때문에 고정 된 높이를 피하려고합니다. 내 CSS 파일이 매우 큰이므로

이

<!DOCTYPE html> 
<html> 
    <head> 
    <link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet"> 

    <title><?=$GuestbookTitle ?></title> 
    </head> 

    <body> 
    <div id="wrap_main"> 

     <div class="menubar"> 
     <ul class="menubar_list"> 

      <a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist, 
      other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink --> 
      <li class="menubar_item" id="int"><span id="menubar_text">Home</span></li> 
      </a> 
      <?=$MenuPagesString ?> 
     </ul> 
     <?=$MenuPagesStringExt ?> 
     </div> <!-- menubar --> 

     <div id="wrap_header"> 
     <div id="logoplacer"> 
      <a href="http://wikitest.gutknecht-informatik.com"> 
      <img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/> 
      </a> 
     </div> <!-- logoplacer --> 

     <div id="profileplacer"> 
      <?= $ProfilePlacer ?> 
     </div> <!-- profileplacer --> 
     </div> <!-- wrap_header --> 

     <div id="wrap_content"> 
     <div id="content"> 
      <div id="content_title"> 
      <h2><?=$CurrContentTitle ?></h2> 
      </div> <!-- content_title --> 
      <div id="content_text"> 
      <?=$CurrContentText ?> 
      </div> <!-- content_text --> 
     </div> <!-- content --> 
     </div> <!-- wrap_content --> 
     <div id="wrap_footer"> 
     © by Kathara 
     </div> <!-- wrap_footer --> 
    </div> <!-- wrap_main --> 
    </body> 
</html>

내가 중요한 부분 만 당신에게 줄 것이다 :

내 HTML 마크 업입니다

*{ 
    font-family:sans-serif; 
    font-size:12pt; 
    color:white; /*003300*/ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

html { 
    position: absolute; 
    background-image: url('/../data/images/03.jpg'); 
    background-attachment: fixed; 
    min-height:100%; 
    width:100%; 
} 

body { 
    height:100%; 
    width:calc(70% - 2px); 
    margin-left: calc((30% - 2px)/2); 
    position: absolute; 
} 

#wrap_main { 
    background: rgba(255,255,255,0.7); 
    width: 100%; 
    min-height: 100%; 
} 

#wrap_content { 
    display: inline-block; 
    position: relative; 
    left: 190px; 
    margin-top: calc(1% + 4px); 
    width: calc(100% - 200px); 
    background: #1e1e1e; 
    min-height: 100%; 
    margin-bottom: 10px; 
} 

#content{ 
    position: relative; 
    color: white; 
    margin: 5px auto 10px; 
    height: 100%; 
    min-height: 550px; 
    width: 95%; 
}

더 많은 부품이 필요, 제발 코멘트에 써라. 코드가 좀 지저분하지만 아직 정리하지 못해서 죄송합니다 ...

내 문제는 #wrap_content 및 #content의 가로 세로 비율을 가질 수 없기 때문입니다. 이유는 알지만 작동하지 않습니다.

나는 실수를 저질렀는데 어쨌든 보지 못했습니까? #wrap_main의 크기가 항상 콘텐츠와 동일하도록 변경하려면 무엇이 필요합니까? 콘텐츠의 높이 (텍스트 및 이미지 포함)에 맞게 #content (또는 #wrap_content)를 얻으려면 어떻게해야합니까? html 마크 업에서 무엇인가를 변경해야합니까?

내가 더 잘할 수있는 다른 것이라면 조언 해주세요. 나는 여전히 PHP, html, css에 익숙하지만 모든 도움을 환영 할 것입니다. 미리 감사드립니다.

현재 페이지 모양을 확인하려면 here을 클릭하십시오. 아직 모든 것이 제대로 작동하는 것은 아니지만 스스로 등록하고 싶다면 테스트 해 볼 것을 적극 권합니다.

는 편집 :

나는 조금 HTML을 마크 업 변경했다 다시 CSS를 아주 약간의 윌리엄의 아이디어 덕분에, 덕분에 적응 :

<!DOCTYPE html> 
<html> 
    <head> 
    <link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet"> 

    <title><?=$GuestbookTitle ?></title> 
    </head> 

    <body> 
    <div id="whity_layer"> 
     <div id="wrap_main"> 

     <div class="menubar"> 
      <ul class="menubar_list"> 

      <a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist, 
       other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink --> 
       <li class="menubar_item" id="int"><span id="menubar_text">Home</span></li> 
      </a> 
      <?=$MenuPagesString ?> 
      </ul> 
      <?=$MenuPagesStringExt ?> 
     </div> <!-- menubar --> 

     <div id="wrap_header"> 
      <div id="logoplacer"> 
      <a href="http://wikitest.gutknecht-informatik.com"> 
       <img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/> 
      </a> 
      </div> <!-- logoplacer --> 

      <div id="profileplacer"> 
      <?= $ProfilePlacer ?> 
      </div> <!-- profileplacer --> 
     </div> <!-- wrap_header --> 

     <div id="wrap_content"> 
      <div id="content"> 
      <div id="content_title"> 
       <h2><?=$CurrContentTitle ?></h2> 
      </div> <!-- content_title --> 
      <div id="content_text"> 
       <?=$CurrContentText ?> 
      </div> <!-- content_text --> 
      </div> <!-- content --> 
     </div> <!-- wrap_content --> 
     <div id="wrap_footer"> 
      © by Kathara 
     </div> <!-- wrap_footer --> 
     </div> <!-- wrap_main --> 
    </div> <!-- whity_layer --> 
    </body> 
</html>

그리고 CSS를 :

*{ 
    font-family:sans-serif; 
    font-size:12pt; 
    color:white; /*003300*/ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

html { 
    position: absolute; 
    background-image: url('/../data/images/03.jpg'); 
    background-attachment: fixed; 
    min-height:100%; 
    width:100%; 
    z-index: -1; 
} 

body { 
    height: 100%; 
    max-height:auto; 
    width:100%; 
    position: relative; 
    z-index: 0; 
} 

#whity_layer { 
    background: rgba(255,255,255,0.7); 
    margin-left: calc((30% - 2px)/2); 
    width: calc(70% - 2px); 
    height: 100%; 
    position: fixed; 
    overflow: auto; 
    z-index: 1; 
} 

#wrap_main { 
    width: 100%; 
    min-height: 100%; 
} 

#wrap_content { 
    display: inline-block; 
    position: relative; 
    left: 190px; 
    top: 45px; 
    width: calc(100% - 200px); 
    background: #1e1e1e; 
    min-height: 100%; 
    margin-bottom: 10px; 
} 

#content{ 
    position: relative; 
    color: white; 
    margin: 5px auto 10px; 
    height: 100%; 
    min-height: 100%; 
    width: 95%; 
}

아직 콘텐츠 래퍼의 최소 높이를 결정해야하지만, 알아낼 것입니다.

편집 2

나는 내가 whity_layer에 스크롤이 순간에 그것을 추가해야 할 경우 내용 오버 플로우 : 나는 당분간 제거 할 수없는 (오버 플로우 자동). .. 발견 된 모든 자작 시도는 내 마크 업과 작동하지 않을 것입니다 ... 요즘 CSS가있는 스크롤 막대를 제 의견으로 숨기 쉬워야합니다 ...

출처

2016-09-09 Kathara

상위 요소에'position : relative'를 사용할 수 있습니다. 하위 요소에'position : absolute' 및'top : 0','bottom : 0'이 있습니다. – MartijnICU

죄송합니다. 귀하의 질문을 충분히 읽지 않았으며 부모 요소에서 사용 가능한 공간을 모두 사용하고 싶다고 생각했습니다. 주로 '최소 높이'의 백분율 값이 상위 컨테이너를 기준으로 높이를 지정하기 때문입니다. – MartijnICU

네, 저도 압니다.하지만 한 divs 높이를 70 %로 설정하고 100 %로 설정하면 효과가 없습니다. #wrap_main은 매우 짧은 div를 표시하며 상위 높이가 100 %로 설정된 이유를 생각할 수 없습니다. 최소 높이 속성은 고정 된 높이를 사용할 때만 작동하는 것 같습니다. – Kathara

무엇 #wrap_main는 항상 내용입니다만큼 큰되도록 내가 변경해야합니까?

당신은 내용의로 항상 큰 #wrap_main을 가지고 height 또는 min-height를 사용할 필요가 없습니다.

콘텐츠 (텍스트 및 이미지 포함)의 높이에 맞게 #content (또는 #wrap_content)를 얻으려면 어떻게해야합니까?

그냥

내가 HTML 마크 업에 뭔가를 변경해야합니까 CSS를 밖으로 height 및 min-height을?

실제로 CSS를 변경하지 마세요.

콘텐츠에 따라 높이를 조정하는 CSS의 height 및 min-height이없는 jsfiddle입니다.

편집 : 당신은 단지 whity 배경이 필요하면

, 당신은이를 고려해 볼 수 있습니다 :

다른 모든 divs 전에 새 div#whity_layer을 만들고이를 절대합니다

<body> 
    <div id="whity_layer"></div> 
    <div id="wrap-main"></div> 
    .........

CSS를 다음으로 변경하십시오.

body { 
    position: relative; 
} 

#whity_layer { 
    background: rgba(255,255,255,0.7); 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 

#wrap_main { 
    // Remove background 
}

출처

2016-09-09 10:12:43 William

방금 시도했지만 당신이 지금 페이지를 체크 아웃하면 whity 배경이 페이지의 끝으로 가지 않는다는 것을 볼 수 있습니다 .... 이것은 높이와 위치 속성을 변경할 때 나타나는 또 다른 문제입니다. 내 #wrap_content가 항상 #wrap_main 높이의 70 %가되도록 필요합니까? – Kathara

좋아요, 여기에서 확인하고 있습니다. 레이어와 같이 항상 페이지 뒤쪽에 whity 배경이 있어야합니까? – William

'# content '의'min-height '를'min-height : 100vh;'로 변경하면 어떨까요? 그것은 당신의 문제를 해결합니까? – William

-1

전 CSS 대안을 찾기 위해 노력했습니다. div는 항상 내용만큼 크지 만, 내가 끔찍한/힘들었다는 것을 기억하는 한, 나는 정말로 당신에게 대답 할 수 없다는 것을 유감스럽게 생각합니다.하지만 다른 방법으로 시도하고 싶다면 AnglesJs, 예를 들어, ng 스타일을 사용하면 div에 "동적"크기를 부여 할 수 있습니다. 나머지는 모두 알고리즘에 관한 것입니다. :)

행운 메이트 : 3

출처

2016-09-09 08:24:24 xoxel

각도를 사용하려고 생각했습니다. 하지만 모든 사용자가 자바를 활성화시키지 않을 수도 있다는 것을 알고 있기 때문에 작동하지 않을 것이고 모든 것이 끔찍할 것입니다. 이 작업을 수행 할 수있는 방법이 있어야합니다 ... 전체 CSS 파일이나 마크 업을 변경해야한다면 할 수 있지만 그렇게하는 데 도움이 필요합니다 .../ – Kathara

CSS div 높이 비율에 문제가 있음

답변

관련 문제