当使用百分比而不是像素时HTML5布局

我有以下代码，当我使用基于像素的测量时完美工作，但我想使用百分比，而当我使用百分比时，它会破坏我的布局，如下图所示当使用百分比而不是像素时HTML5布局

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

来源

2013-09-30 Neville

'* {身高：100％}'使每一个元件100％的高度，我不认为这是可取的。这不会解决你的问题。我不完全清楚你想达到什么目的。你能画一些东西来澄清你的目标。 – LinkinTED

你想要查看端口高度的70％和15％？ –

是这个工作http://jsfiddle.net/4Ze6A/添加明确这两个属性。 –

伴侣，用％（百分比）值

身高财产像素值不起作用。高度百分比将根据父元素高度计算。最初身体没有整个视口的高度。

你需要的第一个规则是：

html, body { 
    height:100%; 
}

记住，html和body选择具有待在一起，以使车身高度等于vievwport高度。

现在，如果你想拆了下来的头，部分和页脚的viewprot高度 - 的第一件事是这些元素必须是身体的直接孩子。那么只有百分比单位将在高度属性上工作。

所以，你的结构将是：

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

而且你有一个幸福的高度灵活的布局。

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

例如：

header { 
    min-height:80px; 
}

一些额外提醒：

不使用全局选择 - 即*
而是使用Normalise CSS
基于百分比高度布局不最佳实践。

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

来源

2013-09-30 11:40:37

非常感谢你，这只是工作绝对好，谢谢你的额外建议！非常感激！ – Neville

使用*{ height:100%;使得所有元素100％。 <body>可以使用100％。

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

来源

2013-09-30 11:24:13 Newtt

感谢您的贡献！ – Neville

只是改变你的CSS到：

* { 
    margin: 0; 
    padding: 0; 
}

删除height:100%

来源

2013-09-30 11:24:59 fiskolin

感谢您的帮助！ – Neville

从

*{ 

margin: 0; 
padding: 0; 
}

删除height:100%添加

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

这里有一个小提琴

fiddle

来源

2013-09-30 11:25:36 Anobik

感谢您的帮助！ – Neville

你需要让他们内联作为一个块：

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

这样，他们将被放置nexto海誓山盟:)可能要使用vertical-align: top;，使他们全部对齐顶端，你可能想要。

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

边距和填充属性也是如此。某些元素具有您不想删除的默认填充/页边距（想想两段之间的小空格）。我asume希望被所有修剪身体，只要使用html,body{margin:0;padding:0;}为:)

来源

2013-09-30 11:28:21 Martijn

感谢您的帮助！ – Neville

当使用百分比而不是像素时HTML5布局

回答

相关问题