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和HTML。

非常感谢

Answer 1

JSFIDDLE CODE

我补充说：

html, body {height:100%;}

然后我将你的中心div设置为高度100％（并使其变为粉红色，以便更容易看到）。

编辑：因为我不确定你想对那些人做什么，所以我离开了你们这边的div，但我希望这会有所帮助。

Answer 2

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

Answer 3

这可以实现，但我认为你需要问自己为什么你想要这样做。今天，移动设备没有标准的屏幕尺寸，因此一个屏幕的全屏幕不会是另一个屏幕的全屏幕。

相反，为什么不尝试在建议的结构中添加一些真实的内容，看看它是如何叠加的呢？

或者，如果它纯粹是出于模型目的，那么也许可以使用一些图形软件，它可以更容易，更快速地移动。

DIV HEIGHT和WIDTH整页居中不起作用

背景

当前的JSFiddle：

问题：

需要：

代码类型限制：

3 个答案: