2015-11-19 96 views
0

我有关于高度属性的问题。 我正在做一个网站,并希望做到这一点:有一个div元素折叠其他人,这有一个孩子div,当我调整窗口高度,然后父div获得窗口高度。没关系,但小孩div没有修复,所以有些孩子的元素是这不显示。那些都停留在孩子div ... plase帮助我...css高度和溢出

我想看到完整的黄色区域的补丁,但当我调整浏览器的高度时,一些p标签停留下来......我该如何解决它?无论浏览器高度黄色布丁必须显示...请帮我...

enter image description here

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Document</title> 
 
\t <style> 
 
\t *, *:before, *:after{ 
 
\t \t padding:0; 
 
\t \t margin:0; 
 
    \t box-sizing: border-box; 
 
\t } 
 
\t html,body{ 
 
\t \t height:100%; 
 
\t \t overflow-y: hidden; 
 
\t } 
 
\t .d{ 
 
\t } 
 
\t .d1{ 
 
\t \t height:100%; 
 
\t \t overflow:hidden; 
 
\t \t position:relative; 
 
\t } 
 
\t .d2{ 
 
\t \t display:block; 
 
\t \t position:relative; 
 
\t \t background:yellow; 
 
\t \t overflow-y: auto; 
 
\t \t height:90%; 
 
\t } 
 
\t .d3{ 
 
\t \t height:90px; 
 
\t \t background:blue; 
 
\t } 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <div class="d d1"> 
 
\t \t <div class="d3"> 
 
\t \t \t <p>dadsdsaasd</p> 
 
\t \t \t <p>dadsdsaasd</p> 
 
\t \t \t <p>dadsdsaasd</p> 
 
\t \t \t <p>dadsdsaasd</p> 
 
\t \t \t <p>dadsdsaasd</p> 
 
\t \t </div> 
 
\t \t <div class="d2"> 
 
\t \t \t <p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>sonososososo</p> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

回答

0

尝试使用position:inherit为孩子申报单。希望这项工作

0

您可以使用css calc

Jsfiddle

.d2 
{ 
    height: calc(100% - 90px); 
} 
0

身高在像素和百分比,将不工作的伟大一般。溢出:隐藏90%div,因为它超出视口大小。删除overflow:隐藏父div,body标签&查看隐藏内容。如果有任何溢出的具体原因:隐藏到顶层。您仍然可以通过两个孩子的div

提的百分比值达到同样根据你的代码 .D2 {高度:87%} .d3 {高度:13%}