CSS - 简单的 DIV 布局问题
基本上我想要有四个主要的 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< /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技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我不认为他们是只用 html 和 CSS 来做到这一点的方法,基本上你想要的是 100% -180px 作为
min-height
。我能想到的唯一方法是使用 JavaScript 获取高度作为像素,然后从中减去 180px。页眉
、导航
和页脚
为 60 像素。这还需要限定,如果他们没有最大化地运行浏览器,那么视图区域将会不同。您可以检查 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 theheight
as pixels and then subtracts 180px from them. 60 pixels for theheader
,navigation
, andfooter
.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. :)这并不像听起来那么简单。这是 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