Question

基本上我想为我的基本布局设置四个主要的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中将html，body和.container的高度设置为100％。然后.header，.navigation和.footer高度为60px。

我希望.content div能够匹配其中内容的高度，或者如果只有一些内容，请.content div展开以占用未被window和height占用的header footer的其余部分。我不能让这个工作:(

Answer 1

我不认为他们只是用html和CSS来做这件事基本上你想要的是100％-180px作为min-height。我能想到的唯一方法就是将height作为像素，然后从中减去180px的javascript。 header，navigation和footer的60像素。

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

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

这也需要合格，如果他们没有以最大化的方式运行他们的浏览器，那么视图区域将是不同的。您可以检查onresize event，但这是一个不同的问题。：）

Answer 2

这并不像听起来那么简单。以下是Matthew James Taylor提供的css驱动解决方案的链接。它是单列整页设计，但也有链接到2和3列设计。我在使用这个概念的我构建的页面中使用它（并将其归功于它）。

http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-pixels.htm

CSS - 简单的DIV布局问题

2 个答案: