위쪽, 아래쪽 및 오른쪽 부분에 HTML 페이지를 배치하는 방법은 무엇입니까?

Question

HTML 페이지를 세 부분으로 배치하고 싶습니다. TOP라고하는 것은 윈도우의 왼쪽 상단 부분을 차지합니다. 다른 부분 (하단)은 왼쪽 하단 부분을 차지합니다. 세 번째 (오른쪽)는 오른쪽 부분을 차지합니다.

위쪽과 아래쪽의 폭이 같고 고정되어 있습니다. RIGHT는 창의 나머지 너비를 채 웁니다.

아래쪽이 내용에 맞게 세로로 확장됩니다. TOP는 창의 나머지 높이를 채우고 최소 높이를가집니다. RIGHT는 창 높이를 채 웁니다.

내용이 오버 플로우되면 TOP와 RIGHT가 수직으로 화면 이동합니다. BOTTOM은 오버 플로우를 숨 깁니다 (창문이 터무니없이 짧은 경우에만 발생하는 병리 적 사례).

이 방법을 직접 이해하고 싶지만 접근 방법에 대한 일반적인 조언이 필요합니다.

세 가지로 모든 것을 수행해야합니까? <iframe>? <div> 세 개를 사용하면 절대 위치 지정을 사용합니다. 각각은 <iframe>? 왼쪽 및 오른쪽 <div> s, 상단 및 하단 <div> 왼쪽 < > 및 각각 <iframe>?

< iframe을 만들려면 어떤 CSS 속성을 사용해야합니까? > 또는 <div> 또는 원하는대로 동작해야합니까?

Answer 1

Divs 및 CSS를 사용하면 쉽게이 작업을 수행 할 수 있습니다. 시간을 들여 보면서 많은 정보를 얻을 수 있습니다. 나는 어떤 기본적인 웹 프로그래밍 과정을 찾는 것이 좋을 것이다. 실제로해야할 일은 무엇이든간에

Answer 2

iframe이 아니라 div를 사용한다. http://css-tricks.com/search-results/?q=div

http://alistapart.com/article/css-positioning-101

당신이 경우 답변으로 표시하십시오 ... 여기

<div style="background: red; width: 100%; position: relative; height: 100px">text top </div> <div style="background: blue; float: right; width: 50%; max-height: 450px; height: 450px; position: relative; overflow-y: auto"> text right </div> <div style="background: gray; width: 100%; position: fixed; bottom: 100px;"> text bottom </div> 

링크의 몇입니다 .... 시작은 웹 페이지의 본문이 스틱 그것이 도움이된다고 생각하십시오.