如何制作CSS高度：100％在不同高度的容器中生效？

我的HTML有2个div的外格内：如何制作CSS高度：100％在不同高度的容器中生效？

<div class="outer"> 
    <div class="col-left"> 
     <p>Lorem Ipsum is simply dummy text of the... 
    </div> 

    <div class="col-right">Right</div> 

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

的CSS是：

.outer { 
    border: 1px solid black; 
} 

.col-left { 
    float: left; 
    background: cyan; 
    width: 80% 
    height: 100%; 
} 

.col-right { 
    float: left; 
    width: 15%; 
    background: yellow; 
    height: 100%; 
} 

.clear { 
    clear: both; 
}

高度：100％才能生效，如果我设定一个像素高度的.outer类，然而，我有一个高度不应该固定的情况。

如何在不指定父母高度的情况下使用身高100％？

我打算用莱恩在评论中写的。

来源

2013-07-23 SBel

你不能。此行为是规范的一部分。对于可变高度，您必须使用JavaScript。 – Jeff

雅杰夫是正确的我过去卡在这很多 – matthiasgh

你可以使用jQuery吗？我创建了一个函数，稍后再做这个。 – defaultNINJA

如果您告诉标签的父标签（包括html和body标签）也是100％的高度，应该可以解决您的问题。我添加了max-height作为选项，我不知道你是否希望容器运行整个屏幕的长度。

http://jsfiddle.net/brandonbabb/SL3FC/

html, body { 
    height:100% 
} 
.outer { 
    border: 1px solid black; 
    height: 100%; 
    max-height: 500px 
} 
.col-left { 
    float: left; 
    background: cyan; 
    width: 80%; 
    height: 100%; 
} 
.col-right { 
    float: left; 
    width: 15%; 
    background: yellow; 
    height: 100%; 
} 
.clear { 
    clear: both; 
}

来源

2013-07-23 15:53:59

可以做到这一点，但它的棘手。你需要让html和body知道它们的高度，然后才能把它们的内容告诉100高度等。---所以，如果html没有身高，那么身体如何知道100％是什么？并在下线。我每隔一天就滑下一个滑坡。

html, body { 
    height: 100%; 
} 

.outer { 
    border: 1px solid black; 

    /* I use this instead of the micro clear-fix in this case - look that up */ 
    overflow: hidden; 
    height: 100%; 
} 

.col-left { 
    float: left; 
    background: cyan; 
    width: 80%; 
    min-height: 100%; 
} 

.col-right { 
    float: left; 
    width: 20%; 
    background: yellow; 
    height: 100%; 
}

http://jsfiddle.net/sheriffderek/fdxGZ/

这也与 “粘” 页脚和东西的一个问题：始终战斗http://codepen.io/sheriffderek/pen/ziGbE

我希望帮助！

来源

2013-07-23 15:57:55 sheriffderek

**对我来说看起来不错** – matthiasgh

看到这个清除修正以清除浮游物。然后，您可以在几个关键容器中为您的标记添加一个类，并省略空的清除div。 http://gnolasgallagher.com/micro-clearfix-hack/（当前解决方案截至2013年7月） – sheriffderek

@matthiasgh这是一个大胆的说法。 –

使用jQuery

$(document).ready(function(){ 
    var outerheight = $('.outer').height(); 
    $('.col-right').height(outerheight);  
});

来源

2013-07-23 16:03:25 robz228

如何制作CSS高度：100％在不同高度的容器中生效？

回答

相关问题