2014-04-29 5 views
0

사이드 바의 길이를 확장하는 높이가 설정되지 않은 부동 부모 div가 있습니다.하위 div를 상위 div의 높이로 설정

부모 div의 높이를 확장하려면 부모 div 안의 하위 div를 원하지만 알아낼 수는 없습니다.

부모 div 위치 만들기 : 상대 및 자식 div 위치 : 절대 높이를 만들 수 있도록 100 %를 만들었지 만 div는 모두 사라집니다.

당신은 여기에 문제가 볼 수 http://www.icc565.com/spring2014/ncdevoe/wordpress/?page_id=5

는 기본적으로, 부모 DIV가하는 것처럼 흰색 배경에 사이드 바의 높이를 확장하고자합니다.

누구든지 나를 도와 줄 수 있다면 크게 감사하겠습니다. 여기

내 코드입니다 :

CSS

.container { 
    width: 960px; 
    margin: 0 auto; 
} 

section { 
    width: 640px; 
    float: left; 
} 

aside { 
    width: 290px; 
    float: right; 
} 

.page { 
    width: 580px; 
    margin: 0 auto; 
    background-color: white; 
} 

HTML

<section> 
    <div class="page"> 
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 

    <h1><?php the_title(); ?></h1> 
    <?php the_content(); ?> 

    <?php endwhile; else: ?> 
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 
    <?php endif; ?> 
    </div> 
</section> 
+3

CSS (JS가없는)를 사용하여 자식 div를 부모 div의 높이로 만들려면 부모 div의 높이를 선언해야합니다. – TylerH

+1

TylerH가 정확합니다. 이 문제를 해결할 수있는 몇 가지 흥미로운 레이아웃 모델이 있지만 현재는 잘 지원되지 않습니다. –

+0

가능한 복제본 : http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh – Digzol

답변

0

jQuery를 사용하면이 작업을 간단하게 수행 할 수 있습니다. 나는 정확히 당신이 필요에 완전히 명확하지 않다,하지만 이런 일이 도움이 될 것 같은 소리 :

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#child').height($('#parent').height()); 
}); 
</script> 

https://api.jquery.com/height/를 참조하십시오. 등고선에 관한 Digzol의 제안은 체크 아웃 할 가치가 있습니다.

0

HTML 당신이 그들의 부모로부터 높이를 상속하는 하위 요소에게 줄 수있는 상속 속성이

http://www.w3schools.com/cssref/css_inherit.asp

+0

그러나 부모의 높이가'auto'로 설정되면 그 높이는 자식을 수용하기 위해 확장 될 것입니다. 사실상 부모는 가장 높은 자식에 의존하여 높이를 지정해야합니다. 그런 다음 상속 또는 상대 단위를 통해 부모를 기반으로 키의 높이를 계산하도록 자녀에게 말하면 허용되지 않는 순환 종속성이 생깁니다. –

관련 문제