열 중 하나에서 크기가 조절되는 배경이있는 2 열 페이지를 만드는 방법은 무엇입니까?

Question

저는 CSS의 초보자이며 2 열 레이아웃을 만들고 싶습니다. 배경 이미지가있는 열 (ca 70 %)과 스크롤 막대가있는 열 (ca 30 %)이 있습니다. 배경 이미지와 스크롤 막대 모두 크기를 조정하여 브라우저 창의 크기를 따르지만 배경 이미지의 높이는 브라우저 창과 항상 동일하게 설정해야합니다.

희망 누군가가 나에게 조언을 줄 수 있고, 내 말은 이해할 수 있지만, 나의 설명과 CSS 기술은별로 좋지 않다.

Answer 1

display:inline-block을 사용하면 2 열 레이아웃을 만들 수 있습니다. 그리고 배경 이미지 크기를 브라우저와 동일하게 유지하려면 background-size:cover을 사용할 수 있습니다.

참고 : 두 번째 열의 스크롤은 해당 열의 내용에 따라 다릅니다.

HTML :

<div class="box1">box1</div> 
<div class="box2">box2</div> 

CSS :

.box1 
{ 
display:inline-block; 
width:70%; 
background : url(url/to/image) no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

.box2 
{ 
display:inline-block; 
width:30%; 
} 

가 또는 당신은 부트 스트랩와 동일한 기능을 수행 할 수 있습니다.

정확하게 70-30 비율을 얻지 못할 수도 있지만 다른 옵션으로 재생할 수 있습니다.

HTML :

<div class="row"> 
    <div class="col-md-8 box1 "> 
     column1 
    </div> 
    <div class="col-md-4"> 
     column2 
    </div> 
</div> 

CSS :

.box1 
{ 
background : url(url/to/image) no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

코드에서 부트 스트랩을 포함하는 것을 잊지 마십시오.