CSS - 简单的 DIV 布局问题

发布于 2024-12-08 05:12:02 字数 782 浏览 0 评论 0原文

基本上我想要有四个主要的 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< /code> div 展开以占据 window height 未被 header 占据的其余部分和页脚。我无法让它工作:(

Basically I want to have four main divs for my basic layout:

<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>

I set the height of html, body and .container to 100% in CSS. Then .header, .navigation and .footer heights to 60px.

I would like the .content div to either match the height of the content that's within it, or if there's just a bit of content, have the .content div expand to take up the rest of the window height that isn't occupied by the header and footer. I can't get this to work :(

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

眼波传意 2024-12-15 05:12:02

我不认为他们是只用 html 和 CSS 来做到这一点的方法,基本上你想要的是 100% -180px 作为 min-height 。我能想到的唯一方法是使用 JavaScript 获取高度作为像素,然后从中减去 180px。 页眉导航页脚为 60 像素。

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

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

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

I don't think their is a way to do this with just html and CSS basically what you are wanting is 100% -180px as a min-height. The only way I could think of to do this would be a javascript that gets the height as pixels and then subtracts 180px from them. 60 pixels for the header, navigation, and footer.

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

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

This also needs to be qualified that if they are not running their browsers as maximized then the view area will be different. You could check for an on onresize event, but that's a different question. :)

妄断弥空 2024-12-15 05:12:02

这并不像听起来那么简单。这是 Matthew James Taylor 的 css 驱动解决方案的链接。它是单栏整页设计,但也有 2 栏和 3 栏设计的链接。我在我构建的使用这个概念的页面中使用了这个(并相信它)。

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

This is not as simple as it sounds. Here is a link to a css driven solution by Matthew James Taylor. It is a single column full page design, but there are links to 2 and 3 column designs as well. I use this (and credit it) in pages I build that use this concept.

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文