2

我有以下代码，当我使用基于像素的测量时，它可以完美运行，但我想使用百分比代替，当我使用百分比时，它会破坏我的布局，如下图所示

在此处输入图像描述

如上图所示，正文内容和网站标语相互重叠。我需要标语与下面的无序列表一起进入蓝色部分。它在基于像素的布局上运行良好，现在在应用百分比时搞砸了。

这是我的基于 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%;
}
4

5 回答 5

3

伴侣，

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

您需要的第一条规则是：

html, body {
    height:100%;
}

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

现在，如果您想拆分页眉、节和页脚的 viewprot 高度 - 首先是这些元素必须是 body 的直接子元素。那么只有百分比单位才能对 height 属性起作用。

所以你的结构是：

<!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;
}

一些额外的建议：

  • 不要使用全局选择器 - 即 *
  • 而是使用规范化 CSS
  • 基于百分比的高度布局不是最佳实践。

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

于 2013-09-30T11:40:37.203 回答
1

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

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

这样它们将被放置在彼此旁边:) 可能想要用来vertical-align: top;使它们都与顶部对齐，这可能是您想要的。

此外，正如所有其他回复中所述，不要使用*{height: 100%;}，这将比它修复的问题多得多（请参阅您当前的问题）。

margin 和 padding 属性也是如此。某些元素具有您不想删除的默认填充/边距（想想两段之间的小空间）。我假设希望身体全部修剪，只是html,body{margin:0;padding:0;}用于那个:)

于 2013-09-30T11:28:21.170 回答
0

使用*{ height:100%;使所有元素 100%。而是将 100% 用于<body>.

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

于 2013-09-30T11:24:13.973 回答
0

只需将您的CSS更改为：

* {
    margin: 0;
    padding: 0;
}

消除height:100%

于 2013-09-30T11:24:59.587 回答
0

height:100%从中删除

*{

margin: 0;
padding: 0;
}

添加

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

这是一个小提琴

小提琴

于 2013-09-30T11:25:36.327 回答