使用百分比而不是像素时的HTML 5布局
[英]HTML 5 Layout when using percent instead of pixels
问题描述
I have the following code which works perfectly when i use pixel based measurements , but i want to use percentages instead and when i use percentage it spoils my layout like the picture attached below 
我有以下代码，当我使用基于像素的测量时，它可以完美地工作，但是我想使用百分比，而当我使用百分比时，它会破坏我的布局，如下图所示
As you can see the image above, the body content and site tagline are overlapping each other. 如上图所示，正文内容和网站标语相互重叠。 I need the tagline to go within the blue section along with the unordered list below. 我需要标语和下面的无序列表一起进入蓝色部分。 It was working fine with the pixel based layout, its messed up now on applying percentages. 它在基于像素的布局上运行良好，现在在应用百分比时变得一团糟。
Here is my HTML 5 based markup 这是我基于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>
and here is the CSS file 这是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%;
}
5 个解决方案
解决方案1
1 2013-09-30 11:28:21
You need to make them inline as a block: 您需要将它们内联作为一个块：
#SiteTitle, #Tagline, header nav{
display inline-block;
}
This way they will be placed nexto eachother :) Might want to use vertical-align: top; 这样，它们将彼此相邻放置：)可能想使用vertical-align: top; to make them all align to the top, which you probably want. 使它们都与您可能想要的顶部对齐。
Also, as stated in all other replies, dont use *{height: 100%;} , that will mess up a WHOLE lot more than it fixes (see your current problem for one). 另外，如所有其他答复所述，不要使用*{height: 100%;} ，这会使整个问题变得更加复杂（请参阅当前问题）。
The same goes for the margin and padding attribute. margin和padding属性也是如此。 Some elements have a default padding/margin which you don't want to remove (think of the little space between two paragraphs). 有些元素具有默认的填充/边距，您不希望将其删除（请考虑两段之间的空白）。 I asume want the body to be all trimmed, just use html,body{margin:0;padding:0;} for that :) 我假设要对身体全部修剪，只需使用html,body{margin:0;padding:0;} ：)
解决方案2
1 已采纳 2013-09-30 11:40:37
Mate, 伴侣，
Height property with % (percentage) value does not work as pixel values. 具有％（百分比）值的Height属性不能用作像素值。 Height percentages will be calculated based on parent elements height. 高度百分比将基于父元素的高度进行计算。 Initially body does not have height as entire viewport. 最初，主体在整个视口中没有高度。
The very first rule you need is: 您需要的第一个规则是：
html, body {
height:100%;
}
Remember, html and body selector has to be together in order to make body height equal to vievwport height. 请记住，html和主体选择器必须在一起才能使主体高度等于vievwport高度。
Now if you want to split down the viewprot height for header, section and footer - the very first thing is these elements has to be direct children of body. 现在，如果要拆分页眉，节和页脚的视点高度-首先，这些元素必须是body的直接子代。 Then only percentage unit will work on height property. 然后只有百分比单位将对height属性起作用。
So your structure would be: 因此，您的结构将是：
<!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>
And CSS for layout: 和CSS用于布局：
*{
margin: 0;
padding: 0;
}
html, body {
height:100%;
}
header{
background-color: blue;
height:25%;
}
section{
height:65%;
}
footer{
background-color: green;
height:10%;
}
And you have a happy flexible height layout. 您将拥有一个愉快的灵活高度布局。
This wont solve your issue as very low height screen would cause overlap issues. 这不会解决您的问题，因为高度过低的屏幕会引起重叠问题。 You can fix it by applying min-height to body or desired header/section/footer elements. 您可以通过将最小高度应用于正文或所需的页眉/节/页脚元素来修复此问题。
For example: 例如：
header {
min-height:80px;
}
Few extra advise: 很少有其他建议：
- Dont use global selector - ie * 不要使用全局选择器-即*
- Instead use Normalise CSS 而是使用Normalize CSS
- Percentage based height layout are not best practices. 基于百分比的高度布局不是最佳做法。
A simple Demo: http://jsfiddle.net/shekhardesigner/9FBxd/ 一个简单的演示： http : //jsfiddle.net/shekhardesigner/9FBxd/
解决方案3
0 2013-09-30 11:24:13
Using *{ height:100%; 使用*{ height:100%; makes all elements 100%. 使所有元素均为100％。 Rather use 100% for <body> . 而是将100％用于<body> 。
This makes the body 100% height and the rest of the elements can now use percentage based measurements. 这使得车身高度为100％，其余元素现在可以使用基于百分比的测量。
解决方案4
0 2013-09-30 11:24:59
just change your CSS to: 只需将CSS更改为：
* {
margin: 0;
padding: 0;
}
Remove height:100% 去除height:100%
解决方案5
0 2013-09-30 11:25:36
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.