如何将窗口的高度从窗口扩展到窗口的底部

我正在尝试构建一个构建，如下所示。 2.Div应该从窗口的标题延伸到窗口底部。顺便说一下，我使用的布局包括“标题”和“页脚”，所以“标题”和“页脚”来自布局。当页面打开时，只需1.div和2.div可见，然后滚动它应该跟随其他div。如何将窗口的高度从窗口扩展到窗口的底部

来源

2016-08-04 Tolga Kısaoğulları

提供一些HTML和CSS你做 –

，你可以把你的尝试HTML和CSS代码... – vignesh

实际上，我已经做到了布局网页，它仅仅包括页眉和页脚，这就是所有。 .header {填充底：31px;位置：相对;} .footer {显示：块;位置：相对;}

困惑我本人如何能制作2.div就像没有百分比那样。 –

因为你必须有一个相对高度的标题，你可以做这种伎俩与jQuery;

通过从<body>标签高度中减去.header高度来设置.body元素的高度。

$('.bodycontent').height(
 
    $('body').height() - $('.header').height() 
 
);

html, body { 
 
    height:100%; 
 
} 
 

 
.header { 
 
    background-color:red; 
 
} 
 

 
.bodycontent { 
 
    background-color:blue; 
 
} 
 

 
.third { 
 
    height:30%; 
 
    background-color:pink; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 
    header 
 
</div> 
 

 
<div class="bodycontent"> 
 
    
 
</div> 
 

 
<div class="third"> 
 
    
 
</div>

来源

2016-08-04 08:36:46 Randy

但标题不应该有静态高度 –

@TolgaKısaoğulları更新了一点点的JS。 – Randy

如何将窗口的高度从窗口扩展到窗口的底部

回答

相关问题