小编Joh*_*nny的帖子

使用CSS自动调整div高度

假设另一个有六个div.

第1,第2和第3 div具有固定高度,例如25px,100px和25px.第4个div是内容区域,应该是自动调整div.第5个div有一些内容,最小高度为100px(高度不固定).第6个div是一个具有固定高度的页脚,例如25px.

第5和第6个div应始终位于页面底部(不粘)

当第4个div(div_auto_height)包含大量内容并且页面与屏幕一样长或更长时,没有问题.

当页面比屏幕短并且第6个div之后出现空白空间时,会出现问题.然后第5和第6分区不是他们应该的位置.

这是正常情况

如果可以自动调整第4个div(div_auto_height)的高度以填充空白区域,则问题将得到解决.

这是我们需要的

如果没有一个像样的解决方案,我一直试图以多种方式解决这个问题.

不工作解决方案:

有不同的屏幕分辨率,因此最小高度不适用于大屏幕而不会使页面对于小屏幕或宽屏幕而言非常长.
我无法使顶部和底部定位属性正常工作,因为它使得div 5和6成为第4个div的顶部(div_auto_height)

这是您修改的模板:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>No title</title>
<style type="text/css">

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
}

#div1 {
    height: 25px;
    background-color: #123456;
}

#div2 {
    height: 100px;
    background-color: #345678;
}

#div3 {
    height: 25px;
    background-color: #567890;
}

#div_auto_height {
    height: auto ;
    background-color: #789012;
}

#div5 {
    min-height: 100px;
    background-color: #901234;
}

#div6 {
    height: 25px;
    background-color: #123456;
} …

Run Code Online (Sandbox Code Playgroud)

html css

Joh*_*nny

2012 01-11

6
推荐指数

1
解决办法

2万
查看次数

标签统计

css ×1

html ×1

使用CSS自动调整div高度

标签 统计

小编Joh_nny的帖子

标签统计