使身体DIV填充可用区域 [英] Make the BODY DIV Fill the Available Area
问题描述
我工作的一个全新的网站，我想刚才得到的基本布局去。我使用的是ASP.NET MVC 4生成的HTML，我想获得的 DIV 名为体来填补使得余地头，从而锚定页脚到浏览器窗口的底部后可用空间。不过，我得到现在是三面围板只是堆积在彼此顶部。
的我想一个解决方案，如果浏览器支持HTML5和，将工作之一，如果它没有的
的 请注意，我已经内联的CSS意见，试图解释什么我试过。的
HTML
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENGT＆;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8/＆GT;
＆LT;标题＆GT; @ ViewBag.Title - 标题＆LT; /标题＆GT;
＆LT;链接HREF =〜/ favicon.ico的相对=快捷方式图标类型=图像/ X-图标/＆GT;
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度/＆GT;
@ Styles.Render（〜/内容/ CSS）
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;报头GT;
＆LT; DIV CLASS =内容包装＆GT;
＆LT; DIV CLASS =浮动左＆GT;
＆LT; p =类网站标题＆GT; @ Html.ActionLink（标题，索引，家庭）＆LT; / P＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /头＆GT;
＆LT; DIV ID =身体＆GT;
@RenderSection（精选，必需：false）
＆lt;节类=内容包装主要内容清晰修复＆GT;
@RenderBody（）
＆LT; /节＆gt;
＆LT; / DIV＆GT;
＆LT;页脚GT＆;
＆LT; DIV CLASS =内容包装＆GT;
＆LT; DIV CLASS =浮动左＆GT;
＆LT; P＆GT;＆安培;复印件; @ DateTime.Now.Year - ACME。保留所有权利＆LT; / P＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =浮右＆GT;
＆LT; UL ID =社交＆GT;
＆LT;立GT;＆LT; A HREF =http://facebook.com级=脸谱＆GT; Facebook和LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =http://twitter.com级=推特＆GT; Twitter并LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /页脚＆GT; @RenderSection（脚本，必需：false）
＆LT; /身体GT;
＆LT; / HTML＆GT;
CSS
{体
/ *我已经试过以下两个，看看身体本身将跨越* /
/ *利用施加到身体单元没有其它CS * / / *高：填写可用; * /
/ *高：100％* /
}/ *总体布局
-------------------------------------------------- -------- * /
.float左{
浮动：左;
}.float右{
浮动：权利;
}.clear修复：后{
内容：;。
明确：两者;
显示：块;
高度：0;
visibility：hidden的;
}/ *主要布局
-------------------------------------------------- -------- * /
.content-包装{
保证金：0汽车;
最大宽度：960像素;
}＃身体 {
背景色：#efeeef;
明确：两者;
填充底：35px; / *我已经试过以下两个，看看我能得到这个元素跨越* /
/ *没有应用body标签任何其他CSS * / / *高：填写可用; * /
/ *高：100％* /
}。主要内容{
/ *背景：网址（../图像/ accent.png）不重复; * /
填充左：10px的;
填充顶：30PX;
}.featured +。主要内容{
/ *背景：网址（../图像/ heroAccent.png）不重复; * /
}页脚{
明确：两者;
背景颜色：＃e2e2e2;
字体大小：.8em;
高度：100像素;
}/* 网站标题
-------------------------------------------------- -------- * /
。网站标题 {
颜色：＃c8c8c8;
FONT-FAMILY：罗克韦尔，索拉，宋体，快递，等宽;
字体大小：2.3em;
保证金：0 20px的;
} .site所有权，.site标题答：悬停，.site所有权：积极{
背景：无;
颜色：＃c8c8c8;
概述：无;
文字修饰：无;
}/ *社会
-------------------------------------------------- -------- * /
UL＃社黎{
显示：内联;
列表样式：无;
} UL＃社会里一个{
颜色：＃999;
文字修饰：无;
}a.facebook，a.twitter {
显示：块;
浮动：左;
family：宋体;
填充左：知识+;
TEXT-INDENT：-9999px;
宽度：16px的;
}a.facebook {
背景：网址（../图像/ facebook.png）不重复;
}a.twitter {
背景：网址（../图像/ twitter.png）不重复;
}
只需拍下在使用固定定位页面底部的页眉和页脚。
页眉，页脚{位置：固定;左：0;右：0;的z-index：1; }
头顶部{：0; }
页脚{底：0; }
然后，你可以给你的体背景你的 DIV＃身体过的。在div得到没有背景，并将扩大不亚于必要的。
DIV＃{体背景：无; }
身体{背景：#eee; }
这看起来像网页的 DIV 将填补剩余空间。最后给你的头和页脚 A 背景，这样你无法看到其下的主体的背景
页眉，页脚{背景：#FFF; }
这是我建议去掉身体利润率的方式。 {身体保证金：0; }
I'm working on a brand new website and I'm trying to just get the basic layout going. I am using the ASP.NET MVC 4 generated HTML and I would like to get the DIV named body to fill the available space after making room for the header and thus anchoring the footer to the bottom of the browser window. However, what I'm getting right now is three panels just stacked on top of each other.
I would like a solution that would work if the browser supported HTML5 and one if it didn't
Please note I've inlined comments in the CSS to try and explain what I've tried.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">@Html.ActionLink("Title", "Index", "Home")</p>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - ACME. All rights reserved.</p>
</div>
<div class="float-right">
<ul id="social">
<li><a href="http://facebook.com" class="facebook">Facebook</a></li>
<li><a href="http://twitter.com" class="twitter">Twitter</a></li>
</ul>
</div>
</div>
</footer>
@RenderSection("scripts", required: false)
</body>
</html>
CSS
body {
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF THE BODY ITSELF WOULD SPAN */
/* WITH NO OTHER CSS APPLIED TO THE body ELEMENT */
/*height: fill-available;*/
/*height: 100%*/
}
/* general layout
----------------------------------------------------------*/
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 960px;
}
#body {
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF I COULD GET THIS ELEMENT TO SPAN */
/* WITHOUT ANY OTHER CSS APPLIED TO THE body TAG */
/*height: fill-available;*/
/*height: 100%*/
}
.main-content {
/*background: url("../Images/accent.png") no-repeat;*/
padding-left: 10px;
padding-top: 30px;
}
.featured + .main-content {
/*background: url("../Images/heroAccent.png") no-repeat;*/
}
footer {
clear: both;
background-color: #e2e2e2;
font-size: .8em;
height: 100px;
}
/* site title
----------------------------------------------------------*/
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
margin: 20px 0;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
/* social
----------------------------------------------------------*/
ul#social li {
display: inline;
list-style: none;
}
ul#social li a {
color: #999;
text-decoration: none;
}
a.facebook, a.twitter {
display: block;
float: left;
height: 24px;
padding-left: 17px;
text-indent: -9999px;
width: 16px;
}
a.facebook {
background: url("../Images/facebook.png") no-repeat;
}
a.twitter {
background: url("../Images/twitter.png") no-repeat;
}
Just snap the header and footer at the bottom of the page using fixed positioning.
header, footer{ position:fixed; left:0; right:0; z-index:1; }
header{ top:0; }
footer{ bottom:0; }
Then you can give your body the background your div#body had before. The div gets no background and will expand as much as needed.
div#body{ background:none; }
body{ background:#eee; }
This will look like the div would fill the remaining space of the page. Finally give your header and footer a background so that you can't see the background of the body under it.
header, footer{ background:#fff; }
By the way I would suggest removing body margins. body{ margin:0; }
这篇关于使身体DIV填充可用区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
