이것은 비특이적 인 방식이므로 넌센스 질문이 아닙니다.CSS로 뷰포트를 분할하기위한 최적의 방법 flex
매우 간단합니다 - 나는 에어 비앤비는 어떻게 유사 수직으로 대략 절반 (60/40)로 뷰포트/스크린, 디자인 분할을 생산하는 것을 목표로하고있다 : -
는 것처럼이인가 플렉스 박스 컬럼 (부트 스트랩 4 사용)을 사용하고, 칼럼 너비를 지정하고 오른쪽 컬럼을 위치로 설정하는 것만 큼 간단합니다. 고정?
이전에이 유형의 디자인에 접근 해본 적이 없으므로 누구나 가지고있는 조언을 가장 환영 할 것입니다. 나는 무엇이든 간과하지 않을 것입니다.
여기에 flex 레이아웃 기반 솔루션이 있습니다.
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 60vh;
}
.box .row.content {
flex: 1 1 40vh;
}<div class="box">
<div class="row header">
<p><b>header</b>
(60%)</p>
</div>
<div class="row content">
<p>
<b>content</b>
(40%)
</p>
</div>
</div>
당신이 적어도 시도 자신이 코딩 할 것으로 예상된다. 스택 오버플로는 코드 작성 서비스가 아닙니다. 나는 당신이 [** 추가 연구 **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) Google을 통해 또는 SO를 검색하여 시도하고 시도하십시오. 문제가 계속되면 ** 코드 **로 돌아와서 시도한 내용을 설명하십시오. –
안녕하세요. 당신의 응답을 주셔서 감사합니다. 제안 할 코드에서 직접 시도하지 않았다는 것을 인정하지만 단순히 뷰포트 분할에 접근하는 방법을 알지 못하기 때문입니다. 나는 플렉스에 대해 연구했고 그것이 어떻게 접근 할 것인지에 대한 시나리오를 제공하기 위해 나의 지식을 제공했다. 나는 자유 의지가 아니기 때문에 다른 사람들이 내 코드를 쓰는 것을 원치 않으며 복사하고 붙여 넣기에서 어떤 것도 배울 수 없습니다. 나 자신을 코딩 할 수있는 솔루션으로 나를 안내 할 수있는 의견을 기다리고 있었다. 그러나 나는 당신의 의견을 이해합니다. – U4EA