页脚div不考虑CSS高度或最小高度
好吧,我刚才问了一个问题: 得到了一个我现在一直在玩弄的答案:页脚div不考虑CSS高度或最小高度,css,html,Css,Html,好吧,我刚才问了一个问题: 得到了一个我现在一直在玩弄的答案: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</titl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
float: top;
width: 100%;
height: 15%;
background-color: green;
}
#navbar {
float: left;
width: 20%;
height: 70%;
background-color: red;
}
#content {
float: right;
width: 80%;
height: 70%;
background-color: blue;
}
#footer {
float: bottom;
width: 100%;
height: 15%;
background-color: yellow;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
正如你可以看到的那样,html和body的高度为100%,因此填充了整个屏幕。页眉的高度百分比为15%,导航栏和主体的高度百分比为70%,页脚的高度百分比为15%,这将构成可视屏幕的100%
现在除了我的页脚,一切都很好:
#footer {
float: bottom;
width: 100%;
height: 10%;
background-color: yellow;
}
如果我删除高度:15%,那么我可以看到黄色的背景色:
如果我不喜欢,那是灰色的。并且看起来占据了大约20%的屏幕:
那么,基本上我该如何让我的div占据我分配给它们的正确高度百分比呢
我希望我说的有道理
提前感谢。您不能浮到顶部或底部。那是不存在的。因此,您必须从页眉和页脚中删除它 并通过执行以下操作清除页脚:
footer {
clear: both;
}
您的问题是没有:
float:top;
或
您需要做的是使它们都float:left代码>
以下是您的更新代码的副本和粘贴:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
float: left;
width: 100%;
height: 15%;
background-color: green;
}
#navbar {
float: left;
width: 20%;
height: 70%;
background-color: red;
}
#content {
float: right;
width: 80%;
height: 70%;
background-color: blue;
}
#footer {
float: left;
width: 100%;
height: 15%;
background-color: yellow;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
试验
html,正文{
填充:0;
保证金:0自动;
身高:100%;
}
#标题{
浮动:左;
宽度:100%;
身高:15%;
背景颜色:绿色;
}
#导航栏{
浮动:左;
宽度:20%;
身高:70%;
背景色:红色;
}
#内容{
浮动:对;
宽度:80%;
身高:70%;
背景颜色:蓝色;
}
#页脚{
浮动:左;
宽度:100%;
身高:15%;
背景颜色:黄色;
}
标题
导航条
身体
页脚
wow新元素浮动:底部;在你的代码中…@RohitAzad hahaha仍在学习我认为这是合乎逻辑的:$
float:bottom;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
float: left;
width: 100%;
height: 15%;
background-color: green;
}
#navbar {
float: left;
width: 20%;
height: 70%;
background-color: red;
}
#content {
float: right;
width: 80%;
height: 70%;
background-color: blue;
}
#footer {
float: left;
width: 100%;
height: 15%;
background-color: yellow;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>