CSS : 브라우저 화면과 관련하여 콘텐츠의 고정 폭을 설정하는 방법

Question

저는 CSS와 HTML에 익숙하지 않습니다. 한 화면은 최대화 된 브라우저 화면의 너비가 50 % 인 반면 화면은 두 부분으로 나눠야합니다. 다른 하나는 융통성이 있습니다. 따라서 브라우저 너비를 절반으로 설정하면 내용 중 하나가 완전히 표시되고 다른 내용은 완전히 숨겨집니다. 물론 나는 이것이 모든 해결책에 대해 동일하게되기를 바랍니다.

foursquare와 동일 : https://foursquare.com/explore?mode=url&near=New%20York%2C%20NY%2C%20United%20States&nearGeoId=72057594043056517 (지도가 숨겨져 있으며 브라우저의 너비가 50 % 미만이 될 때까지 막대 정보는 영향을받지 않습니다.) 여기

는 샘플입니다 :

body { 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 

 
/*width must be 50% of browser's maximum width, same as bars on foursquare*/ 
 

 
.lefthalf { 
 
    float: left; 
 
    background-color: black; 
 
    width: 50%; 
 
    height: 100%; 
 
} 
 

 
/*width is between 0-50% of browser's maximum width, same as map on foursquare*/ 
 

 
.righthalf { 
 
    float: right; 
 
    background-color: red; 
 
    height: 100%; 
 
    width: 50%; 
 
}

<div class="lefthalf"></div> 
 
<div class="righthalf"></div> \t

Answer 1

당신은 인 flexbox과 같은 것을 할 수 있습니다

html, body { /* modified */ 
 
    width: 100vw; 
 
    height: 100vh; 
 
    margin: 0; /* recommended */ 
 
} 
 

 
body { 
 
    display: flex; /* displays children inline by default */ 
 
} 
 

 
.lefthalf { 
 
    /*float: left;*/ 
 
    background: black; 
 
    flex: 0 0 750px; /* adjust to your needs/doesn't grow nor shrink with the initial width of 750px */ 
 
    /*height: 100%;*/ 
 
    overflow-x: auto; /* optional/enables horizontal scrolling if the content is wider than 750px (in this case) */ 
 
} 
 

 
.righthalf { 
 
    /*float: right;*/ 
 
    background: red; 
 
    /*height: 100%;*/ 
 
    /*width: 50%;*/ 
 
    flex: 1; /* takes the remaining horizontal space */ 
 
} 
 

 
@media screen and (max-width: 1000px) { /* adjust to your needs */ 
 
    .lefthalf {flex: 3} /* always three times wider than the .righthalf between 601px and 1000px screen width */ 
 
    .righthalf {flex: 1} 
 
} 
 

 
@media screen and (max-width: 600px) { /* adjust to your needs */ 
 
    body { 
 
    flex-direction: column; /* recommended/stacks children vertically */ 
 
    } 
 
    .lefthalf, 
 
    .righthalf { 
 
    flex: 1; /* optional & recommended/each takes half of the body height */ 
 
    } 
 
}

<div class="lefthalf"></div> 
 
<div class="righthalf"></div>

,

.lefthalf 필요는 정의 된 50% 또는 50vw 작동하지 않습니다, px의 정적 width해야하기 때문에 width 브라우저 width에 따라 변경됩니다.