如何让 div 填充空白区域答案

【问题标题】：How do I let a div fill in the blank space如何让 div 填充空白区域
【发布时间】：2014-11-28 17:42:33
【问题描述】：

我有这个页面有几张图片。左边是一个更大的图像，覆盖了页面宽度的 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;
}

【问题讨论】：

这叫响应式。 Google bootstrap 是一个良好的开端。
@AlexThomas 我知道它被称为响应式，如果可以解决问题，我会使用像 bootstrap 这样的响应式框架。问题是我所知道的所有框架都只提供网格布局，而且这个网站在任何屏幕上都应该是屏幕宽的。
那是因为你的导航在页脚，而页脚是绝对定位的。只需删除页脚上的绝对定位，它就会粘在您的图像网格上。看到这个小提琴：jsfiddle.net/abhitalks/0an15t5y/1
@abhitalks 但是如果我调整为较小的分辨率，页脚下方会有一个空白。该网站必须始终覆盖整个屏幕。
@Liam de Haas - “问题是我所知道的所有框架都只提供网格布局，而且这个网站在任何屏幕上都应该是屏幕宽的。”。那实际上是不对的。 Bootstrap 有一个类container-fluid，它将使容器跨越整个宽度。见getbootstrap.com/css/#grid-example-fluid

标签： html css image responsive-design

【解决方案1】：

正如我们所讨论的，使用响应式框架是可行的方法。我建议bootstrap。

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

我熟悉引导程序，但据我所知，它不能解决我的问题并保持当前布局。见编辑

【解决方案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;
}

【讨论】：