需要帮助CSS身高(100％)身高 [英] Need help in CSS body height (100%) Height
问题描述
我正在建立一个网站，但是我遇到了一些问题，我尝试了很多，但没有发现它可以工作..！希望你们能做到..！
问题:
我的网站具有背景色，2 div和1张桌子，我想使网站的主体位于居中位置，而且它的高度也应为100％，就像yahoo答案的主体一样.
我已经制作了外部样式表，我正在使用CSS(不是css3)
希望你们能解决我的问题，谢谢.. !!
I''m making a website but i got a little bit problem i tried a lot but won''t found it to work..! hope you guys can do it..!
Question :
my site having a background color, 2 div and 1 table, and i want to make my site body to be in center and also it should be 100% in height, like yahoo answer''s body is.
i had made external style sheet, i''m using CSS (Not css3)
Hope you guys can solve my problem thanks..!
推荐答案
这里是快速示例:
Here is quick sample:
<!-- html -->
<html>
<head></head>
<body>
<div class="main">
<div class="heading">
Heading here
</div>
<div class="nav">
Navigation
</div>
<div class="content">
content
</div>
<div class="footer">Footer here</div>
<div>
</body>
</html>
/*CSS*/
html, body{height:100%; width:100%}
.main{width:500px;height:100%; margin:0 auto;border-right:1px solid #ddd; }
.heading{clear:both; height:6%;text-align:center;background-color:#eee}
.nav{height:90%;width:150px; float:left; background-color: #ddd;padding-left:5px;}
.footer{height:4%; background-color:#eee;clear:both;text-align:center;}
在jsfiddle上查看 jsfiddle全屏 [ jsfiddle源视图 [ ^ ]
这是上面解决方案的简单版本，并有描述:
1.确保您的网站保持完整宽度和浏览器高度，然后将html和body标签的高度和宽度都设置为100％.为了提高知名度，我让网站看起来是银色背景
2.为了使您的主要内容始终位于中间，请设置其宽度并为其设置页边距:0自动".这意味着您的主要内容的顶部和底部将为0，而其左侧和右侧将根据浏览器的宽度自动调整并保持居中. ("margin:0自动"是"margin:0自动自动0"的缩写)
再次为了提高可见性，我给内容区域添加了白色背景
View it on jsfiddle jsfiddle full screen[^]
jsfiddle Source view [^]
Here is a simple version of the solution above with description:
1. to make sure that your website stay full width and height of the browser set the html and body tags to have 100% on both height and width. For visibility I have the website to look silver background
2. To make your main content stay always in the middle, set its width and give it a ''margin: 0 auto''. What this means is that your main content will have top and bottom 0 while its left and right adjust automatically with the browser width and stay centred. (''margin: 0 auto'' is short for ''margin: 0 auto auto 0'')
Again for visibility I have given the content area a white background
<!-- html -->
<html>
<head>
</head>
<body>
<div class="main">
this is your main content, always centered
</div>
</body>
</html>
/*css*/
html,body{
height:100%;
width:100%;
background-color:silver
}
.main{
height:100%;
width:400px;
margin:0 auto;
background-color:white;
padding:5px;
}
这是此演示的预览，位于 jsfiddle [
Here is the preview for this demo onjsfiddle[^]
这篇关于需要帮助CSS身高(100％)身高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
