html - 如何让div填充空白

Question

我有这个页面有几张图片。左侧是一个更大的图像，覆盖了页面宽度的 32%，右侧是一个包含 6 个图像的网格，覆盖了另外 68% 的宽度。 我让图像随着页面宽度的增加或减少而调整大小，效果非常好。

在底部我有一个导航菜单。我遇到的问题是导航菜单。

调整页面大小时，图像会正确响应，但会在菜单和图像之间留下空白。我想填补这个空白。我试图让菜单填充该空白区域，但无法弄清楚。然后我突然意识到这在手机上看起来会很糟糕，比如图像会变得非常小，菜单最终会占据页面的一半以上。

所以我的问题是:解决我的问题的好方法是什么？我需要采取完全不同的方法吗？

编辑:我熟悉响应式的概念并且知道有框架，但我所知道的框架只提供网格布局并且这个网站必须在每个分辨率(根据客户请求)上覆盖整个屏幕所以如果如果你知道如何使用 Bootstrap 之类的工具来做到这一点，请告诉我。

如果这根本不可能，也请告诉我，以便我告诉客户。

这是一个快速 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 .

problem is all the frameworks I know of offer Grid layout only and this site should be screen wide on any screen.

同样，正如我在评论中所说，那实际上是不对的。 Bootstrap 有一个 container-fluid 类，它将使容器跨越整个宽度。见 - http://getbootstrap.com/css/#grid-example-fluid .

关于粘性页脚，这也是可能的，请参阅 - http://getbootstrap.com/examples/sticky-footer/