根据顶部（）和底部（）设置CSS的DIV高度

我正在处理的页面为www.joelchristophel.com。您可以通过检查大多数浏览器中的元素来查看源代码。我想要内容div，称为main_body，来填充标题和main_bottom div之间的区域。为此，我已经设置了顶部像素的位置以及底部像素的位置。但是，这不起作用，因为main_body只扩展到内容的大小。我应该怎么做呢？根据顶部（）和底部（）设置CSS的DIV高度

编辑：最后，main_body应该固定在溢出设置滚动的地方。

来源

2013-05-17 Joel Christophel

你是否真的想将页脚修复到底？请记住，也许内容需要一个丑陋的滚动条。我会尝试给main_body分钟/最大高度 – abimelex

这就是为什么溢出设置为滚动。另外，尽管在CSS文件中使用了一个脚本，但我还没有使用脚注。 –

所以在你的情况下，更好的方法是将页面高度设置为100％，并将其他高度设置为与页面相对，而不是使用固定位置。 – abimelex

我结束了使用百分比作为高度。并从main_bottom中删除bottom: 20;行。这就像一个魅力。

来源

2013-05-19 02:31:44

你的'底部：20;'是无效的。你没有文档类型，所以你有怪癖。你知道你想要什么，但你会从这里开始不断的战斗。 – Rob

你能否阐述一下，因为我是全新的。（例如，如何添加文档类型，为什么我需要一个，等等） –

CSS需要“单位”，如px或em。你有什么就像告诉某人，“我住在这里20远”。 “文档类型”（文档类型）为您的文档设置标准模式。没有一个，它就像1999年一样。标准模式通过将它放在第一行：'<！DOCTYPE html>'来设置。更多在这里：http://hsivonen.iki.fi/doctype/ – Rob

我建议你手动设置每个div的高度，然后玩弄它。在你的css中#main .main_body设置：

height = 500px;

500是你想要的任何值。然后把你的main_bottom div放到你的主体div中。

你也应该看看这个链接：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks如果你想让一个孩子div高度与父div一样可以帮助你一点。

来源

2013-05-17 06:30:26 falky

这是您的要求代码。

HTML

<div class="header"> 

</div> 

<div class="content"> 
    Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!! 
</div> 

<div class="footer"> 

</div>

CSS

.header 
{ 
    width:100%; 
    float:left; 
    border:1px solid black; 
    height:50px; 
} 

.content 
{ 
    width:100%; 
    float:left; 
    border:1px solid black; 
    margin-top:10px; 
    height:auto: 
} 

.footer 
{ 
    width:100%; 
    float:left; 
    border:1px solid black; 
    height:50px; 
    margin-top:10px; 
}

试试看.. !!

来源

2013-05-17 06:38:09

根据顶部（）和底部（）设置CSS的DIV高度

回答

相关问题