CSS 100%高度主体和元素_Css - Fatal编程技术网

CSS 100%高度主体和元素

css

CSS 100%高度主体和元素,css,Css,我有一个问题，使我的一个元素100%在一个整体布局，这是100% 我尝试了不同的定位解决方案，我要么以隐藏的内容结束，即底部页脚后面的浮动，要么内容结束于页脚后面，并在页脚后面继续这是我的页面布局 <!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/

我有一个问题，使我的一个元素100%在一个整体布局，这是100%

我尝试了不同的定位解决方案，我要么以隐藏的内容结束，即底部页脚后面的浮动，要么内容结束于页脚后面，并在页脚后面继续

这是我的页面布局

<!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" lang="en-US">

<head>
<style>
    *{margin:0}
    html,body{margin:0; padding:0; height:100%}
    .wrapper{position:relative; margin:0 auto -200px; height:auto !important; height:100%; min-height:100%}
    .container{width:930px; margin:0 auto; text-align:left}
    .right{float:right; width:680px; background:#FFF; margin:60px 10px 0 0; padding:0}
    .left{float:left; width:240px}
    .content{padding:10px}
    .footer{position:absolute; width:100%}
    .footer,.push{height:200px}
</style>
</head>

<body>

<div class="wrapper">
<div class="container">
<div id="left">
   left
</div>
<div class="right">

<div class="content">
    content
</div>

</div>
<div class="push"></div>
</div>
<div class="footer">
    footer
</div>
</div>

</body>
</html>


*{边距：0}
html，正文{margin:0；padding:0；height:100%}
.wrapper{位置：相对；边距：0自动-200px；高度：自动！重要；高度：100%；最小高度：100%}
.container{宽度：930px；边距：0自动；文本对齐：左}
.right{浮点：右；宽度：680px；背景：#FFF；边距：60px 10px 0；填充：0}
.left{float:left；width:240px}
.content{padding:10px}
.footer{位置：绝对；宽度：100%}
.footer、.push{height:200px}
左边
内容
页脚

页面的布局是100%高，底部是页脚，它只适用于具有类名内容的div，我也希望是100%，如果内容到达页脚并且没有消失，则将页脚进一步向下推

非常感谢您的帮助

在代码页脚中有位置：绝对，但没有给出实际位置（例如底部：30px；）。此外，如果希望.content或.push影响.footer位置，则它们必须位于相同的流中（例如，两个位置：static；）。给定页脚位置：根据定义，绝对从正常流中获取页脚位置，因此这与目标不兼容

我想你要做的是得到一个100%的页面，即使内容很少，并且页脚总是在页面/屏幕的底部

FooterStickAlt是一个很好的跨浏览器解决方案。

在不久之后才能查看代码的情况下，我建议将类“clearfix”放在没有用白色完全展开的div上

在这里，您可以很好地定义clearfix是什么，以及css的定义。

正确的css应该如下所示：

<style type="text/css" media="screen">
    html,body
    {
        margin:0; padding:0; height:100%;
    }
    .wrapper
    {
        position:relative;
        min-height:100%;
        /*background: #fef;*/
    }
    .container
    {
        margin: 0 auto;
        width: 930px;
        padding: 0 0 200px 0; /*200 pixels at the bottom, to stay over the footer*/
        /*background: #fff; */
    }
    .left /* This was one cause. Old line: <div id="left">, new line: <div class="left"> */
    {
        float: left;
        width: 240px;
        /*background: #efe;*/
    }
    .right
    {
        float: left;
        width: 690px; 
        /*background: #efa;*/
    }
    .right .content
    {
        padding: 10px;
    }
    .clear
    {
        clear: both;
    }
    .footer
    {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 200px;
        /*background: #eff;*/
    }
</style>


html，正文
{
边距：0；填充：0；高度：100%；
}
.包装纸
{
位置：相对位置；
最小高度：100%；
/*背景：#fef*/
}
.集装箱
{
保证金：0自动；
宽度：930px；
填充：底部0 200px 0；/*200像素，以保持在页脚上方*/
/*背景：#fff*/
}
.left/*这是一个原因。旧行：，新行：*/
{
浮动：左；
宽度：240px；
/*背景：#efe*/
}
.对
{
浮动：左；
宽度：690px；
/*背景：全民教育*/
}
.对.内容
{
填充：10px；
}
清楚的
{
明确：两者皆有；
}
.页脚
{
位置：绝对位置；
底部：0；
宽度：100%；
高度：200px；
/*背景：#eff*/
}

我相信这会对你有帮助

<div class="wrapper">
    <div class="container">
        <div class="left">
           left
        </div>
        <div class="right">

            <div class="content">
                content
            </div>

        </div>
        <div class="clear"></div>
    </div>
    <div class="footer">
        footer
    </div>
</div>


左边
内容
页脚

这看起来像是你想要的。每次，页脚都在底部，就像您希望的那样：）

希望有帮助

根据Cen写的线索找到了我自己的解决方案；搜索100%的布局与人造列，并得到了这个

通过稍微调整和拼接我的不同布局，我提出了以下解决方案，它适用于所有浏览器。

Animauson:实际上，以下代码对于IE6支持是必要的：

min-height: 100%; /* real browsers */
height: auto !important; /* real browsers */
height: 100%; /* IE6: treated as min-height*/

IE6不理解

！重要信息

，但它确实将高度视为最小高度。因此，要支持IE6和现代浏览器，您必须使用完全相同的代码（顺序很重要）。

另一个解决方案是使用javascript（显然不是最干净的方式，但在某些情况下它可能很有用）

使用jQuery：

//Get height
var divHeight = $('#div').height();

//Apply css rule
$('#anotherDiv').css('height', divHeight);

回答得很晚，但对其他人可能有用。

你可以简单地使用100vh（vh是视口高度单位）

你可能会在姐妹网站更走运。修复你的html代码以显示所有内容，我会为你修复你的样式。修复，很抱歉，在你实际发布+1移动之前，它一直在工作，如果我可以投票的话：）我注册并发布了doctype.com，这与此网站非常相似。谢谢你指出这一点！是的，我有这个使用这种布局-现在我添加了左和右元素，我希望至少右边是100%的高度，以携带白色背景的页脚。因为它现在有内容，所以看起来很好，如果它没有内容或内容很少，白色就不能通过。我尝试了clearfix，但它仍然没有降低身体右侧100%的高度。我尝试了这个解决方案，它给出了相同的场景。我的问题不是页脚，而是右栏的高度不是100%。当我通过定位进入div时，除了文本在页脚后面丢失外，它工作正常。基本上，我正在尝试在一个已经设置为100%的元素中获得一个100%高度的元素-我认为这是不可能的，因为我在任何地方都找不到一个解决方案，除非我去JS-我不准备这样做。不准备在。。。你不懂JS，或者由于老板的限制，你无法在解决方案中使用javascript？我做了一个屏幕截图，展示了当我使用上面的布局时得到的结果。这是我一直在玩弄的东西，但我也不知道如何让它工作，就是让背景容器变大，可以说扩展到无穷大。我能逃脱吗？至于JS，我试过了，但当浏览器调整大小时，我遇到了一些问题。我是一个严格意义上的PHP程序员，前面的那个家伙被解雇了。需要一份工作！听着，我为你找到了一些东西：）这对我很有用，我把它放在我身体的css中，把“高度：100%”放在html css中。