gpt4 book ai didi

jquery - CSS - 简单的 DIV 布局问题

转载 作者:太空宇宙 更新时间:2023-11-04 00:24:04 25 4
gpt4 key购买 nike

基本上我想为我的基本布局设置四个主要的 div:

<html>
<body>
<div class="container">
<div class="header">header</div>
<div class="navigation">navigation</div>
<div class="content">contents</div>
<div class="footer">footer</div>
</div>
</body>

我在 CSS 中将 htmlbody.container 的高度设置为 100%。然后.header, .navigation.footer 高度为60px。

我希望 .content div 匹配其中内容的高度,或者如果只有一点内容,请使用 .content div 扩展以占据 window height 未被 header< 占用的其余部分页脚。我无法让它工作:(

最佳答案

我不认为他们是一种只用 html 和 CSS 来做到这一点的方法,基本上你想要的是 100% -180px 作为 min-height。我能想到的唯一方法是使用 javascript 将 height 作为像素,然后从中减去 180px。 headernavigationfooter 为 60 像素。

var winHeight = $(window).height();
winHeight = winHeight - 180;

$(document).ready(function(){
$(".content").css('min-height', winHeight);
});

这也需要限定,如果他们没有以最大化方式运行浏览器,那么 View 区域将会不同。您可以检查 on onresize 事件,但这是一个不同的问题。 :)

关于jquery - CSS - 简单的 DIV 布局问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7648205/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com