자동으로 높이 조정 div

페이지가 있고 그 페이지에 두 개의 div, 하나의 이름이 'bar'이고 다른 이름이 'example'입니다. 내가 사업부 '예'내 백 번 같은 <p> 태그, 뭔가 내에서 단락을 복사하여 붙여 넣을 수 있습니다, 지금자동으로 높이 조정 div

<style> 
#example{ 

    float:right; 

} 
#bar { 
    width: 100px; 
    height:100%; 
    border: 1px solid red; 
    box-sizing: border-box 
} 
</style> 

<div id="example"><p>This is page content</p><p>This is page content</p></div> 
<div id="bar"></div>

, 나의 페이지의 높이가 증가합니다 : 코드는 같은 것입니다. div가 내 페이지의 맨 아래를 덮을 수 있도록 문단을 100 번 붙여 넣은 후 내 div가 자동으로 페이지의 새 높이로 높이기를 원합니다. 이 일을 할 수있는 방법이 있습니까?

출처

2017-04-23 John Wink

-1

#bar{ 
     height:auto; 
    }

트릭을해야합니다.

E : 목표가 100 % 윤곽이 지정되지 않았고 코드를 실행 한 후 더러워 보였으므로 bar 콘텐츠를 example 안에 넣고 싶다고 생각했습니다. 그들을 분리하는 선을 제거하고 싶다면 p과 p:first-of-type 스타일을 꺼내십시오.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    #example { 
 
     float: right; 
 
    } 
 
    
 
    #bar { 
 
     width: 100px; 
 
     height: auto; 
 
     border: 1px solid red; 
 
     box-sizing: border-box 
 
    } 
 
    
 
    p { 
 
     border-top: 1px solid red; 
 
     padding-top: 10px; 
 
    } 
 
    
 
    p:first-of-type { 
 
     border: none; 
 
     padding: 0; 
 
    } 
 
    </style> 
 

 
    <body> 
 
    <div id="example"> 
 
     <div id="bar"> 
 
     <p>This is page content</p> 
 
     <p>This is page content</p> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

당신이 상자의 중앙에 텍스트를 원한다면 바로 p{text-align:center;}

출처

2017-04-23 04:06:28 Josh

예제 및 막대는 두 개의 별도 div입니다. 그들은 서로 관련이 없습니다. 막대에는 일부 콘텐츠가 포함되어 있으며 예제에는 전혀 다른 콘텐츠가 포함되어 있습니다. 나는이 두 개의 다른 divs의 높이가 항상 같고 높이가 더 큰 것이 될 방법을 찾으려고했습니다. 나는 이것이 자동적으로 조정되기를 바란다. –

http://jsfiddle.net/PHjtJ/이 JS를 통해 정확히 수행 할 수 있습니다. Charles Ingalls의 크레딧 [http://stackoverflow.com/users/1874138/charles-ingalls] – Josh

가 나는 완전히 질문을 이해했는지 모르겠지만, 어떻게 내가 당신을 수집 것과 div의 높이를 화면의 높이 이상으로 만들려고합니다. 그렇다면 높이를 min-height: 100vh으로 설정해야합니다. 코드에서 "높이 : 100 %"라고 말하면 화면의 높이가 아니라 "이 div를 상위 div의 높이로 100 % 만듭니다"를 의미합니다.

희망이 도움이됩니다.

출처

2017-04-23 04:32:06

답변

관련 문제