DIV高度和宽度整页对中不工作

Question

背景：

我正试图在全屏中为我的未来页面和容器可视化结构。

当前JSFiddle：

可在这里找到。

<div class="top">top</div>
<div class="middleleft">left</div>
<div class="center">center</div>
<div class="middleright">right</div>
<div class="bottom">bottom</div>

.top
{
background-color: yellow;
height: 20%;
}

.middleleft
{
float: left;
    background-color: blue;
width: 20%;
}

.center
{
float: left;
        background-color: white;
width: 60%;
margin: auto;
height: 60%;
}

.middleright
{
float:left;
    background-color: red;
width: 20%;
}

.bottom
{
height: 20%;
background-color: green;
}

问题：

由于某些原因，即使在CSS上定义了高度，它也不会将整个屏幕填充到底部，在文本结束之前只链接足够的背景颜色高度和宽度。

需要：

需要哪些代码更改才能将屏幕填充到其所具有的维度(比如中心div上的60%宽度)，而不必将字符写到屏幕底部以填写屏幕上的div？

代码类型限制：

我不希望在解决方案中使用JavaScript或JQuery，只想使用CSS和JQuery。

非常感谢

Answer 1

JSFIDDLE码

我补充说：

html, body {height:100%;}

然后，我把你的中心div设为100%高(并使它变成粉红色，这样就能更容易看到)。

编辑：--我把你的侧div放在一边，因为我不知道你想用这些做什么，但我希望这会有所帮助。

Answer 2

将顶部/中间/底部的内容包装到一个类中，允许左/右div仅位于包装器之外。

Answer 3

这是可以实现的，但我认为你需要问自己为什么要这样做。今天，手机没有标准的屏幕大小，所以一个屏幕的全屏不会是另一个屏幕的全屏。

相反，为什么不尝试在建议的结构中添加一些真正的内容，然后看看它是如何堆积起来的呢？

或者，如果它纯粹是为了模型的目的，那么也许使用一些图形软件，在那里它更容易和更快地移动东西。