병렬 부풀기

Question

폭이 무엇이든 상관없이 두 개의 수레가 나란히있을 수 있습니까?

기본적으로 나는이 아래에 있습니다

#container { height: 100%; width: 100%; overflow: auto; background-color: #F6F9FF; } 
#navigation { height: 100%; width: 300px; float: left; overflow: auto; background-color: green;} 
#content { float: left; background-color: blue;} 

<div id="container"> 
<div id="navigation"> 
    <ul> 
     <li>1. nav stuff </li> 
     <li>1. nav stuff </li> 
     <li>1. nav stuff </li> 
    </ul> 
</div> 
<div id="content"> 
    <p>Lorem ipsum snip....ultricies.</p> 
</div> 
<div> 

나는 탐색 및 콘텐츠를 항상 나란히되고 싶어요. 탐색에는 300px의 초기 너비가 있지만 jquery를 사용하여 탐색을 닫을 수 있으며 최대 15px까지만 사용할 수 있습니다. 나는 콘테이너의 나머지 부분을 항상 채우기를 원한다. 지금은 너비가 작아지면 콘텐츠가 계속 탐색되므로 콘텐츠가 탐색 아래로 떨어지게됩니다.

여기 내가 말하는 것을 보여주기 위해 jsfiddle에 대한 링크가 있습니다. 부동 옆에

http://jsfiddle.net/M9sZd/2/

Answer 1

사이드 브라우저에 따라 때로는 까다로운 일이 될 수 있습니다. (나는 IE에서 문제를 발견하고 100 %를 사용함)

네비게이션 및 컨텐트 영역을 % 기반 너비 - (20 %/80 %)로 변경했으며 서로 옆에 쉽게 맞춰 보였습니다.

Link with %-Based Widths

는 내용과 탐색을 분리하고 조절하기 위해 "스플리터"같은 것을 사용하여 고려 적이 있습니까?

jQuery Splitter

나는 최근에 그런 일을 사용하고 내가 정말 달성하기 위해 노력했다 일했다. 당신은 아마도 명시 적 영역의 폭을 조정할 수 - 아래에 비슷한으로 탐색 폭을 변경할 때

var containerWidth = $("#container").width(); 

onChange() 
{ 
    $("#navigation").css("width", 15px); 
    $('#content").css("width", containerWidth - 15); 
} 

사면 의사 코드는 커프을 떠났다.

는 어쨌든 - 나는 당신이 매우 일반적입니다 :)

Answer 2

사용할 수 있었다 여기서 뭔가를 바랍니다. 이것을 성취 할 수있는 방법은 여러 가지가 있으며, 어떻게 할 수 있는지 알려 드리겠습니다 (물론 자바 스크립트 사용). 두 가지 상황이 있습니다 : 1. nav 확장 및 2. nav 축소. 내비게이션에 position: absolute을 사용하고 컨테이너의 너비를 수용하기 위해 패딩을 사용하면서 해당 너비를 사용하고 상황에 따라 컨테이너에 클래스를 추가합니다.

#navigation { position: absolute; left: 0; top: 0; width: 300px; } 
#navigation.collapsed { width: 15px; } 
#container { position: relative; padding-left: 300px;} 
#container.nav-collapsed { padding-left: 15px; } 

유일한 위험은 내비게이션이 콘텐츠보다 높으며 잘릴 것입니다. 컨테이너에 min-height을 사용하면이를 방지 할 수 있습니다.