分割页面和查看分割答案

【问题标题】：Dividing the page and Viewing the division分割页面和查看分割
【发布时间】：2013-12-19 14:16:07
【问题描述】：

我只想查看我在页面上所做的划分，但页面上什么都看不到。我的代码有什么问题？

我只是希望我划分的内容应该显示在没有内容的页面上。我正在使用铬。

<!DOCTYPE html>
<html>
    <head>
    <style>
        .main {
            width: 100%;
            height: 100%;
            background: -webkit-linear-gradient(#029CC9, #005077); /* For Safari */
            background: -o-linear-gradient(#029CC9, #005077); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(#029CC9, #005077); /* For Firefox 3.6 to 15 */
            background: linear-gradient(#029CC9, #005077); /* Standard syntax (must be last) */
        }

        .main .header .icon {
            width: 90%;
            margin-left: 5%;
        }

        .main .header .menu {
            width: 90%;
            margin-left: 5%;
        }

        .main .content {
            background-color: lightgrey;
        }

    </style>
</head>
<body>

    <div class="main">
        <div class="header">
            <div class="icon"></div>
            <div class="menu"></div>
        </div>
        <div class="content"></div>
    </div>

</body>
</html>

【问题讨论】：

您的 div 可能存在，只是其中没有任何实际内容。您需要添加文本或其他视觉元素才能看到任何内容
没有内容怎么办？
您可以通过在窗口中右键单击并按Inspect Element 来查看 div，然后搜索您创建的 div。 [因为您使用的是 Chrome]
我已经这样做了，但我的问题是如何查看没有内容的部门？
我在.main中使用了身高

标签： html css

【解决方案1】：

如果您在 div 元素中添加 &nbsp; 以查看背景，您可以看到颜色，而其中没有任何实际内容。

<div id="main">
    <div class="header">
        <div class="icon">&nbsp;</div>
        <div class="menu">&nbsp;</div>
    </div>
    <div class="content">&nbsp;</div>
</div>

【讨论】：

你能告诉我为什么它不在整个页面上，即使我已经完成了 100% 的宽度和高度
尝试用 px 设置高度。我将它设置为 500px，它显示得非常大。此外，您可能还想为图标和菜单标签添加background 颜色，因为您根本看不到它们。我使用红色 background:#900; 和绿色 background:#090; 将它们轻松显示在蓝色之上
至于全高，看这个帖子(stackoverflow.com/questions/12043830/…)
这很有帮助，但为什么我不能使用百分比呢？我的概念是百分比功能很好，因为它在所有分辨率下都很灵活。
您可以使用百分比...您只需要设置页面以完全适应它。只需添加html,body{height:100%}，您就应该设置完整的页面背景

【解决方案2】：

这将为您提供main div 周围的基本边框并将其涂成绿色。您可以为其他人做类似的事情以显示每个 div 的放置位置。

.main {
    border-style:solid;
    border-width:1px;
    height: 10px;
    background-color: green;
}

【讨论】：

如果我想在整个页面上显示它怎么办？我怎样才能用宽度百分比来做到这一点？

【解决方案3】：

把 .main 改成 id。

将 .main 分别替换为 #main。

【讨论】：

我自己试过了，蓝色背景出现了，里面有一个容器。你先试试，然后再告诉我。

【解决方案4】：

如果您想在不添加文本的情况下查看div 部分，则必须提及特定的height。

.main .header .icon {
     width: 90%;
     margin-left: 5%;
     height: 30px;
}

【讨论】：