두 번째 열이 자동으로 너비를 적응시키는 두 개의 열

Question

페이지의 전체 높이를 사용하여 왼쪽 열 (#a)을 만들고 나머지 페이지를 사용하여 오른쪽 열 (#b)을 만들고 싶습니다. 여기

* { margin: 0; padding: 0; } 
 
#a { position: fixed; height: 100%; } 
 
#b { background-color: blue; }

<textarea id="a">hello</textarea> 
 
<div id="b">h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br></div>

, 결과는 잘못된 : 오른쪽 열에서 텍스트가 표시되지 않습니다.

오른쪽 열이 왼쪽 열에 표시되지 않도록 오른쪽에 표시하는 방법은 무엇입니까? 또한

:

• 오른쪽 및 크기 조정 커서를 표시한다 왼쪽 칼럼의 한계에 마우스 호버링 : 우리는 (0 %에서 전체 브라우저 폭의 100 %로) 가로 왼쪽 열 크기를 조정할 때, 오른쪽 열에는 실시간으로 적응해야

• 나는 상자의 오른쪽 열에함으로써 솔루션을 시도했지만 다음 내가 0 % 폭/오른쪽 열에 100 % 폭 열을 좌회전 할 때, 다음에서 인쇄 할 때 브라우저는 브라우저에서만 볼 수 있습니다 한 페이지 (평소와 같이 여러 페이지에 내용을 인쇄하는 대신 한 페이지 만 인쇄하려고하며 y 스크롤바도 재미있게 인쇄하려고합니다!).

Answer 1

여기는 flex 디스플레이 속성에 의존하는 CSS 전용 솔루션입니다. 이는 거의 모든 기능을 제공하며 두 페이지 모두 전체 페이지 높이를 사용할 수 있다고 가정합니다. CSS의 오른쪽 아래 모서리에있는 텍스트 영역에 대한 네이티브 컨트롤을 제외하고는 요소의 측면을 드래그하여 크기를 조절하는 방법은 없습니다.

body { 
 
\t margin: 0; 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
} 
 

 
.parent { 
 
\t display: flex; 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 

 
.left { 
 
\t resize: horizontal; 
 
\t background: lightblue; 
 
} 
 

 
.right { 
 
\t flex: 1; 
 
\t background: coral; 
 
}

<div class="parent"> 
 
\t <textarea class="left"></textarea> 
 
\t <div class="right">asdf</div> 
 
</div>

Answer 2

내 요소 #a 이것이 고정 위치 요소 레이아웃 - 문서 흐름 취출 이래로, 좌측 상단에 배치되고, 다른 요소를 덮는 수단 position: fixed; 갖는다 슬기로운.

은 (는 고정 된 위치에서 주장하는 경우),이를 방지하기 위해 다음과 같이 그들에게 설정을 제공하려면

PS : 한 번에 하나 개의 질문 ...

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#a { 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 35%; 
 
} 
 

 
#b { 
 
    position: relative; 
 
    width: 65%; 
 
    left: 35%; 
 
    background-color: blue; 
 
}

<textarea id="a">hello</textarea> 
 
<div id="b">h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br></div>