화면에서 페이지 나누기 (CSS 다중 열 레이아웃)

Question

여러 열 문서를 HTML로 표시하려고합니다. 페이지 나누기 후에 인쇄에서 여러 열 "상자"가 다시 시작됩니다. 이 동작 (페이지 나누기) 화면에 에뮬레이트하고 싶습니다, 그래서 열 높이 사용자 에이전트 창 높이보다 높아야합니다.

각 가상 페이지에 대해 새 컨테이너를 사용하는 것만으로 쉽지만 정확히 어디에서 화면이 끝날지 알 수 없으므로 텍스트를 이러한 가상 페이지간에 흐르게 할 수 있습니다.

오늘의 JS에는이 기능을 사용하는 데 필요한 기능이 있지만 레이아웃 문제로 CSS를 사용하고 싶습니다.

Answer 1

나는 기능을 제안했습니다. 당신은 페이지 의 하단에서 위로 버튼을 가질 수 있으며이를 위해 당신은 내가 당신이 어떤이를 알지

<a name="Top"></a> 

페이지

<a href="#Top"> Back to Top… </a> 

의 하단에

을 넣어 톱 페이지에서이 같이 진행할 수 있습니다 찾고 있지만 사용자 친화적이고 쉬운 탐색이 될 것입니다.

Answer 2

시도는 자바 스크립트를 사용하여 뷰포트의 높이로 컨테이너 사업부의 높이를 설정하는 명령 :

window.innerHeight 

전체 스크립트를 얻을 수있는 뷰포트 치수 : http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

당신에 마음에 들지 않는 경우 자바 스크립트를 사용하여 책임감있는 CSS 스타일을 만들 수는 있지만 정확성은 떨어집니다.

Answer 3

나는이 질문에서 설명한 것과 정확히 같은 욕구를 가지고있었습니다. 다음은 HTML/CSS 전용 솔루션으로서 제 목적에 충분히 부합하며 다른 사람들에게 유용 할 수 있습니다. 여기에는 코드를 제공하기 전에 설명 할 몇 가지 단점이 있습니다. 아래의 설명에서는 질문자가 "가상 페이지"라고 부르는 단어에 대해 "서브 페이지"라는 단어를 사용합니다. 즉, 원하는 높이의 내용으로 된 연속 된 세로 열 집합입니다 (텍스트는 한 서브 페이지의 오른쪽 아래부터 단지 )는 렌더링 된 출력에 한번을 보이지만 다음 서브 맨 왼쪽).

1. 은 (하위 페이지는 HTML 여러 번 반복 될로 콘텐츠가 유입되는 것을 요구한다. 콘텐츠가 동적으로 생성 된 경우 (제 경우와 같이 Wordpress 함수 호출의 결과) 루프를 생성하고 여러 복사본을 생성하는 데 어려움이 없습니다.
2. 화면에서 발생할 수있는 임의의 최대 임의의 최대 서브 페이지 수를 선택해야합니다. 그 이상으로 흐르는 컨텐츠는 단순히 손실됩니다. 제 경우에는 사이트의 목적에 따라 최대 다섯 개의 서브 페이지가있을 수 있다는 것을 알았으므로 실제적인 장애물은 아닙니다.
3. 반복 가능한 CSS 줄의 순서가 필요합니다. 각 가능한 서브 페이지마다 하나씩 필요합니다. 콘텐츠의 반복 된 발생이 프로그래밍 방식으로 생성되는 경우 반복되는 사본의 "스타일"속성에 하나의 필수 CSS 속성을 인라인으로 추가하는 것은 별다른 작업이 아니며 이것이 실제로 수행 한 작업입니다. 아래 그림은 명확성을 위해 모든 HTML과 CSS를 분리 한 것입니다.
4. 아마도 가장 큰 단점 : 결과로 생성 된 흐름 구성의 높이를 계산할 정확한 방법을 찾을 수 없습니다 (즉, 서브 페이지 수 실제로 모든 내용을 채우는 데 필요한, 각 서브 페이지의 높이를 곱한 값).꽤 근사한 근사값에 의존해야했습니다. 결과적으로이 근사값에서 추가로 수직 높이를 지정하면 텍스트를 세로로 잘리지 않으므로 레이아웃 맨 아래에 많은 수의 세로 공백이있을 수 있습니다. 다시 말하지만, 제 경우에는 서브 페이지 된 레이아웃이 제 웹 페이지에서 마지막으로 발생 했으므로 하단의 공백은 실제로 저를 시끄럽게하지 않았습니다.

실제 코드는 확인하십시오. 기본 전략은 간단합니다. 동일한 텍스트를 원하는 서브 페이지 높이의 열로 여러 번 나누십시오. 결과 가로 열 세트를 서로 쌓아 올리지만 각 사본은 정확히 한 서브 페이지 너비 페이지를 왼쪽으로 이동하십시오. 마지막으로 전체 스택 (overflow:hidden; 포함)을 서브 페이지 폭만큼 잘라냅니다. 중요한 어려움은 클리핑 div이 올바른 높이가되도록하는 것입니다. CSS에서 모든 서브 페이지 단위를 선택하여 클리핑 될 때 잉크없이 끝내고 간단히 표시 할 수 있다면 간단 할 것입니다. 그러나이를 수행 할 수있는 방법을 찾지 못했습니다. 필자가 결론을 내린 대략적인 근사는 원하는 서브 페이지 너비와 열 구조로 한 번 더 내용 전체를 눈에 보이지 않게 배치하고 해당 레이아웃의 높이를 사용하여 클리핑 높이를 결정하는 것입니다. 그러나 연속 된 짧은 열 블록보다 긴 열의 묶음에 내용을 배치하는 것이 더 효율적이기 때문에 레이아웃이 항상 더 짧으며 어떤 종류의 서브 페이지 구분 기호가 필요하거나 서브 페이지 레이아웃이 매우 혼란 스럽기 때문에 레이아웃이 항상 더 짧습니다. 그래서 나는 클리핑에 큰 바닥 패딩을 던지면서 이것을 바꿔서 div. CSS calc()가 정수 나누기 나 반올림을 허용하면 더 좋은 근사값을 만들 수 있습니다. 그리고 마지막으로, CSS 작업 영역이 시작된다면 모든 작업은 간단 할 것입니다.하지만 그럴 가능성은 희박합니다.

죄송합니다. - 여기에 코드, HTML이 처음이다, 다음 CSS :

<div class="column-paginator"> 
    <div class="vertical-strut mypage-h vertical-fuzz"> 
     [COPY OF CONTENT HERE] 
    </div> 
    <div class="column-paginator-clipper"> 
     <div class="mypage-h mypage-v column-paginator-0"> 
      [COPY OF CONTENT HERE] 
     </div> 
     <div class="mypage-h mypage-v column-paginator-1"> 
      [COPY OF CONTENT HERE] 
     </div> 
     <div class="mypage-h mypage-v column-paginator-2"> 
      [COPY OF CONTENT HERE] 
     </div> 
     <div class="mypage-h mypage-v column-paginator-3"> 
      [COPY OF CONTENT HERE] 
     </div> 
     <div class="mypage-h mypage-v column-paginator-4"> 
      [COPY OF CONTENT HERE] 
     </div> 
    </div> 
</div> 

그리고 이제 CSS :

div.column-paginator { 
    position:relative; /* Ensure we can anchor positions to this element */ 
} 
div.vertical-strut { 
    visibility: hidden; /* Only laying this out to get its height */ 
} 
div.vertical-fuzz { 
    padding-bottom: 300px; /* extra height because unpaginated text 
          * takes less vertical height. This is a 
          * crude measure. */ 
} 
div.mypage-h { 
    /* The desired horizontal setup of the column pagination */ 
    columns: 2 200px; 
    column-gap: 2em; 
} 
div.column-paginator-clipper { 
    /* The div that actually constrains the output */ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    max-height: 100%; 
    overflow: hidden; 
} 
div.mypage-v { 
    /* the desired vertical setup of the column pagination */ 
    height: 300px; 
    position: relative; 
    overflow: visible; 
    margin-bottom: 1.5em; 
} 
div.mypage-v:after { 
    /* Automatically throw in subpage separator. */ 
    content: ""; 
    height:1em; 
    position: absolute; 
    left: 0; 
    top: 100%; 
    width:500%; /* must be MAX_SUBPAGES * 100% */ 
    background: lightcyan; 
} 
/* Note the 2em below is precisely the column-gap above; not sure how 
* to enforce/encode that equality in CSS. 
*/ 
div.column-paginator-0 { left:calc(0 * (-100% - 2em)); } 
div.column-paginator-1 { left:calc(1 * (-100% - 2em)); } 
div.column-paginator-2 { left:calc(2 * (-100% - 2em)); } 
div.column-paginator-3 { left:calc(3 * (-100% - 2em)); } 
div.column-paginator-4 { left:calc(4 * (-100% - 2em)); } 
div.column-paginator-5 { left:calc(5 * (-100% - 2em)); }