简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Tanya soalan tentang susun atur web?
世界只因有你
世界只因有你 2017-05-19 10:10:18
0
3
504

Huraikannya, untuk halaman, 

内容少得不足以产生滚动条的时候，footer落在最底部面，
当内容变多，页面产生滚动条时，footer要处于内容的最后，即滚动到最底部才能看见

Saya tahu satu kaedah adalah menggunakan margin-top negatif dan padding-bottom positif, tetapi rasanya tidak cukup fleksibel..

Adakah cara yang baik untuk mencapai matlamat ini?

Ini jawapan saya:
Css tulen
Oleh kerana saya menggunakannya terutamanya pada terminal mudah alih, ia sepatutnya serasi....
https://jsfiddle.net/BoomBang...

世界只因有你
世界只因有你

membalas semua(3)
淡淡烟草味
淡淡烟草味2017-05-19 10:12:18 Tingkat 3

Perkara seperti ini terletak pada idea:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title></title>
</head>

<body>
    <style>
    body{
        margin: 0;
    }
    html,
    body,
    .wrap {
        height: 100%;
    }
    
    .content {
        min-height: 100%;
    }
    
    footer {
        height:50px;
        background-color: #0cc;
        margin-top: -50px;
    }
    </style>
    <p class="wrap">
        <p class="content">
            <p>内容区域</p>
        </p>
        <footer>
            底部
        </footer>
    </p>
</body>

</html>

Rendering:

Suka +0
Tambah Balasan
大家讲道理
大家讲道理2017-05-19 10:12:18 Tingkat 2

Keserasian dengan IE lama tidak dipertimbangkan:
susun atur fleksibel + ketinggian minimum pembalut ialah ketinggian viewport/tingkap.

Untuk serasi dengan IE lama:

  1. Javascript;

  2. Helah CSS saiz tetap.

Suka +0
Tambah Balasan
漂亮男人
漂亮男人2017-05-19 10:12:18 Tingkat 1

Tetapkan min-height 属性，让其有一个最小高度，其值可以是固定的（如：1280px），亦可以通过 js 来动态设置（如：$('.content').css('min-height', window.innerHeight)) untuk kawasan kandungan, supaya apabila kandungan kurang, kawasan kandungan akan memenuhi seluruh tetingkap, dan struktur footer akan muncul di luar skrin (bawah, tatal kelihatan

);
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！