简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - div的滚动条问题
PHPz
PHPz 2017-04-11 10:32:43
0
1
366

四个p被包裹在id="tzgp"的p下，但是这四个p是相对于body进行的绝对定位，如何让外层的p出现滚动条，使超出部分的p可以滚动显示。
我试过给外层p添加overflow：scroll的样式，貌似没效果，因为内层p是相对body定位的。
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    body{
        position: relative;
    }
    #tzgp #tzg1{
        position: absolute;
        left: 0px;
        top: 0px;
    }
    #tzgp #tzg2{
        position: absolute;
        left: 400px;
        top: 0px;
    }
    #tzgp #tzg3{
        position: absolute;
        left: 800px;
        top: 0px;
    }
    #tzgp #tzg4{
        position: absolute;
        left: 1200px;
        top: 0px;
    }
</style>
<body>
    <p id="tzgp">
        <p id="tzg1" style="width: 400px; height: 200px; background-color: blue;"></p>
        <p id="tzg2" style="width: 400px; height: 200px; background-color: yellow;"></p>
        <p id="tzg3" style="width: 400px; height: 200px; background-color: green;"></p>
        <p id="tzg4" style="width: 400px; height: 200px; background-color: red;"></p>
        
    </p>
</body>

</html>

PHPz
PHPz

学习是最好的投资！

全員に返信(1)
大家讲道理
大家讲道理2017-04-11 10:34:43 1棟

如果你需要效果统一的话，可以使用:

overflow:scroll;

设定后，溢出的内容会出现滚动条，没有溢出的会有一个滚动条的滚动区域样式。

如果是单纯的溢出显示滚动条，没溢出不显示，使用：

overflow:auto;


这里使用的是overflow-y，如果你需要横向滚动就使用overflow-x，上下左右都可以滚动就用overflow

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！