use*_*516 76 html javascript css
所以我有一个带有标题,主体和页脚的网页.我希望主体填充页面的100%(在页脚和页眉之间填充100%)我的页脚是绝对位置底部:0.每次我尝试将主体设置为100%高度或更改位置或其他东西它也将溢出标题.如果将body设置为绝对位置top: 40(因为我的标题是40px高),它将向下移动40px太远,创建一个滚动条.
我创建了一个简单的html文件,因为我实际上无法从实际项目中发布整个页面/ css.使用示例代码,即使主内容体填满屏幕,它也会向下移动40px(因为我认为是标题).
html,
body {
margin: 0;
padding: 0;
}
header {
height: 40px;
width: 100%;
background-color: blue;
}
#maincontent {
background-color: green;
height: 100%;
width: 100%;
}
footer {
height: 40px;
width: 100%;
background-color: grey;
position: absolute;
bottom: 0;
}HTML
<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<div id="maincontent">
</div>
<footer></footer>
</body>
</html>谁知道答案？
sud*_*ban 113
(!)使用bottom&top拉伸div:
.mainbody{
position: absolute;
top: 40px; /* Header Height */
bottom: 20px; /* Footer Height */
width: 100%;
}
检查我的代码:http: //jsfiddle.net/aslancods/mW9WF/
Mar*_*phy 60
没有Javascript,没有绝对定位,也没有固定的高度.
这是一个所有CSS/CSS唯一方法,不需要固定的高度或绝对定位:
CSS
.container {
display: table;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}
HTML
<div class="container">
<header class="header">
<p>This is the header</p>
</header>
<section class="content">
<div class="content-body">
<p>This is the content.</p>
</div>
</section>
<footer class="footer">
<p>This is the footer.</p>
</footer>
</div>
在这里看到它:http://jsfiddle.net/AzLQY/
这种方法的好处是页脚和标题可以增长以匹配其内容,身体将自动调整自己.您也可以选择用css限制其高度.
joy*_*nks 48
有一个名为viewport height/viewport width的CSS单元.
例
.mainbody{height: 100vh;} 同样 html,body{width: 100vw;}
或90vh =视口高度的90%.
**IE9 +和大多数现代浏览器.
这允许一个居中的内容体,其最小宽度使我的表单不会崩溃搞笑:
html {
overflow-y: scroll;
height: 100%;
margin: 0px auto;
padding: 0;
}
body {
height: 100%;
margin: 0px auto;
max-width: 960px;
min-width: 750px;
padding: 0;
}
div#footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 60px;
}
div#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
div#pageContent {
padding-bottom: 60px;
}
div#header {
width: 100%;
}
我的布局页面如下所示:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="pageContent"></div>
<div id="footer"></div>
</div>
</body>
</html>
示例:http://data.nwtresearch.com/
还有一点需要注意,如果你想要像你添加的代码一样的整个页面背景,请height: auto !important;从包装器div中删除:http://jsfiddle.net/mdares/a8VVw/
使用top: 40px和bottom: 40px（假设你的页脚也是 40px）没有定义的高度，你可以让它工作。
.header {
width: 100%;
height: 40px;
position: absolute;
top: 0;
background-color:red;
}
.mainBody {
width: 100%;
top: 40px;
bottom: 40px;
position: absolute;
background-color: gray;
}
.footer {
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
background-color: blue;
}
| 归档时间： |
|
| 查看次数： |
212286 次 |
| 最近记录： |