CSS로 남은 공간 사용

Question

두 가지 주요 영역으로 구성된 웹 사이트를 설정하려고합니다 : 탐색 및 콘텐츠. 네비게이션 부분은 왼쪽 열의 전체 높이를 차지해야합니다. 주요 내용은 왼쪽 열에 표시됩니다. 나는 전체 예를 here와 바이올린을 만들었습니다

<div class="full-height row"> 
    <div id="navDiv" class="four wide column full-height" style="background-color:#40546C;"> 
    <!-- Nav COntent goes here --> 
    </div> 

    <div class="eight wide column"> 
     Main Content 
    </div>  
</div> 

이를 설정하기 위해, 나는 다음과 같은 CSS를 사용하고 있습니다. 탐색 열에서 수행하려는 작업은 세 가지입니다. 제목 표시, 화면 하단에 정렬 된 탭 및 탭 내용을 나머지 공간으로 가져옵니다. 불행히도, 나는이 일을하는 데별로 행운이 없다. 특히, 남은 공간을 채우기 위해 탭 내용을 가져오고 화면의 아래쪽에 탭을 정렬하는 데 문제가 있습니다.

귀하의 도움에 감사드립니다!

Answer 1

나중에 참조 할 수 있도록 외부 그리드 시스템을 사용 중이라고 언급해야합니다. 일어난 일과 왜 많은 것들이있는지를 깨닫는 데 몇 분 정도 걸렸습니다. 나는이 새로운 바이올린는하지만, 무슨 말을하는지에 아주 가까이 있어야한다고 생각 :-)

아니지만 큰 문제는 : theFiddle

내가 먼저 몸과 HTML의 높이를 설정했다 100 % 그래서 그들의 아이들은 100 % 일 수 있었다. 나는 navDiv을 왼쪽으로 띄우고 폭을 25 %로했다. 필요에 따라 너비를 조정할 수 있습니다.

#navDiv { 
width: 25%; 
float: left; 
position:relative; 
} 

그런 다음 절대 위치 지정을 사용하여 아래쪽 탭을 가져 와서 탭 위에 탭 내용을 가져 왔습니다.

그리드 라이브러리와의 충돌을 피하기 위해 여러 곳에서 새로운 클래스를 추가했습니다. 그리드에서 사용하고있는 것을 제거하고 싶지 않았기 때문에 세그먼트 클래스의 여백을 무시하는 것이 중요했습니다.

그리드를보다 효과적으로 사용하는 레이아웃이 될 수 있습니다. 내가 말했듯이, 나는 익숙하지 않아 평범한 CSS만을 사용했다.

그냥 제쳐두고, 이것은 CSS 레이아웃을 닦는 데 내가 가장 좋아하는 리소스 중 하나입니다. 유용한 정보라고 생각하면 도움이 될 것입니다. http://learnlayout.com/