플로팅 메뉴 변수 너비

내용 왼쪽에 부동 탐색 모음이있는 방법을 알아 내려고합니다. 고정 너비이지만 내용을 유지하면서 뷰포트의 가장자리까지 확장되는 컨테이너가 있습니다. 페이지를 중심으로플로팅 메뉴 변수 너비

그리고 여기까지 내가 무엇을 의미하는지에 대한 이미지를 얻었습니다. http://dl.dropbox.com/u/23132/index.html

어떤 도움이나 아이디어가 있습니까?

2010-07-29 Picard102

는 Bordingo에서 용액을 얻었다.

<html> 
<head> 
<style type="text/css"> 
html, body { height: 100%; min-width: 960px;} 

.container { width: 960px; height: 100%; margin: 0 auto; background: #ddd; } 

.nav-fix { position: absolute; left: 0; width: 50%; min-width: 480px; height: 100%;} 

.nav { position: absolute; top: 100px; right: 280px; width: 9999px; height: 200px; background: #333; } 

.nav-box { position: absolute; top: 10px; right: 10px; width: 180px; height: 180px; background: #eee; } 

</style> 
</head> 
<body> 
<div class="nav-fix"> 
<div class="nav"> 
<div class="nav-box"></div> 
</div> 
</div> 
<div class="container"></div> 
</body> 
</html>

출처

2010-07-31 22:15:23 Picard102

nav 영역의 동적 인 높이에는 운이 없습니까? –

동적 높이가 작동하는 것처럼 보입니다. 높이는 데모 용 컨텐츠를 추가하지 않고 모양을 유지하는 예에 불과합니다. – Picard102

jQuery를 사용하고 싶다면 본체의 오프셋을 계산하고 그에 따라 사이드 바의 너비/패딩/여백을 조정할 수 있습니다.

간단한 예

http://dl.dropbox.com/u/1588084/floatmenu.htm

출처

2010-07-29 21:16:17

두 가지 문제가 있습니다. 컨텐츠 영역과 메뉴 영역을 중앙에 배치하지 않습니다. 다른 하나는 콘텐츠 영역이 더 작은 크기의 메뉴 아래에 나타납니다. 여기에서 사용해 보았습니다. http://dl.dropbox.com/u/23132/New%20Folder/index2.html – Picard102

이것은 똑같은 기술이지만 그것이 당신의 모형에 더 가깝도록 변경했다고 생각합니다. 메뉴 및 컨텐츠를 중앙에 유지하고 슬라이드 언더는 유지하지 않습니다. http://dl.dropbox.com/u/1588084/floatmenu_2.htm –

아직 제대로 작동하지 않습니다. 메뉴와 사이드 바는 고정 된 위치에 있어야하며, 내가 당신의 버전으로 그것을하려고 할 때 그것은 떨어져있다. 메뉴와 유체 부분에는 내용이 변경되어 동적으로 동일한 높이가되어야합니다. – Picard102

플로팅 메뉴 변수 너비

답변

관련 문제