2012-01-18 2 views
0

내 안에 #content div와 #box_left 및 #box_right가 있습니다. 부모 div는 상대적으로 배치되지만 내부 div는 절대적으로 배치됩니다. 문제는 #box_right가 더 많은 콘텐츠가있을 때 높이를 확장하고 싶지 않다는 것입니다. 그 내부 div도 정적으로 만들어 놓고 나란히 놓기를 원했지만, 분명히 설정 했더라도 콘텐츠는 사라졌습니다. #footer div. 또 다른 작은 문제 : 왜 페이지 링크가 화면 해상도로 조정될 때 메뉴 링크가 늘어나고 마지막 링크가 두 번째 줄로가는 지 알 수 있습니까?상대 div 내의 절대 위치 지정된 div가 더 많은 내용으로 확장되기를 원하지 않음

여기에 내 사이트에 대한 링크입니다 : CLICK HERE

어떤 도움을 주셔서 감사합니다겠습니까이! 확장되지 않습니다 상자의 내용이 떠 경우 사전에 Thnx을

+0

귀하의 #wrapper의 사업부는에 250 세트의 높이를 가져옵니다. – j08691

답변

1

, 당신은 그 후 추가 DIV 필요합니다 개인적으로

<div id="content"> 
    <div id="box_right" style="margin-left:200px;"></div> 
    <div id="box_left" style="float: left; width: 200px;"></div> 
    <div style="clear:both;"></div> 
</div> 
+0

바닥 글은이 속성을 갖고 있으며 작동하지 않습니다./ – lukaleli

+0

은 부동의 형제 여야합니다. 편집 됨. – circusdei

+0

여전히 작동하지 않습니다 :/ – lukaleli

-1

, 난`일부에 절대 위치를 사용하려고 " 마스터 오브젝트 ". 레이아웃 행의 첫 번째 div에 "위치 : 상대적; 부동 : 왼쪽;"을 사용합니다. 나머지는 오른쪽에서 왼쪽으로 잘 정렬해야합니다. 사용 "display : block;" 객체 요소를 객체 내부의 내용에 "적합"시키는 자식 요소. 객체의 위치에 대한

니스 튜토리얼 : div boxes

0

는 당신을 제거하기 "를 높이 : 100 %"#box_right와 #content에 - 그들이 당신을 도움이되지 것입니다.

대신 #content div의 최소 높이를 #box_right div보다 약간 크게 설정하면 웃을 것입니다. 100 % 높이를 제거한 후 #content의 최소 높이를 1000px로 설정했는데 (모두 Chrome에서 속성을 사용함) 올바르게 렌더링됩니다.

또한 jQuery 선택기를 모두 다시 쿼리하지 않고 변수로 저장해야합니다. 훨씬 빠릅니다. 따라서 document.ready 핸들러는 다음과 같이 작성해야합니다.

$(function() { 
    var $content = $("#content"); 
    var $footer = $("#footer"); 

    $content.hide(); 
    // etc 

    $("a", $footer).click(function() { 
     $footer.animate({ marginTop: "none" }, 1000); 
     // etc 
    }); 

    // etc 
}); 

희망이 있습니다.

+0

도움과 팁에 감사드립니다! – lukaleli

-1

플로트 기반 레이아웃 사용 절대적인 이유가없는 한 자신 만의 문제를 일으키는 것입니다.

업데이트 : 문서의 흐름에서 절대 위치 요소가 제거됩니다. 지우기는 효과가 없습니다. 지우기는 플로팅 된 요소에만 영향을 미칩니다. 또는 굉장하지만 자체적 인 복잡성을 가진 flexbox를 살펴보십시오. 클릭하면 변경되지 않는 페이지가로드 당신의 연결 "갈 때"

solved-by-flexbox

관련 문제