Question

我试图为网站做一个基本的布局。但我有两个问题：

我的div之间有空格。我已经将margin和padding设置为0。
我不能用％来设置高度，我必须使用vh来解决一些div，我不明白为什么。

HTML：

<body>
        <main id="stora">Stora</main>
        <nav id="navigation">
            <ul>
                <li id="ettan"><a>Inredningsuppdrag</a></li>
                <li id="tvaan"><a>Instagram</a></li>
                <li id="trean"><a>Kontakt</a></li>
                <li id="fyran"><a>Leverans</a></li>
            </ul>
        </nav>
        <footer>adress</footer>
    </body>

CSS：

* {
    padding:0;
    margin: 0;
}

html {
    height: 100%;
    width: 100%;
}

body {
    background: yellow;
    height: 100%;
    width: 100%;
}
li {
    list-style: none;
}
#stora {
    width: 50%;
    height: 100%;
    background: red;
    float:left;
}
#navigation {
    width: 50%;
    height: 100%;
    background: blue;
    float: right;
}
footer {
    width: 100%;
    height: 25px;
    background: white;
    position: fixed;
    bottom: 0px;
}
#ettan {
    width: 50%;
    height: 70vh;
    background: olive;
    float: left;
}
#tvaan {
    width: 50%;
    height: 35vh;
    background: turquoise;
    float: left;
}
#trean {
    width: 50%;
    height: 35vh;
    background: white;
    float: left;
}
#fyran {
    width: 100%;
    height: 30vh;
    background: gray;
    float: left;  
}

image of screen

Answer 1

要删除div之间的空格，请尝试为整个文档设置font-size：0并在锚点或包含文本的元素上设置字体大小，请尝试以下示例：

html {
    height: 100%;
    width: 100%;
    font-size:0;
}
#navigation ul li a {
    font-size:14px;
}

简单地说，vh（视口高度）是CSS3中的一个新功能，我将用一个例子来解释，如果你将div高度设置为50vh，这意味着你希望你的div高度延伸到50％视口高度，同时将其设置为50％会使拉伸到div的父高度的50％（同样适用于width:50vw）。

以下是关于如何使用它们的reference。

修改

要尝试的另一件事：

尝试仅浮动左侧div并从右侧div移除浮动，但为它们设置display:inline-block，我无法测试结果，因为我没有野生动物园，所以尝试一下，让我们知道它是否有帮助。

#stora { width: 50%; height: 100%; background: red; float:left; display:inline-block; } #navigation { width:50%; height: 100%; background: blue; display:inline-block; }

Answer 2

奇怪的是，它在Chrome和Firefox中看起来很不错。 Darn跨浏览器兼容性！

你应该尝试：

overflow:hidden;

我没有安装Safari进行测试，所以这就是我所拥有的，祝你先生好运。

Answer 3

对我来说：两次潜水之间只有一条细线，所以我习惯了

边框：2px纯白色；

如果要为潜水的不同侧面设置不同的颜色，则应使用：-

border-top：右边框：左边框：底部边框：

基于要删除“细线”的一面如果我的评论格式没有正确定义/排序，请原谅我（我在StackOverFlow中的第一条评论）

div之间的白线

3 个答案: