侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

CSS:当父元素已经100%时,使内部div的高度为100%

2022-12-25 星期日 / 0 评论 / 0 点赞 / 43 阅读 / 1951 字

我已经尝试了很长时间了,到目前为止我读过和google的所有帖子都没有帮助我,所以我希望你们其中一个人能给我一个提示: 我有一个由页眉,页脚和内容组成的布局.这个布局在整个页面上高高耸立(这已经

... . . 我已经尝试了很长时间了,到目前为止我读过和google的所有帖子都没有帮助我,所以我希望你们其中一个人能给我一个提示:

我有一个由页眉,页脚和内容组成的布局.这个布局在整个页面上高高耸立(这已经花了我一段时间才弄明白).到现在为止还挺好.但是现在我想尽可能地将内容div尽可能地延伸到页脚的开头.无论我做什么,它都不起作用,它或者保持文本的长度,或者它变成整个窗口的大小,隐藏页脚并生成滚动条.
我读到了一个解决方案,使其定位:绝对,但我不希望这样.

这是一个例子:http://jsfiddle.net/N9Gjf/1/

你真的会帮助我!

这是css:

html,body {    height:100%;    text-align:center;}#wrapper {    min-height:100%;    height:100%    overflow: hidden;    width:800px;    margin: 0 auto;    text-align: left;    background-color:lightblue;}   #footer {    background-color: silver;    height:1.5em;    width:800px;    margin: -1.5em auto;}#header {    background-color: orange;    height:100px;}#content {    background-color: limegreen;}* {    margin:0;    padding:0;}

这是html:

<div id="wrapper">    <div id="header">        <p>Header</p>    </div>    <div id="content">    INHALT      </div></div><div id="footer">    <p>Footer</p></div>
.

解决方法

. http://jsfiddle.net/calder12/CprV7/

包装器中的高度后缺少一个分号.您还希望将内容的高度和最小高度设置为100%.

#wrapper {min-height:100%;height:100%;overflow: hidden;width:800px;margin: 0 auto;text-align: left;background-color:lightblue;}#content {background-color: limegreen;height:100%;min-height:100%;}
. . .. ...

广告 广告

评论区