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。

问题是我所知道的仅提供网格布局的所有框架这个网站应该在任何屏幕上都是屏幕上的。

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

关于粘性页脚，也可以这样做，请参阅 - http://getbootstrap.com/examples/sticky-footer/

Answer 2

你必须为它使用响应式布局..你必须使用框架来轻松实现它......我建议使用Bootstrap ......

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;
}

如何让div填充空白区域

3 个答案: