내 div가 사이트로 올라갑니다.

내 마지막 div (실제로 마지막으로 더 많은 div가 있어야 함)가 페이지로 이동합니다 (높이를 변경하려고 시도 함). 그리고 내 두 번째 이유가 절대적으로 좋은 이유는 모르겠습니다. 여기 링크 : https://vitas.sk/1/내 div가 사이트로 올라갑니다.

HTML은

.indexthird { 
 
      width: 100%; 
 
      height: 40%; 
 
      background-image: url("http://vitas.sk/1/images/indexthird.jpg"); 
 
      background-size: cover; 
 
      background-repeat: no-repeat; 
 
      min-height: 300px; 
 
      
 
     } 
 
     .indexthirdbbg{ 
 
     background-color: rgba(0,0,0,0.7); 
 
      width: 100%; 
 
      height: 100%; 
 
      text-align: center; 
 
      padding-top: 7%; 
 
     } 
 
     
 
     .itquotes{ 
 
      
 
      font-size: 1.5vw; 
 
     } 
 
     .itautor { 
 
      font-size: 1vw; 
 
      margin-top: 1%; 
 
      text-align: center 
 
     }

<div class="indexthird"><div class="indexthirdbbg"> 
 
     <i class="itquotes">"„Kým budu ľudia masakrovať zvieratá, budú zabíjať aj jeden druhého.<br> Ten kto seje vraždu a bolesť, nemôže vypestovať radosť a lásku.“"</i> 
 
     <p class="itautor">Pythagoras</p> 
 
    </div> 
 
    </div>

출처

2017-12-31 Juraj Jakubov

http://idownvotedbecau.se/nocode/ – Amy

을 시도하지만 나에게 내가 코드를 게시 할 예정 순간을 제공합니다. –

코드가 * 필요합니다. 사이트의 코드가 변경되면 질문이 장기적인 가치를 잃게됩니다. – Amy

내가 링크를 게시 왜

.indexthird { 
 
      width: 100%; 
 
      
 
      background-image: url("http://vitas.sk/1/images/indexthird.jpg"); 
 
      background-size: cover; 
 
      background-repeat: no-repeat; 
 
      
 
     } 
 
     .indexthirdbbg{ 
 
     background-color: rgba(0,0,0,0.7); 
 
      width: 100%; 
 
      height: 40%; 
 
      min-height: 300px; 
 
      text-align: center; 
 
      padding-top: 7%; 
 
     } 
 
     
 
     .itquotes{ 
 
      
 
      font-size: 1.5vw; 
 
     } 
 
     .itautor { 
 
      font-size: 1vw; 
 
      margin-top: 1%; 
 
      text-align: center 
 
     }

<div class="indexthird"><div class="indexthirdbbg"> 
 
     <i class="itquotes">"„Kým budu ľudia masakrovať zvieratá, budú zabíjať aj jeden druhého.<br> Ten kto seje vraždu a bolesť, nemôže vypestovať radosť a lásku.“"</i> 
 
     <p class="itautor">Pythagoras</p> 
 
    </div> 
 
    </div>

출처

2017-12-31 12:05:11

-1

는 부트 스트랩을 사용하고 있기 때문에,의 마지막

출처

2017-12-31 10:08:55 sawyerrken

나는 세 번째 div (색인 페이지의 주요 부분)를 가지고 있는데, 두 번째 div에 class clearfix (https://v4-alpha.getbootstrap.com/utilities/clearfix/)를 추가했지만 아무것도하지 않았다. –

때문에 두 번째 DIV (전에 "clearfix"사업부를 추가합니다. indexsecond)의 높이는 80 %로 브라우저의 미망인의 크기에 따라 (분명히) 바뀝니다. 높이를 px (+ overflow : hidden)로 변경하면 동작이 사라집니다.

또한 % .indexthird의 높이가 %이고 .indexthirdbbg의 %가 패딩 상단이므로 브라우저 창의 크기를 조정할 때 문제가 될 수 있습니다.

window.onresize 이벤트를 정의하고 일종의 내부 논리를 사용하여 div를 프로그래밍 방식으로 조정할 수 있습니다.

출처

2017-12-31 10:19:00 mikiqex

이해가 안됩니다. 내 첫 번째와 두 번째 div는 훌륭하게 작동합니다. 나는 세 가지 모두에 최소 높이가 있습니다. 나는 그것들을 조금 반응하게 만들고 px를 사용할 때 더 많은 페이지를 만들 필요가 있기 때문에 모두에 %로 높이를 갖고 싶습니다. 사실 나는 can not 정의 window.onresize HTML과 CSS의 몇 가지 기본적인 지식을 가지고. jannuary의 끝에서 javascript로 시작할 계획입니다. %로 높이를 설정하거나 px로 변경해야하는 방법이 있습니까? –

@JurajJakubov는 두 번째 div에서 'height : 80 %'를 제거하고 모든 것이 OK가됩니다 –

좋아요. 나는 그것을 할 것입니다 :) –

답변

관련 문제