빈 칸에 div를 채우려면 어떻게해야합니까?

Question

여러 이미지가있는이 페이지가 있습니다. 왼쪽에는 페이지 너비의 32 %를 차지하는 더 큰 이미지가 있고 오른쪽에는 너비의 68 %를 덮는 6 개의 이미지 격자가 있습니다. 페이지 너비가 늘어나거나 줄어들 때 이미지의 크기가 조절되어 아름답게 작동합니다.

하단에는 탐색 메뉴가 있습니다. 내가 가지고있는 문제는 탐색 메뉴입니다.

페이지의 크기를 조정할 때 이미지는 올바르게 응답하지만 메뉴와 이미지 사이에는 공백이 남습니다. 나는 그 격차를 메우고 싶다. 나는 메뉴가 그 빈 공간을 채울 수있게하려고 노력했다. 그러나 그것을 알아낼 수 없었다. 그때 나는 갑자기 그것이 전화에서 끔찍하게 보일 것이고, 이미지가 끔찍하게 작아지고 메뉴가 페이지의 절반 이상에 끝날 것이라는 것을 깨달았습니다.

내 질문은 : 내 문제를 해결하는 좋은 방법은 무엇입니까? 완전히 다른 접근 방식을 취해야합니까?

편집 : 반응 형 개념에 익숙하고 프레임 워크가 있음을 알고 있지만 프레임 워크는 그리드 레이아웃 만 제공하며이 사이트는 모든 해상도 (클라이언트 요청 당)에 전체 화면을 포함해야합니다. 부트 스트랩과 같은 방법으로 그 일을 수행하는 방법을 알고 있다면 알려주십시오.

이것이 전혀 가능하지 않다면 고객에게 알릴 수 있도록 알려 주시기 바랍니다.

는 Heres는 빠른 Fiddle 당신은 프레임 워크를 사용해야합니다 ..

HTML

<div class="content"> 
    <div class="left"> 
     <div id="big-block"> 
      <img id="red-tiger" src="img/tijger2.png" alt="Tijger"/> 
     </div> 
    </div> 
    <div class="right"> 
     <img class="block" id="red-cat" src="img/plaatje1.png" alt="Rode Kat"/> 
     <img class="block" id="wild-dog" src="img/plaatje2.png" alt="Wilde Hond"/> 
     <img class="block" id="red-panda" src="img/plaatje3.png" alt="Rode Panda"/> 
     <img class="block" id="white-tiger" src="img/plaatje4.png" alt="Siverische Tijger"/> 
     <img class="block" id="puppys" src="img/plaatje5.png" alt="Puppy's"/> 
     <img class="block" id="grey-cat" src="img/plaatje6.png" alt="Grijze Kat"/> 
    </div> 
</div> 
<div class="footer"> 
    <ul class="menu"> 
     <li><a href="index.html">HOME</a></li> 
     <li><a href="#">EIGEN ONTWERP</a></li> 
     <li><a href="#">GALLERIJ</a></li> 
     <li><a href="#">WEBSHOP</a></li> 
     <li><a href="#">CONTACT</a></li> 
    </ul> 
</div> 

CSS

body { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: 0; 
    width: 100%; 
    height: 100%; 
} 
img { 
    width: 100%; 
} 
.content { 
    width: 100%; 
    padding-bottom: 45%; 
} 
/* block width */ 
.left, .right { 
    float: left; 
} 
.left { 
    width: 32%; 
} 
.right { 
    width: 68%; 
} 
/* smaller blocks */ 
.block { 
    width: 33.33%; 
    float: left; 
} 
/* footer */ 
.footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    padding-bottom: 4.6%; 
    background-color: black; 
} 
/* menu */ 
.footer > ul { 
    list-style-type: none; 
    margin: 0; 
} 
.footer > ul > li { 
    width: 20%; 
    float: left; 
    line-height: 30px; 
    text-align: center; 
} 
.footer > ul > li > a { 
    font-family:'Fjalla One', sans-serif; 
    color: white; 
    text-decoration: none; 
} 
.footer > ul > li > a:hover { 
    color: orange; 
} 

Answer 1

앞에서 설명한 것처럼 반응 형 프레임 워크를 사용하는 것이 좋습니다. bootstrap을 제안합니다.

문제는 제가 제공하는 그리드 레이아웃과 에 대해 알고있는 모든 프레임 워크입니다.이 사이트는 모든 화면에서 화면을 넓게 표시해야합니다.

다시 말씀 드리지만 실제로는 그렇지 않습니다. 부트 스트랩에는 컨테이너가 전체 너비로 확장되는 클래스 container-fluid이 있습니다. - http://getbootstrap.com/css/#grid-example-fluid을 참조하십시오. 끈적 끈적한 바닥 글에 관해서

, 이것은도 가능하며, 참조 - 그것은 반응이라고 http://getbootstrap.com/examples/sticky-footer/

Answer 2

당신은 그것에 대한 반응 레이아웃을 사용해야합니다 (이미지 해상도는 정확한 해상도입니다) 그것을 쉽게 달성하기 위해서 ... 나는 부트 스트랩을 제안한다 ...

Answer 3

나는 바이올린을 바꾸려고 노력했다. 이미지는 간격을 메우지 만 잘 보이지 않습니다. 여기에 링크가 있습니다 http://jsfiddle.net/0an15t5y/2/

몇 CSS가 변경되었습니다.

.content { 
    width: 100%; 
    height: 80%; 
} 
/* block width */ 
.left, .right { 
    float: left; 
} 
.left { 
    width: 32%; 
} 
.right { 
    width: 68%; 
    height: 100%; 
} 
/* smaller blocks */ 
.block { 
    width: 33.33%; 
    float: left; 
    height: 50%; 
} 
/* footer */ 
.footer { 
    position: absolute; 
    left: 0; 
    height: 20%; 
    width: 100%; 
    background-color: black; 
}