Question

我有以下代码，当我使用基于像素的测量时效果很好，但我想使用百分比而当我使用百分比时，它会破坏我的布局，如下图所示

enter image description here

正如您可以看到上图所示，正文内容和网站标语相互重叠。我需要将标语放在蓝色部分以及下面的无序列表中。基于像素的布局工作得很好，现在应用百分比搞砸了。

这是我基于HTML 5的标记

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <link href = "site.css" rel = "stylesheet">
    <title>Test Page - Test Title of my homepage</title>
</head>
<body>
    <header>
        <div id = "SiteTitle">
            <h1>This is a test !</h1>
        </div>
        <div id = "Tagline">
            <p>This is a test tagline of the website</p>
        </div>
        <nav>
            <div id = "MainMenu">
                <ul>
                    <li>Home</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </div>
        </nav>
    </header>
    <section>
        <div id = "MainContent">
            Main Site Cotent
        </div>
    </section>
    <footer>
        The Footer
    </footer>
</body>
</html>

这是CSS文件

*{
margin: 0;
padding: 0;
height: 100%;
}
header{
background-color: blue;
height: 15%;
}
nav{

}
#SiteTitle{
color: black;
}
#Tagline{
    color: black;
}
#MainMenu ul li{
color: black;
}
#MainContent{
height: 70%;
}
footer{
background-color: green;
height: 15%;
}

Answer 1

您需要将它们作为块内联：

#SiteTitle, #Tagline, header nav{
   display inline-block;
}

通过这种方式，他们将被放置在nexto彼此:)可能想要使用vertical-align: top;使它们全部对齐到您可能想要的顶部。

此外，正如所有其他回复中所述，不要使用*{height: 100%;}，这会比修复更多的东西（看你当前的问题）。

margin和padding属性也是如此。有些元素有一个你不想删除的默认填充/边距（想想两段之间的小空格）。我想要将身体全部修剪掉，只需使用html,body{margin:0;padding:0;}：）

Answer 2

伴侣，

具有％（百分比）值的高度属性不能用作像素值。高度百分比将根据父元素高度计算。最初，body不具有整个视口的高度。

您需要的第一条规则是：

html, body {
    height:100%;
}

请记住，html和身体选择器必须在一起才能使身高等于vievwport身高。

现在，如果你想要分割页眉，截面和页脚的viewprot高度 - 首先，这些元素必须是body的直接子元素。那么只有百分比单位才能处理高度属性。

所以你的结构将是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Test Page - Test Title of my homepage</title>
    <link href="site.css" rel="stylesheet" /> 
</head>
<body>
    <header>
        header
    </header>
    <section>
        section
    </section>
    <footer>
        footer
    </footer>
</body>
</html>

用于布局的CSS：

*{
    margin: 0;
    padding: 0;
}

html, body {
    height:100%;
}

header{
    background-color: blue;
    height:25%;
}

section{
    height:65%;
}

footer{
    background-color: green;
    height:10%;
}

你有一个快乐灵活的高度布局。

这不会解决您的问题，因为非常低的高度屏幕会导致重叠问题。您可以通过将min-height应用于正文或所需的页眉/节/页脚元素来修复它。

例如：

header {
    min-height:80px;
}

很少有额外的建议：

不要使用全局选择器 - 即*
而是使用Normalise CSS
基于百分比的高度布局不是最佳做法。

一个简单的演示：http://jsfiddle.net/shekhardesigner/9FBxd/

Answer 3

使用*{ height:100%;使所有元素都达到100％。而是将{100}用于<body>。

这使得身体100％高度，其余元素现在可以使用基于百分比的测量。

Answer 4

只需将 CSS 更改为：

* {
    margin: 0;
    padding: 0;
}

删除height:100%

Answer 5

从

中删除height:100%

*{

margin: 0;
padding: 0;
}

添加

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

这是一个小提琴

fiddle

使用百分比而不是像素时的HTML 5布局

5 个答案: